HTML Document Metadata

Basic

The <head> element contains metadata about the document: information that helps browsers, search engines, assistive technologies, and other software understand or process the page. It is different from <header>, which is visible page content that introduces a section.

1. Build a useful document head

A normal HTML document has one <head> inside <html>. In most ordinary documents, the head contains one <title> plus other metadata elements such as <meta>, <link>, and sometimes <style> or <script>.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>HTML Document Metadata | Foxipa</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <h1>HTML Document Metadata</h1>
  </body>
</html>

?

<head>
  <?>HTML Forms</title>
</head>

The specification, translated

The HTML Standard treats the <head> as a collection of metadata for the Document. Think of it as information the browser and other software need about the document, rather than the page content the reader consumes. The important distinction is that <head> is the container; <title>, <meta>, <link>, <base>, and <style> give that metadata different meanings.

The rules are more specific than 'put useful stuff in the head'. In an ordinary HTML document, the head has a title, and there can be no more than one <title> and no more than one <base>. A title is the document's name, not a duplicate of the visible <h1>: the title should still make sense when seen by itself in history, bookmarks, or search results.

<meta> is a family of metadata mechanisms, not a free-form command element. Its name, http-equiv, charset, or itemprop attribute determines what kind of metadata it represents. For a character-encoding declaration, the HTML rule is especially strict: use charset="utf-8", and put the declaration early enough that it is entirely within the first 1024 bytes.

<link> expresses a relationship between the document and another resource. The rel value is the important part: stylesheet means a CSS resource, icon identifies an icon resource, and other relationship keywords have their own rules. Some metadata conventions used by search engines, social platforms, or site tooling are ecosystem conventions rather than definitions in the HTML Standard, so check the specification or provider documentation for the particular keyword instead of treating every meta or rel name as built-in HTML behavior.

<base> is a particularly powerful piece of metadata because it changes how relative URLs resolve throughout the document. The HTML Standard permits at most one base element, and its URL can affect links, images, scripts, stylesheets, and other relative URLs. That is why it deserves deliberate use rather than being treated as harmless boilerplate.

Finally, separate HTML rules from widely used web conventions. The familiar viewport meta declaration is important for responsive pages, but its purpose should not be confused with CSS responsive layout. Likewise, a canonical link or social-sharing metadata may be valuable, but those conventions should be taught with their current provider or ecosystem rules, not presented as if every detail came from the core HTML syntax.

In ordinary documents, the <head> must contain a <title>. There are special situations such as iframe srcdoc documents or documents whose title comes from a higher-level protocol, but those are not the normal beginner case.

2. Give the document a title

<title> gives the HTML document its title. Browsers commonly expose it in the tab or window title, and other software can use it when identifying the document. It is metadata, not the visible top-level heading in the body.

<head>
  <title>HTML Forms | Foxipa</title>
</head>
<body>
  <h1>HTML Forms</h1>
</body>

The <title> and <h1> often describe the same subject, but they serve different roles. Keep both useful: the document title identifies the document, while the heading introduces the visible content.

3. Declare the character encoding early

Use <meta charset="utf-8"> to declare the document encoding. UTF-8 is the valid encoding for modern HTML documents, and a character-encoding declaration must occur entirely within the first 1024 bytes of the document. Keeping it near the beginning of the head is therefore a good authoring practice.

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

This declaration helps the browser decode the bytes of the document into the intended characters. It is not a replacement for actually saving the document in UTF-8.

4. Describe the document with meta name-value pairs

A <meta> element can provide document-level metadata through a <meta name="..." content="..."> pair. The exact meaning comes from the metadata name; <meta> is not a generic place to invent arbitrary browser behavior.

<meta name="description" content="Learn how HTML document metadata works.">
<meta name="author" content="Foxipa">

Some metadata names are defined by HTML, while others are established by web-platform or ecosystem conventions. Treat the name as a contract: check the current documentation for the name you plan to use rather than assuming every search-engine or social-media name is part of HTML itself.

5. Understand the viewport declaration

The commonly used <meta name="viewport"> declaration gives browsers guidance about the viewport used for responsive pages. A common baseline is <meta name="viewport" content="width=device-width, initial-scale=1">.

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

This is a widely used web-platform convention rather than a replacement for responsive CSS. The HTML metadata declares the viewport behavior; CSS media queries, flexible layouts, and responsive components still do the actual layout work.

6. Link the document to external resources

<link> expresses a relationship between the current document and an external resource. Its meaning comes primarily from the <link> relationship named by rel and the resource location supplied by href.

<link rel="stylesheet" href="styles.css">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">

Common relationships include stylesheet for CSS and icon for site icons. Other relationships exist for different resource and document relationships. Do not assume that every rel keyword has the same loading or rendering behavior.

The type attribute can describe the linked resource type when relevant, but for modern CSS stylesheets rel="stylesheet" is sufficient; specifying type="text/css" is unnecessary.

7. Connect pages to search and sharing systems carefully

Some metadata used by the wider web ecosystem is expressed through <link> and <meta>. For example, a site may use <link rel="canonical"> to declare a preferred URL for a page, while social platforms may consume metadata conventions of their own.

<link rel="canonical" href="https://example.com/html/forms/">

8. Be deliberate with <base>

<base> sets a base URL for relative URLs in the document. There can be only one <base> element. It can also establish a default browsing target.

<head>
  <base href="https://example.com/docs/">
  <title>Base URL example</title>
</head>
<body>
  <a href="guide.html">Guide</a>
</body>

With this base URL, guide.html resolves relative to https://example.com/docs/ rather than relative to the document URL. Because this changes how many relative URLs resolve, adding <base> can have site-wide consequences for links, images, scripts, stylesheets, and other URL-bearing content.

9. Inline styles belong to <style>

<style> contains CSS associated with the document. It is metadata when placed in the head and can be useful for small document-specific rules, although a reusable site stylesheet is usually better maintained as an external resource.

<head>
  <title>Example</title>
  <style>
    .notice { font-weight: 700; }
  </style>
</head>

The <style> element is different from the global style attribute, which places CSS declarations directly on an individual element. Keep that distinction clear: document-level CSS belongs to <style> or an external stylesheet linked with <link>.

10. Loading scripts from the head

<script> can appear in the head and can participate in document setup, but JavaScript execution and loading have rules of their own. For an external classic script that should not block HTML parsing, defer is a common option; module scripts are deferred by default under their module loading model.

<head>
  <title>Interactive page</title>
  <script src="app.js" defer></script>
</head>

This lesson only establishes the metadata boundary. JavaScript execution, modules, loading order, and security belong to the JavaScript and scripting curriculum rather than turning Document Metadata into a JavaScript lesson.

11. What belongs in the head—and what does not

• Put document metadata in <head>: title, character encoding, resource links, metadata declarations, and other metadata appropriate to the document.

• Put human-readable page content in <body>: headings, paragraphs, navigation, forms, images, tables, articles, and other content.

• Do not use <head> as a hidden storage area for visible content. Metadata should describe or configure the document rather than replace its body content.

• Do not confuse <head> with <header>. The first is document metadata; the second is a visible content-sectioning element.

12. A practical metadata checklist

• Use a meaningful <title> for the document.

• Declare UTF-8 with an early <meta charset="utf-8"> declaration.

• Use <meta name="viewport"> when building a responsive page for the normal web viewport model.

• Use <link> for explicit relationships to external resources such as stylesheets and icons.

• Use <meta name="..." content="..."> only when the metadata name has a defined meaning you actually need.

• Treat <base> as a powerful URL-resolution feature, not a harmless convenience.

• Keep visible content in <body> and document metadata in <head>.

• Keep SEO and social metadata accurate and follow the current documentation of the systems that consume it.

A well-formed head is small but important. It gives the browser and other software the information they need before the page content is interpreted, while leaving the body responsible for the content people actually read and use.