HTML Tutorial
HTML Head
The head holds metadata: charset, viewport, title, CSS, and icons. Visitors rarely see it.
Metadata, not the page body
Every document has a <head> and a <body>. The body is what people read: headings, pictures, forms. The head talks to the browser and to search engines: encoding, tab title, CSS, description, icons. Visitors almost never see those tags drawn as content.
Put the head first, immediately inside <html>. Keep it complete even on a tiny page. Missing charset or viewport is how you get mojibake and a layout that looks like a desktop site on a phone.
Character set
<meta charset="UTF-8"> should be one of the first tags in the head. UTF-8 covers English, accents, names, and symbols. Set it early so the browser does not guess wrong before it finishes reading the file.
Example
<head>
<meta charset="UTF-8">
<title>Harbor Cafe</title>
</head>A later chapter is only about charset. For every page you write now, include this line. Do not rely on the server to “probably” send UTF-8.
Viewport for phones
Phones pretend to be a wide desktop unless you tell them the layout width. The viewport meta tag says: use the device width, and start at zoom 1.
Example
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Harbor Cafe</title>
</head>Without it, a 320-pixel screen may shrink a 980-pixel page until text is unreadably small. The responsive chapter builds on this line. Include it from the first complete document.
The document title
<title> is the name of the tab, the bookmark, and often the search-result headline. It is not the same as <h1>. The h1 is on the page. The title is in the chrome around the page.
- Keep it short and specific:
Lunch menu - Harbor Cafe. - Put the unique part first so tabs stay distinguishable.
- One title element per page.
The page-title chapter goes deeper. In the head, remember: no title, and the tab shows the filename or a generic “Untitled”.
Stylesheet and description
Link CSS with <link rel="stylesheet" href="...">. Put the path in href using the rules from the file-paths chapter. A meta name="description" is a short summary for search results and social previews. It does not appear in the body.
Example
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lunch menu - Harbor Cafe</title>
<meta name="description" content="Soup, sourdough, and espresso near the harbor. Open 8–16.">
<link rel="stylesheet" href="css/site.css">
</head>You can still use a <style> block in the head for tiny demos. A linked file is the usual choice once more than one page shares the same look.
A complete head
Here is a full document with a practical head: charset, viewport, title, description, stylesheet, and a favicon link. The body can stay short. The head is already doing its job.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Harbor Cafe</title>
<meta name="description" content="A small cafe by the water. Lunch 8–16, Tuesday to Sunday.">
<link rel="stylesheet" href="css/site.css">
<link rel="icon" href="favicon.ico" type="image/x-icon">
</head>
<body>
<h1>Harbor Cafe</h1>
<p>Open today from 8 to 16.</p>
</body>
</html>Paste this into /html/try. The preview will not load css/site.css from your disk, but you will see the structure. On a real project those paths resolve with the file-path rules you just learned.
What else often lives here
| Tag | Job |
|---|---|
meta charset | How bytes become characters |
meta viewport | How the page scales on a phone |
title | Tab, bookmark, search headline |
meta description | Short summary for previews |
link stylesheet | External CSS |
link icon | Favicon in the tab |
style | CSS written in the document |
script | Only if it must run before the body (rare for beginners) |
Keep visible content in the body. If you put a heading in the head, it will not show as page text. The next chapter uses body landmarks — header, nav, main, footer — to describe the regions people actually see.
Worked examples
The short listings above show the tag in isolation. These pages use the same markup on documents you would actually publish: a lab report, a clinic form, a timetable, a weather card.
HTML does not calculate. It names the pieces so a browser, a screen reader, and a search engine can tell a heading from a paragraph. The numbers below are classroom values — the same Ohm, pH, and pulse figures as the C track — now sitting in real page structure.
Preview them in the HTML editor at /html/try. Change a heading or a number and watch the page, not a print log.
Engineering
The metadata a phone needs
head is not empty space. charset, viewport, title, and CSS links belong here. Visitors rarely see it. Browsers and crawlers always do.
viewport width=device-width stops a phone from pretending it is 980 px wide. Without it, “responsive” CSS never really starts.
Example
<p>A real head includes charset, viewport, and title. This preview already wrapped a fragment; on a full page you write those tags yourself.</p>
<p>Clinic pages that skip viewport look like a shrink-ray on a phone.</p>Astronomy
Title in the head, heading in the body
You cannot see title in the page body. That is correct. The tab and the h1 are two different surfaces.
Example
<h1>Mars fact sheet</h1>
<p>Put “Mars fact sheet · Observatory” in <code><title></code>, not only in this h1.</p>