Loading...

HTML Head

The previous session focused on one child of the document head: title. Now zoom out to the head element itself — the box that holds metadata about the page for browsers, search tools, and linked resources. Visitors do not read head the way they read a story in the main view. They feel its effects through the tab label, correct characters, mobile scaling, and stylesheets that load before the body content paints.

What head is for

<head>...</head> sits inside <html>, usually right after the opening html tag and before <body>. It is the document’s control room for metadata and resource links. It is not a visible banner. The visible page banner you may build later with a <header> element is a different tag with a different job.

Direct answer

Put metadata in <head>...</head>: a title, usually <meta charset="UTF-8">, often a viewport meta for mobile layout, and <link rel="stylesheet" href="..."> when you use external CSS. Put visible headings, paragraphs, images, and interactive UI in <body>. title is one important child of head — it does not replace head.

Common children at a glance

📊 Common head children

Element Role
title Tab / document label
meta charset Character encoding (UTF-8)
meta viewport Mobile width and scaling hint
link stylesheet External CSS file
style Optional internal CSS
script Optional scripts (placement habits vary; many beginners load at end of body)

A practical starter head

You do not need every possible meta tag on day one. A reliable beginner head covers encoding, mobile viewport, document title, and a stylesheet link when CSS lives in a separate file.

A practical starter head

html
HTML Code 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Practice Page</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Hello</h1>
<p>Visible content lives in the body.</p>
</body>
</html>

Reading the sample

  • meta charset="UTF-8" tells the browser how to decode characters — including emoji and non-Latin text from earlier sessions
  • viewport helps mobile browsers use the device width instead of a tiny zoomed-out desktop layout
  • title labels the tab, as you practiced in the page-title session
  • link rel="stylesheet" attaches styles.css without putting CSS rules inside every HTML file
  • Everything the visitor reads on the page sits under body

Charset first, early in head

Place the charset meta near the top of head so the browser knows the encoding before it interprets the rest of the document text. UTF-8 is the modern default you should use unless a rare legacy constraint says otherwise. Missing or late charset is a classic cause of broken characters that look like “random” corruption.

Viewport and mobile browsers

Without a viewport meta, many phones assume a wide desktop canvas and shrink the page. The common starter width=device-width, initial-scale=1.0 tells the browser to match the device width and start at a normal zoom. You will refine responsive design with CSS later; viewport is the HTML-side handshake that makes those layouts usable on phones.

Linking CSS from head

External stylesheets keep presentation separate from structure. The link element in head with rel="stylesheet" and an href path is the beginner-friendly way to attach CSS. Paths follow the same file-path ideas you learned earlier. If the CSS file is missing, the HTML still works — it just looks unstyled.

head vs body vs header

  • head — metadata and resource links; not the main readable article
  • body — visible content visitors read and interact with
  • header — a visible sectioning element for banners or introductory blocks inside body (you will use it in later layout sessions)
    Do not rename head to header hoping they are aliases. They are different elements. Confusing them leads to invalid or ineffective markup.

Scripts and head (beginner note)

Scripts can appear in head or body. Many teaching pages load simple scripts at the end of body so the HTML structure exists first. Advanced loading strategies come later. For this session, know that script is allowed as a head child, but visible content still does not belong in head.

Practice in your editor

  1. Start from a basic HTML skeleton with html, head, and body.
  2. Inside head, add charset UTF-8, a viewport meta, and a clear title.
  3. Add a link to a simple styles.css if you have one (or create an empty file so the path is real).
  4. Keep all visible text and headings in body only.
  5. Use View Source or DevTools Elements to confirm the head section matches your intent.
  6. Temporarily remove viewport, reload on a narrow window or phone emulator if you can, and notice how scaling can feel different — then restore it.

Easy mistakes

  • Putting paragraphs, images, or main headings only inside head as if it were the page canvas
  • Forgetting charset so special characters and emoji break
  • Skipping viewport and wondering why mobile layout looks oddly zoomed
  • Confusing head (metadata) with header (visible section later in the course)
  • Assuming title alone is enough and leaving out charset on multilingual pages
  • Linking a stylesheet with the wrong path and blaming HTML when CSS never loads

Summary

  • head holds metadata and resource links; body holds visible content
  • Starter pieces: charset, viewport, title, and often a CSS link
  • title is one child of head, not a replacement for head
  • head is not the same element as the visible header
  • Put charset early so the browser decodes the document correctly

🧠 Test Your Knowledge

Ready to Start

Test Your Knowledge

Challenge yourself with this interactive quiz and see how well you understand the topic

❓
6
Questions
🎯
70%
To Pass
♾️
∞
Time
🔄
∞
Attempts

📝 Instructions

  • Read each question carefully
  • Select the best answer for each question
  • You can retake the quiz as many times as you want
  • Your progress will be shown at the top
Topic 1 of 1
Html Tutorial