HTML <meta> Element

Publish in HTML Tutorial el 25/05/2025 13:48

The <meta> tag is a crucial HTML element that provides metadata about an HTML document. Metadata is information about the data in your webpage that isn't displayed to users but is vital for browsers, search engines, and other web services.

Meta elements are typically placed inside the <head> section of an HTML document and can specify character encoding, viewport settings, author information, keywords, descriptions, and more. They play a significant role in SEO and how your page is displayed on different devices.

Basic Meta Tag Syntax

Common Meta Tag Attributes

charset: Specifies the character encoding (e.g., UTF-8)
name: Specifies the type of metadata (e.g., viewport, description, keywords)
content: Provides the value for the metadata
http-equiv: Used for HTTP header information (e.g., refresh, content-type)

Meta Tag Examples

1. Basic Character Encoding

This essential meta tag declares the document's character encoding:

Play Code

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <p>This document uses UTF-8 encoding</p>
</body>
</html>

2. Responsive Viewport Settings

This meta tag is crucial for responsive design on mobile devices:

Play Code

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Responsive Page</title>
</head>
<body>
  <p>This page will scale properly on mobile devices</p>
</body>
</html>

3. Page Description for SEO

This meta tag provides a description that search engines may display in results:

Play Code

<!DOCTYPE html>
<html>
<head>
  <meta name="description" content="Learn all about HTML meta tags and how they improve your website's SEO and functionality">
  <title>Meta Tag Tutorial</title>
</head>
<body>
  <h2>Meta Tag Guide</h2>
</body>
</html>

4. Page Refresh with JavaScript

This example shows how to use meta tags with JavaScript for page refresh:

Play Code

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="refresh" content="5;url=https://example.com">
  <title>Redirecting...</title>
</head>
<body>
  <p>You will be redirected in 5 seconds...</p>
  <script>
    setTimeout(function() {
      document.querySelector('meta[http-equiv="refresh"]')
        .setAttribute('content', '3;url=https://example.com');
    }, 2000);
  </script>
</body>
</html>

5. Dynamic Meta Tags with JavaScript

This example shows how to modify meta tags dynamically with JavaScript:

Play Code

<!DOCTYPE html>
<html>
<head>
  <meta id="dynamicMeta" name="description" content="Initial description">
  <title>Dynamic Meta Example</title>
</head>
<body>
  <button onclick="changeMeta()">Change Meta Description</button>
  <script>
    function changeMeta() {
      const meta = document.getElementById('dynamicMeta');
      meta.setAttribute('content', 'This description was changed by JavaScript!');
      alert('Meta description updated!');
    }
  </script>
</body>
</html>

Meta Tag Tips and Tricks

Always include the charset meta tag as the first element in your <head> section
For SEO, craft unique and compelling descriptions for each page
Use the viewport meta tag to ensure proper mobile rendering
Consider using Open Graph meta tags for better social media sharing
Be cautious with refresh meta tags as they can negatively impact user experience
You can use multiple meta tags with different attributes on the same page

Advanced Meta Tags

Here are some advanced meta tags you might find useful:

Meta tags are powerful tools that can significantly impact how your website is perceived by both users and search engines. Use them wisely to enhance your site's functionality and visibility.