HTML Tutorial
HTML Headings
h1 through h6 are rank in the outline, not font size. One h1, then h2 sections — a lab report or a clinic page uses the same rule.
Six heading levels
HTML has six heading elements: h1 is the highest rank, h6 the lowest. Browsers show them at different sizes by default, but the real job is to name sections. A heading starts a new block in the document outline. This lab report only needs three ranks; h4–h6exist for deeper nests, not for “smaller looking text.”
Example
<h1>Free-fall write-up</h1>
<h2>Aim</h2>
<h3>Apparatus</h3>
<h2>Results</h2>
<h3>Ticker tape</h3>Click Try it in HTML under an example. That opens /html/try — a live page preview.
One h1 per page
Treat h1 as the title of this page’s main content. One h1 keeps the outline clear for people and for search engines. Subsections use h2, then h3 inside those, and so on.
Example
<h1>City library hours</h1>
<h2>Weekdays</h2>
<p>Open from nine to seven.</p>
<h2>Weekend</h2>
<p>Saturday morning only.</p>HTML5 allows more than one h1 in some outline theories. In practice, one visibleh1 that matches the topic of the page is the pattern this course uses.
Do not skip levels for looks
Jumping from h1 to h4 because h4 looks nicer on screen breaks the outline. Screen reader users often jump by heading. A missing h2 and h3makes the page feel like a hole in the map.
If a heading looks too large, change the CSS, not the tag. Rank is meaning. Size is appearance.
Search engines and the outline
Crawlers use headings to guess what the page is about. A clear h1 and honesth2 section titles help more than stuffing keywords into every heading. People scanning the page use the same outline.
Write headings as titles, not as sentences that trail off. “Opening hours” is better than “Here you can find information about when we are open.”
Headings are not font-size
You can make a paragraph look large with CSS font-size. That does not make it a heading. Assistive technology will not list it in the heading roster. Search engines will not treat it as a section title.
Example
<!-- Meaning: a real heading -->
<h2>Ingredients</h2>
<!-- Appearance only: still a paragraph -->
<p style="font-size: 1.5rem;">Ingredients</p>Use a heading when the text names a section. Use CSS when you only want a visual size. You will cover the style attribute in the styles chapter; the rule stays the same when you move to a stylesheet.
A small page outline
This sketch is a typical article: one h1, h2 for sections, h3 only when a section has named parts.
Example
<h1>Baking soda bread</h1>
<h2>Ingredients</h2>
<p>Flour, soda, salt, buttermilk.</p>
<h2>Method</h2>
<h3>Mix</h3>
<p>Combine the dry parts first.</p>
<h3>Bake</h3>
<p>Forty minutes at 200 °C.</p>Heading ranks
| Tag | Role | Typical use |
|---|---|---|
| h1 | Page title | One per page |
| h2 | Main section | Chapters of the page |
| h3 | Subsection | Inside an h2 |
| h4–h6 | Deeper outline | Rare on short pages |
Do not use headings only to make text bold. strong and CSS handle emphasis and weight. Headings are for structure.
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.
Physics
A lab report outline
Headings are rank, not font size. h1 is the document title. h2 starts a section. h3 nests inside that section. Skipping to h4 because it looks smaller breaks the outline.
Screen reader users jump by heading. A missing h2 is a hole in the map. If the type looks too big, change CSS, not the tag.
Example
<h1>Free-fall write-up</h1>
<h2>Aim</h2>
<p>Measure s after 1 s, 2 s, and 3 s from rest.</p>
<h2>Results</h2>
<h3>Ticker tape</h3>
<p>Gaps grow because speed increases.</p>Astronomy
A planet fact sheet
One h1 per page is the pattern this course uses. Subtopics are h2. “Mars” as h1 and “Year” as h2 is a fact sheet. Two h1s fight for the tab in the outline.
Example
<h1>Mars</h1>
<h2>Year</h2>
<p>About 687 Earth days.</p>
<h2>Moons</h2>
<p>Phobos and Deimos.</p>