Last 30 Days
No notifications
HTML (HyperText Markup Language) defines the structure and meaning of web content. Modern HTML5 introduces semantic elements that describe their purpose, making pages accessible and SEO-friendly.
| Semantic | Non-Semantic | Purpose |
| | Page/section header |
| | Navigation links |
| | Primary content |
| | Self-contained content |
| | Thematic grouping |
| | Tangentially related |
| | Page/section footer |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My Page</title>
</head>
<body>
<header>…</header>
<main>…</main>
<footer>…</footer>
</body>
</html>Forms use , , , , and . Always pair inputs with for accessibility.
Use Imagine you're writing a letter. Before worrying about the colour of the paper or the font, you decide: this is the *greeting*, this is the *body*, this is the *signature*. HTML does the same thing for a web page — it labels every chunk of content so the browser, search engines, and assistive tech all know what each piece *means*. If you remember nothing else, remember this: HTML is about meaning, CSS is about looks, JavaScript is about behaviour. A tag is a label wrapped in angle brackets. Most tags come in pairs — an *opening* tag and a *closing* tag — with the content in between. Every HTML file has the same bones: Tags can carry attributes that customise them: Attributes always live in the opening tag, written as In the early days everyone wrote Why bother? Search engines rank semantic pages better, screen readers can offer "jump to main content", and your future self can read the markup at a glance. Forms collect data. The basic shape is: Always pair every Built into HTML5:
1. Skipping the When the browser parses your HTML it builds two trees: the visual DOM *and* the accessibility tree. Screen readers walk the second tree. Semantic tags create meaningful "landmarks" in that tree automatically: If you write ARIA (Accessible Rich Internet Applications) adds extra hints for screen readers: HTML5 categorises every element into one of seven *content models*: flow, phrasing, embedded, interactive, heading, sectioning, and metadata. The model decides what can legally nest inside what. Common rule violations to watch for:
Every Search engines understand extra hints embedded in your HTML: Or the more popular JSON-LD form inside 1. Build a personal "About Me" page using only semantic tags — no ,
, , , , and . Add for context. Never use tables for layout.Accessibility Checklist
alt text on every tabindex On this page
What Is HTML, Really?
Your Very First Tag
<p>Hello, world!</p>
A handful of tags don't have content (they're called *void* elements): opens a paragraph.Hello, world! is the content. closes it., , , . They're self-closing.The Skeleton Every Page Needs
<!DOCTYPE html>
<html lang="en">
<head>
<!-- info ABOUT the page -->
<meta charset="UTF-8" />
<title>My Page</title>
</head>
<body>
<!-- what the user actually SEES -->
<h1>Welcome</h1>
</body>
</html> tells the browser "use modern HTML5 rules". is metadata: title, character set, links to CSS, etc. Nothing here is visible on the page. is everything the user sees.Headings, Paragraphs, Lists — the Bread and Butter
Attributes — Extra Info on a Tag
<a href="https://google.com" target="_blank">Open Google</a>
<img src="/cat.jpg" alt="A sleeping cat" width="300" />name="value".Semantic Tags — Telling the Browser What Things Mean
Use this Instead of Forms — Letting Users Talk Back
<form action="/submit" method="POST">
<label for="email">Email</label>
<input id="email" type="email" name="email" required />
<button type="submit">Sign up</button>
</form> with a . The for attribute on the label must match the id on the input — that single line makes screen readers and click-to-focus work for free.Free Validation You Get Without JavaScript
The browser shows the error message; you don't write a single line of JavaScript for the basics.required — the field can't be emptytype="email" / type="url" — must look like a real email/URLminlength, maxlength, pattern — length and regex rulesmin, max — for number/date inputsBeginner Mistakes to Skip
alt attribute. Empty alt is fine for decorative images (alt="") but missing alt is a bug.
2. Multiple s on one page. Use one and let , cascade below it.
3. Closing tags in the wrong order. text is invalid; the last opened tag must close first.
4. Putting block elements inside inline ones. is fine in HTML5, but Intermediate: The Accessibility Tree
<nav> → "navigation" landmark
<main> → "main" landmark
<button>→ "button" role
<input type="email"> → textbox with email validation instead of , none of that comes for free — the screen reader sees a generic group and the keyboard user can't even tab to it.Intermediate: ARIA — When Native HTML Isn't Enough
First rule of ARIA: *Don't use it if a native element already does the job.* role="alert" — announce this dynamically created messagearia-label="Close menu" — give an accessible name when no visible text exists (e.g. an icon-only button)aria-hidden="true" — hide a purely decorative element from assistive techaria-live="polite" — announce updates without interrupting is always better than Advanced: HTML Content Models
cannot contain block-level elements (, another ).
cannot contain another . cannot contain interactive content (no nested or ).Advanced: Document Outline & Sectioning
, , , and starts a new section in the document outline. Inside a section, headings restart from the section's own (semantically) — though for SEO you should still cascade visually with , . Tools like the Chrome Accessibility Tab show you the outline.Advanced: Microdata & Structured Data
<article itemscope itemtype="https://schema.org/Article">
<h1 itemprop="headline">The Title</h1>
<span itemprop="author">Jane</span>
</article>. Both produce rich Google snippets (star ratings, recipe cards, event dates).Practice Path