HTML · Chapter 27 of 45

HTML Head Element

The <head> element contains metadata about the document that isn't displayed directly on the page, such as the title, character encoding, linked stylesheets, and scripts.

Common elements found in <head> include <title>, <meta>, <link>, and <style>. Search engines and browsers rely heavily on head metadata to understand and render the page correctly.

Syntax

<head><meta charset="UTF-8"><title>...</title></head>

Common head elements

Order and best practices

Charset should be declared first, followed by viewport, title, and then stylesheets/scripts, for optimal loading and rendering.

Example 1 (html)

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Site</title>
</head>

Output

(sets encoding, mobile scaling, and tab title)

A typical, well-formed head section for a modern responsive page.

Example 2 (html)

<meta name="description" content="A blog about web development tips.">

Output

(used as the snippet in search results)

The description meta tag often appears as the summary text in search engine results.

Key points

<head> holds metadata, not visible content.
<meta charset="UTF-8"> should be declared first.
The viewport meta tag is essential for responsive design.
Meta description tags influence search engine snippets.

💡 Note: Missing a viewport meta tag is a common cause of poor mobile rendering.

HTML Head Element

Common head elements

Order and best practices

Key points

📝 Quick Quiz