HTML Tutorial
HTML Semantics
Semantic tags name meaning: article, section, time, address. Screen readers and search engines use them.
Meaning, not just boxes
A <div> is a generic box. The browser, a screen reader, and a search engine all see “a box.” Semantic tags keep the same visual freedom — you still style them with CSS — but they name therole of the content: this is an article, this is navigation, this is a publication time, this is a contact address.
Semantics is how HTML carries meaning when the CSS is gone. That happens more often than it sounds: a screen reader, a search crawler, Reader Mode, and a text-only browser all ignore your colors.
article and section
<article> is a complete piece that could stand alone: a blog post, a news story, a comment, a product card. <section> is a themed chunk of a page, usually with its own heading. Sections live inside a page. Articles are the things you might syndicate or share by themselves.
Example
<article>
<h2>Sourdough on Tuesday</h2>
<p>We bake one rye loaf before noon. Pre-order by Monday evening.</p>
<section>
<h3>Ingredients</h3>
<p>Rye flour, water, salt, starter.</p>
</section>
<section>
<h3>Pickup</h3>
<p>Counter only. No delivery on bake days.</p>
</section>
</article>Do not wrap every heading in a section “because it looks tidy.” Add a section when the content is a distinct topic. Add an article when the block is a self-contained story or item.
nav and aside
<nav> marks a block of links that help people move around the site or the page — main menus, table-of-contents lists, breadcrumb trails. Not every list of links is navigation. A list of related articles in a sidebar is often better as <aside>.
<aside> is related extra: a pull quote, a glossary, ads, “on this page.” It is not the main story. Screen readers can skip it. Search engines can weigh it as supporting material.
Example
<header>
<p>Eastside Bakery</p>
<nav aria-label="Primary">
<a href="/">Home</a>
<a href="/menu">Menu</a>
<a href="/hours">Hours</a>
</nav>
</header>
<main>
<article>
<h1>Tuesday rye</h1>
<p>One loaf. Pre-order by Monday.</p>
</article>
<aside>
<h2>Hours</h2>
<p>Tue–Sat, 8 to 14</p>
</aside>
</main>time with datetime
<time> marks a date or a duration. Humans read the inner text in any format you like. Machines read the datetime attribute in a standard form so sorting, calendars, and search results do not depend on “19 Aug 2026” versus “August 19, 2026.”
Example
<article>
<h1>Oven notes</h1>
<p>
Published
<time datetime="2026-08-19">19 August 2026</time>
at
<time datetime="2026-08-19T07:30">07:30</time>.
</p>
<p>The rye proofed for <time datetime="PT12H">12 hours</time>.</p>
</article>Use YYYY-MM-DD for dates. Add T and a 24-hour time when the clock matters. Durations use the PT prefix: PT12H is twelve hours.
address
<address> is contact information for the nearest <article> or for the whole document — typically an author, a company, or a venue. It is not a generic way to italicize a street. A postal block that is not contact info should stay a paragraph.
Example
<article>
<h1>Eastside Bakery</h1>
<p>Walk-up counter. No table service.</p>
<address>
Eastside Bakery<br>
14 Harbor Lane<br>
<a href="mailto:hello@eastside.example">hello@eastside.example</a>
</address>
</article>Browsers often italicize <address> by default. That is a hint, not the reason to use the tag. Use it because the content is how to reach the author or the organization.
Why div soup is worse
“Div soup” is a page built from nested <div> and <span> tags with class names pretending to be structure: div class="nav", div class="article",div class="footer". CSS can still make it look finished. Assistive technology cannot guess the class names. Search engines get a weaker outline. Jump links and landmarks disappear.
| Div soup | Semantic HTML |
|---|---|
<div class="article"> | <article> |
<div class="section"> | <section> |
<div class="nav"> | <nav> |
<div class="aside"> | <aside> |
<span class="date"> | <time datetime="..."> |
<div class="contact"> | <address> |
Divs are not banned. Use them when no semantic tag fits — a decorative wrapper, a CSS grid cell with no meaning of its own. Reach for a named tag first. The generic box is the fallback, not the default.
What to remember
<article>is a standalone piece.<section>is a headed topic inside a page.<nav>is site or page movement.<aside>is related extra.<time datetime="...">keeps a machine-readable date next to human text.<address>is contact for the article or the document, not every street name.- Class names do not replace tags. Screen readers and search engines read the tag names.
Next: HTML entities, so a less-than sign in your text does not look like the start of a tag.
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
An article with a time stamp
article is a self-contained piece. time with datetime is a machine-readable date; the text inside is for people. address is contact info, not a postal style trick.
section groups a themed block with a heading. nav is for links. Using the right tag is theory you can hear in a screen reader’s rotor.
Example
<article>
<h2>Discharge note</h2>
<p>Recorded
<time datetime="2026-08-19T08:00">19 Aug, 08:00</time>
</p>
<p>Resting pulse 72 bpm.</p>
</article>Astronomy
A details fold for extra moons
details/summary is a disclosure widget in HTML, no JavaScript required. Hide extra facts, not the only heading on the page.
Example
<details>
<summary>Mars moons</summary>
<p>Phobos and Deimos. Irregular, not round like Luna.</p>
</details>