Platform under construction

HTML Layout

Intermediate

HTML Head

Learn HTML Head with practical examples for structure, layout semantics, metadata, embedded content, scripts, accessibility, SEO and live practice.

<head>
  <title>Page title</title>
  <meta name="viewport">
</head>

HTML structure and layout

The head element contains page information the browser needs before showing content.

The head element is not visible page content. It contains metadata: title, character encoding, viewport settings, stylesheets, icons, preload hints and sharing information.

A strong head makes the page load correctly, scale on mobile, appear clearly in tabs and search results, and connect to CSS and scripts predictably.

Beginners often ignore head because it is invisible. Professionals treat it as production infrastructure.

title

The browser tab title and common search result title.

meta charset

Character encoding for text rendering.

meta viewport

Required for responsive mobile layout.

link

Connects CSS, icons and resource hints.

Syntax and structure

Put metadata in head and visible content in body.

Head is for information about the document. Body is for the document content people see.

Useful document head

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>HTML Head | Full Stack Masterclass</title>
  <meta name="description" content="Learn how the HTML head works.">
  <link rel="stylesheet" href="/assets/css/styles.css">
</head>

Visible content inside head

<head>
  <h1>Welcome to my site</h1>
  <p>This text belongs in body.</p>
</head>

Rules that matter

Structure should stay readable before the design layer is applied.

Layout-focused HTML is strongest when meaning, grouping, metadata and behavior hooks all have a clear reason to exist.

Set charset early

UTF-8 prevents many character rendering problems.

Use viewport metadata

Without it, mobile rendering often feels broken.

Write a real title

Every page needs a clear, specific title.

Add a useful description

Description metadata helps search result clarity.

Load CSS intentionally

Stylesheet links belong in head in most normal pages.

Keep body content out

Head content should not contain visible page sections.

Production thinking

HTML structure affects design, accessibility, SEO and long-term maintenance.

Why does this matter?

This matters because invisible HTML can still decide how professional a page feels in browsers, search results and shared links.

Accessibility

The title helps users identify tabs and windows. A missing or vague title is a real usability problem.

Production note

Head quality affects SEO, sharing, icons, loading strategy, mobile behavior and brand polish.

SEO note

Title and description metadata are among the most visible SEO-facing parts of a page.

Live code lab

Change the code and run the example.

Edit the HTML or CSS, then use Run to refresh the preview. The preview is isolated, so links and forms stay inside this practice area.

Mini assignment

Try this now.

Write a title for this lesson page.
Write a 150-character meta description.
Explain why the visible checklist belongs in body, not head.

Practice assignment

Do this before moving to the next lesson.

Create a complete head for a new HTML file.
Include charset, viewport, title, description and stylesheet link.
Explain what each line does.

HTML CSS

Live preview

Self-check

Before you continue, prove that you own this lesson.