Chapter 2

Semantic HTML, Accessibility & Best Practices

Meaningful structure, ARIA, and the 2025 rules for structure, accessibility, performance and security.

Semantic HTML5

Semantic elements describe their meaning instead of using generic containers.

<!-- Old, non-semantic -->
<div id="header">...</div>
<div id="main">...</div>
<div id="footer">...</div>

<!-- Modern, semantic -->
<header>...</header>
<main>...</main>
<footer>...</footer>

Why semantics matter

Accessibility — screen readers use semantic elements to navigate; users can jump to <main> or <nav>.
Readability — self-documenting code; other developers understand the structure immediately.
SEO — search engines understand content hierarchy; <article> signals main content.
Styling hooks — clean CSS selectors such as header {}, nav a {}, footer {}.

Semantic Page Layout

Element	Role
`<header>`	Introductory content or nav group for the page or a section. Can appear multiple times.
`<nav>`	Primary navigation links — main menu, breadcrumbs, pagination.
`<main>`	Dominant content — unique per page. Target for skip navigation links.
`<article>`	Self-contained content: blog post, news article, forum post, product card.
`<section>`	Thematic grouping with a heading. Use when content doesn't fit another semantic tag.
`<aside>`	Tangentially related: sidebar, pull quote, advertising, related links.
`<footer>`	Footer info: copyright, author, links. Can appear inside `<article>` too.

Prefer semantic tags over <div>. Reserve <div> for CSS layout containers with no semantic meaning.

Accessibility — ARIA & Best Practices

ARIA (Accessible Rich Internet Applications) adds semantic information for assistive technologies.

ARIA roles

role="main" — primary page content
role="navigation" — navigation landmark
role="complementary" — sidebar content
role="contentinfo" — footer / copyright area
role="alert" — dynamic alert messages

ARIA attributes

aria-label — accessible name, e.g. <button aria-label="Close">
aria-labelledby — references another element's text as label
aria-describedby — references a description element's id
aria-hidden="true" — hides from assistive technology
aria-expanded — state of collapsible content (true/false)
aria-required — marks a field as required for assistive technology

Core accessibility rules

Use semantic HTML first — ARIA supplements, it doesn't replace.
Every image needs alt text (empty alt="" for decorative).
Every form input needs a linked <label>.
Ensure sufficient colour contrast (4.5:1 for text, 3:1 for UI).
Test with a screen reader (NVDA, VoiceOver).

HTML Best Practices (2025)

Structure

Always include <!DOCTYPE html> as the first line.
Add lang to <html>: <html lang="en">.
Use one <h1> per page; don't skip heading levels.
Use semantic elements over generic <div>.

Accessibility

Every <img> must have descriptive alt text.
Every <input> must have a paired <label>.
Use <button> for actions, <a> for navigation.
Ensure a 4.5:1 colour contrast ratio for text.
Support keyboard navigation (tabindex, focus styles).

Performance

Lazy-load images below the fold.
Specify width and height on all images.
Use modern formats: AVIF/WebP over JPEG/PNG.
Use <link rel="preload"> for critical resources.
Minimise inline styles — use external CSS.

Security

Add rel="noopener noreferrer" with target="_blank".
Never put sensitive data in HTML comments.
Validate all form input on the SERVER side.
Use Content-Security-Policy headers.
Sanitise user-generated content before display.

Key Takeaways

HTML is the Living Standard — continuously updated, not versioned.
Elements = opening tag + content + closing tag (or a void element).
Always use semantic elements: <header>, <main>, <article>, <footer>.
HTML5 input types give built-in validation: email, date, url, tel.
Images need src, alt, width, height and loading="lazy".
Forms: pair every <input> with a <label> using id/for attributes.
Tables = data structure only; use CSS Grid/Flex for page layout.
Accessibility + SEO: use alt, lang, ARIA, semantic structure.
Security: noopener on new tabs, validate server-side, no secrets in comments.
Performance: lazy-load images, specify dimensions, use AVIF/WebP.

Activity — complete the code

Complete the code correctly to mark this lesson as complete automatically.

Complete the semantic page structure.

<>
  <h1>My Blog</h1>
  <nav>...</nav>
</header>
<>
  <article>
    <h2>Post title</h2>
  </article>
</main>
<>
  <p>&copy; 2025</p>
</footer>