Metadata is data that describes other data. In HTML, metadata is information about the HTML document, such as character set, author, viewport settings, and links to external resources (like CSS). All metadata belongs inside the <head> container.
1. The Essential Head Elements
These three elements are mandatory for modern, well-structured web pages:
A. The Page Title (<title>)
The <title> tag defines the title that appears in the browser tab, in search engine results (SERPs), and in bookmarks.
- Rule: The content of the
<title>tag is not displayed on the page itself. - SEO Importance: This is one of the most critical elements for Search Engine Optimization (SEO), as it tells users and search engines what the page is primarily about.
<title>HTML5 Course: Structuring Metadata</title>
B. Character Encoding (<meta charset>)
This is crucial for ensuring the browser displays all characters correctly.
- Value: The value
UTF-8is the universal standard, supporting almost all characters from all languages. - Placement: It should be one of the first elements in the
<head>.
<meta charset="UTF-8">
C. Viewport Settings (<meta name="viewport">)
This is essential for responsive web design (RWD), ensuring your page scales correctly on different devices (phones, tablets, desktops).
width=device-width: Sets the page width to the width of the device screen (instead of a fixed desktop size).initial-scale=1.0: Sets the initial zoom level when the page is first loaded by the browser.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
2. Linking External Resources (<link>)
The <link> tag is a void element (self-closing) used to define relationships between the current document and external files. Its primary use is linking to external CSS files.
| Attribute | Purpose |
rel | Defines the relationship between the document and the linked file (e.g., stylesheet for CSS, icon for favicons). |
href | Specifies the URL or path to the external file. |
type | Defines the MIME type of the linked resource (e.g., text/css). |
Example: Linking CSS
<link rel="stylesheet" href="styles.css" type="text/css">
Example: Linking a Favicon
<link rel="icon" href="favicon.ico" type="image/x-icon">
3. General Metadata (<meta name="...">)
The generic <meta> tag is used with the name and content attributes to provide general metadata, primarily consumed by search engines and social media platforms.
| name Value | Purpose |
description | A short, accurate summary of the page content (often shown under the title in search results). |
keywords | A list of keywords related to the page content (less relevant for SEO today). |
author | The name of the author of the document. |
Example: Description and Author
<meta name="description" content="A comprehensive tutorial on HTML metadata and the head element.">
<meta name="author" content="Your Name">
4. Injecting JavaScript (<script>)
While JavaScript should usually be placed just before the closing </body> tag for performance reasons, you can link it or include it in the <head> section as well.
<script src="app.js"></script>
<script>
// JavaScript code goes here
</script>
