The Head Element

Explore the elements that live inside <head>: title, meta, link, script, and style.

Overview

The <head> element is an invisible but critical part of every HTML page. It contains metadata information about the document that the browser, search engines, and social platforms use, but that is never displayed directly to users. The most important head elements are: - <title>: the text shown in the browser tab and search results - <meta>: various metadata like charset, viewport settings, and descriptions - <link>: connects external resources, most commonly CSS stylesheets - <style>: embeds CSS directly in the page - <script>: links JavaScript files or embeds inline scripts A well-crafted <head> improves SEO, mobile display, performance, and accessibility.

Key Points

•<title> sets the text shown in the browser tab and in search engine results make it descriptive
•<meta charset="UTF-8"> should always be the first tag for correct character rendering
•<meta name="viewport" content="width=device-width, initial-scale=1.0"> makes pages mobile-responsive
•<link rel="stylesheet" href="..."> attaches an external CSS file
•<script src="..."> links JavaScript; placing it before </body> prevents blocking page render
•Nothing in <head> is visually rendered it is all metadata and resource links

Examples

A complete, well-formed <head> section

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="A beginner guide to HTML for web developers.">
  <title>HTML Guide Beginner</title>
  <link rel="stylesheet" href="styles.css">
  <link rel="icon" href="favicon.ico" type="image/x-icon">
</head>

The description meta tag is shown in Google search results under the page title.

Embedding CSS directly in <head> with <style>

<head>
  <meta charset="UTF-8">
  <title>Styled Page</title>
  <style>
    body { font-family: sans-serif; }
    h1   { color: navy; }
  </style>
</head>

For small single-page demos this is fine; for real projects use external stylesheets.

Linking and deferring a JavaScript file

<head>
  <meta charset="UTF-8">
  <title>JS Page</title>
  <!-- defer: script runs after HTML is parsed no render blocking -->
  <script src="app.js" defer></script>
</head>

Common Mistakes

Forgetting the viewport meta tag your page will look tiny and unscalable on mobile devices
Writing visible content (text, images) inside <head> browsers may ignore or misplace it
Using a vague <title> like "Home" or "Page 1" search engines and users rely on descriptive titles

Note

The description meta tag (max ~160 chars) is what Google shows under your page title in search results. Write it like a sales pitch for your content.

The Head Element

Overview

Key Points

Examples

Common Mistakes

Note

Exercises

Knowledge Check

Where does the text shown in a browser tab come from?