HTML Tutorial
HTML Basic
A page needs a doctype, html, head, and body. This chapter is your first complete document.
The four parts of a document
Every HTML page you write should include four pieces: a doctype, an html root, ahead, and a body. The doctype tells the browser which HTML flavor to use. The root wraps everything. The head holds metadata. The body holds what the visitor sees.
Browsers will try to display a file that is missing pieces. That does not make the file correct. Start from a complete document every time, then fill in the content.
The doctype
Put <!DOCTYPE html> on the first line. It is not an HTML element. It is a declaration that this file is HTML5. Without it, some browsers switch to quirks mode and layout can look older than you expect.
Example
<!DOCTYPE html>Older doctypes listed a long DTD URL. You do not need those. <!DOCTYPE html> is the current, complete form.
html and lang
The html element is the root. Everything else sits inside it. Add lang so browsers, screen readers, and translation tools know the language of the page.
Example
<html lang="en">
<!-- head and body go here -->
</html>Use en for English, de for German, es for Spanish, and so on. A more specific code such as en-US is fine when you care about a dialect.
Head versus body
The head is for the document, not the visitor’s view of the page. Put the character set, the title, CSS links, and icons there. The body is the visible document: headings, paragraphs, images, and links.
| Region | Typical contents | Shown on the page? |
|---|---|---|
| head | charset, title, meta, CSS, favicon | Usually no, except the tab title |
| body | headings, text, lists, images, forms | Yes |
The title
<title> lives in the head. It names the browser tab, the bookmark, and often the search result. It is not the same as <h1>, which is the visible heading on the page.
Example
<head>
<meta charset="UTF-8">
<title>Garden notes</title>
</head>
<body>
<h1>What I planted in May</h1>
</body>Click Try it in HTML under an example. That opens /html/try — a live page preview.
A complete mini page
This document has a doctype, language, charset, title, one heading, and two paragraphs. Copy it into an editor or the live preview and change the words.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Saturday market</title>
</head>
<body>
<h1>Saturday market</h1>
<p>The stall opens at eight.</p>
<p>Bring a bag for fruit.</p>
</body>
</html>Order to remember
- Doctype on line one.
htmlwithlang.headwith charset and title.bodywith the visible content.
Later chapters add CSS, images, and forms. The skeleton stays the same. Next you will look at elements: start tags, end tags, and how they nest.
Put visible text in the body, not in the head. A heading or paragraph in the head will not show as page content in a normal document.
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.
Biology
Clinic hours as a complete document
A real page has a doctype, html, head, and body. The doctype puts the browser in standards mode. lang="en" tells screen readers which language to expect.
title is the tab name. h1 is the title on the page. They can match, but they are not the same tag. Bookmarks and search results use the tab title.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Riverside clinic hours</title>
</head>
<body>
<h1>Riverside clinic</h1>
<p>Walk-in 08:00–16:00. Closed Sunday.</p>
</body>
</html>Physics
A drop-test log with a proper head
charset in the head must come early so the rest of the file is decoded as UTF-8. Body holds what the visitor sees: the heading and the first reading.
This is the smallest complete document that still looks like a lab sheet, not a floating paragraph.
s = ½ g t²
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Drop test · t = 2 s</title>
</head>
<body>
<h1>Drop test</h1>
<p>After 2 s from rest, s ≈ 19.6 m (g = 9.81 m/s², no air).</p>
</body>
</html>