HTML Document Metadata | The <meta> Element

Understanding the <meta> Element

The <meta> element provides metadata about an HTML document, such as its character encoding, page description, viewport settings, and other information used by browsers, search engines, and other software.

Metadata describes or configures the document rather than becoming part of its main page content. The <meta> element is placed in the document's <head> and uses attributes to specify the type of metadata and its value.

Meta Element Syntax

The meta element is a void element, which means it does not contain content and does not use an end tag.

<meta attribute="value">

The purpose of a particular meta element is determined by its attributes. For example, this declaration specifies the document's character encoding:

<meta charset="utf-8">

Another common form uses the name and content attributes:

<meta name="description" content="Learn HTML step by step.">

A document can contain multiple meta elements because each one can provide a different type of metadata.

Where to Place Metadata

The meta element belongs in the document's head.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Learn HTML step by step.">
    <title>HTML Tutorial</title>
  </head>
  <body>
    ...
  </body>
</html>

Metadata is information about or instructions for the document, so meta elements are not used to display ordinary page content within the body.

The character encoding declaration should appear very early in the document head so the browser can determine the encoding while processing the beginning of the document.

Character Encoding

The charset attribute declares the character encoding used by the HTML document.

<meta charset="utf-8">

UTF-8 is the standard encoding used for modern HTML and supports the characters defined by Unicode, including characters from many languages, symbols, and emoji.

The declaration should be placed near the beginning of the document's head:

<head>
  <meta charset="utf-8">
  <title>My Webpage</title>
</head>

The HTML file itself must also be saved using UTF-8 encoding. Adding the charset declaration does not convert a file that was saved using a different encoding.

Character encoding is covered in greater detail in the Character Encoding (UTF-8) tutorial.

Viewport Settings

The viewport metadata helps control how a webpage is sized when displayed on different devices, particularly mobile devices.

A commonly used declaration is:

<meta name="viewport" content="width=device-width, initial-scale=1">

The width=device-width value tells the browser to use the device's viewport width as the layout viewport width, while initial-scale=1 establishes the initial zoom level.

This declaration is commonly included in responsive webpages so layouts designed for different screen sizes behave as expected.

The viewport declaration does not make a website responsive by itself. Responsive design also depends on the page's CSS, layout, images, and other design decisions.

Page Description

The description metadata provides a short description of the webpage's content.

<meta name="description" content="Learn HTML step by step with examples and hands-on practice.">

The description is not normally displayed as part of the webpage itself. Search engines may use it when creating the descriptive snippet shown beneath a page in search results.

A search engine is not required to display the supplied meta description and may generate a different snippet when other page content better matches a particular search.

A useful description should accurately summarize the individual page rather than repeat the same generic description across an entire website.

The name & content Attributes

Many types of metadata use the name attribute to identify the type of information and the content attribute to provide its value.

<meta name="description" content="Learn HTML step by step.">

In this example, name="description" identifies the metadata as a page description, while the content attribute contains the description itself.

The same basic pattern can be used for other named metadata:

<meta name="author" content="Jane Smith">

The meaning and permitted values of content depend on the metadata name being used.

Other Metadata

The meta element can provide other types of named metadata when a document or application requires them.

For example, an author can be identified with:

<meta name="author" content="Jane Smith">

You may also encounter metadata intended for browsers, search engines, social platforms, web applications, or other software.

Not every available metadata name belongs on every webpage. Add metadata when you understand its purpose and when it provides useful information for the document or the software that consumes it.

HTTP-Equivalent Metadata

The http-equiv attribute can be used with content for certain directives that act similarly to particular HTTP response information.

One commonly encountered example refreshes or redirects a page after a specified amount of time:

<meta http-equiv="refresh" content="5; url=/new-page.html">

This example instructs the browser to navigate to /new-page.html after five seconds.

Automatic refreshes and redirects should be used carefully because unexpected page changes can disrupt users and create accessibility or usability problems. Server-side HTTP redirects are generally preferable when permanently moving a webpage to another URL.

The http-equiv attribute has specific defined uses and should not be treated as a general replacement for configuring HTTP response headers on the web server.

Complete Metadata Example

A typical webpage may contain several meta elements, each providing a different type of information:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Learn HTML step by step.">
    <meta name="author" content="Jane Smith">
    <title>HTML Tutorial</title>
  </head>
  <body>
    <h1>HTML Tutorial</h1>
    <p>Learn how to create webpages using HTML.</p>
  </body>
</html>

The meta elements provide information about the document, while the title identifies it and the body contains its page content.

Common Metadata Mistakes

Metadata can be useful, but adding unnecessary, inaccurate, or incorrectly placed metadata can cause confusion or unintended behavior.

Placing meta elements in the document body instead of the head.
Forgetting the UTF-8 character encoding declaration.
Declaring UTF-8 while saving the actual HTML file using a different character encoding.
Assuming the viewport declaration alone makes a webpage responsive.
Using the same generic meta description on every page.
Assuming search engines must display the supplied meta description.
Adding large collections of metadata without knowing what each item does.

Metadata should have a clear purpose and accurately describe or configure the document in which it appears.

Metadata Best Practices

A good document head contains the metadata needed by the page without becoming cluttered with unnecessary declarations.

Use <meta charset="utf-8"> near the beginning of the document head.
Save the HTML document itself using UTF-8 encoding.
Include appropriate viewport metadata on responsive webpages.
Write an accurate page-specific meta description when one is useful.
Do not treat metadata as a substitute for useful page content.
Do not add metadata simply because another website uses it.
Review metadata when a page's purpose or content changes.

Keeping metadata purposeful and accurate makes the document head easier to maintain and provides better information to browsers, search engines, and other software.

Summary

The meta element provides metadata and instructions associated with an HTML document. It is a void element placed in the document's head, and its attributes determine the type of information being provided.

Common uses include declaring UTF-8 character encoding, configuring the viewport, describing the page, and providing other information about the document. Metadata should be accurate, purposeful, and used with an understanding of what browsers, search engines, or other software may do with it.