1. html
  2. /tags
  3. /meta

<meta>

Definition

The HTML <meta> element is a tag used to provide metadata about an HTML document. Metadata is data that provides information about other data, and in the context of an HTML document, it describes the properties of the page.

The <meta> tag is placed in the head section of an HTML document and provides information about the document such as the character encoding used, keywords that describe the page, a description of the page, and the author of the document.

Examples

Here's an example of a simple <meta> tag:

<head>
  <meta charset="UTF-8">
  <meta name="description" content="This is an example of a meta description.">
  <meta name="keywords" content="example, meta, tag">
  <meta name="author" content="Your Name">
  <title>Page Title</title>
</head>

In this example, the <meta> tags provide information about the character encoding used in the document, a description of the page, keywords that describe the page, and the author of the document.

Attributes

This element's attributes include the global attributes.

AttributeDescriptionDeprecated?
charsetSpecifies the character encoding of the documentNo
contentSpecifies the value associated with a property name, such as a description of the page or keywords associated with the pageNo
http-equivSpecifies an HTTP header for the information/value of the content attributeNo
nameSpecifies the name of the metadata property being definedNo
schemeSpecifies the scheme used to interpret the value of the content attributeNo

Best Practices

  • Use the charset attribute to specify the character encoding of your document. This ensures that the document is displayed correctly in all browsers and avoids issues with special characters.
  • Provide a unique and descriptive title for your page, as this will help users and search engines understand what the page is about. The <title> element should be placed within the <head> section of your document.
  • Use the name attribute to specify the name of the metadata property being defined, and the content attribute to provide the value of that property. Use relevant keywords to help search engines understand the content of your page.
  • Use the description metadata property to provide a concise summary of your page content. This may be displayed in search engine results, so make sure it accurately reflects the page content.
  • Use the viewport meta tag to ensure that your page is optimized for mobile devices. This tag controls the width, height, and initial scale of the viewport, which affects how the page is displayed on different devices.
  • Use the robots meta tag to specify whether search engine crawlers should index your page or follow links on the page. This can help control how your page appears in search results and prevent sensitive information from being indexed.
  • Use the canonical link element to specify the preferred URL for pages with duplicate or similar content. This helps prevent duplicate content issues and ensures that search engines understand the relationship between pages.
  • Avoid using deprecated or obsolete metadata properties, as these may not be recognized by modern browsers or search engines. Instead, use current metadata properties and follow current best practices for SEO and metadata optimization.

Accessibility Considerations

  • Use the charset attribute to specify the character encoding of your document, which ensures that special characters are properly displayed for users with different languages and assistive technology.
  • Use the name and content attributes to provide descriptive and accurate metadata about the page content. This can help users with assistive technology to better understand the page and its purpose.
  • Use the description metadata property to provide a concise summary of the page content. This may be read aloud by screen readers, so make sure it accurately reflects the page content.
  • Use the viewport meta tag to ensure that your page is optimized for mobile devices. This can help users with disabilities who use mobile devices to access your content.
  • Avoid using metadata properties that are not recognized by modern browsers or search engines, as this can create confusion for users with assistive technology.
  • Use the lang attribute to specify the language of the document, which can help users with assistive technology to better understand the page content.
  • Avoid using metadata to hide content from users, as this can create confusion for users with assistive technology. Instead, use proper HTML elements and CSS to control the display of content.

Browser Compatibility

ChromeFirefoxSafariInternet ExplorerMicrosoft EdgeOpera
YesYesYesYesYesYes