Command Palette

Search for a command to run...

Hectal
Phase 2Beginner3 of 8 in HTML

Structure and Semantics

Block and inline flow, semantic layout and landmarks, the heading outline, meaningful text, figures, details, dialog, popover and global attributes.

In Phase 1 you learned the pieces: elements, text, lists, links and images. This phase is about structure: how those pieces sit on the page, and how to tell the browser what each part of the page means. A heading that looks big is not the same as a heading the browser knows is a heading.

You'll learn how elements flow (block and inline), how to lay out a page with header, nav, main, article, section, aside and footer, how headings form the outline that screen-reader users move through, and the small elements that give text precise meaning: quotes, code, dates, abbreviations and captions.

Then you'll meet the interactive elements HTML gives you for free (details, dialog and the popover attribute) and the global attributes every element accepts, like id, class, lang, hidden and data-*. By the end you'll write pages that are correct for browsers, search engines and assistive technology, before a single line of CSS.

0/7 · 0%
7 topics ~3 h 18 code blocks & diagrams
Start with the first topic
1
2.1

Block and Inline Elements

Some elements stack on top of each other as full-width boxes (block), others sit inside a line of text like words (inline); knowing which is which, and what may go inside what, is the base of every layout.

26 min 3 code practice

2
2.2

Semantic Page Layout

Elements like header, nav, main, article, section, aside and footer name the regions of a page, so browsers, search engines and screen readers know where the navigation, the main content and the extras are.

26 min 1 diagram 2 code practice

3
2.3

Headings and the Document Outline

Headings h1 to h6 form the page's outline, a table of contents that screen-reader users navigate by; give each page one h1, nest levels by meaning, and don't skip levels.

19 min 2 code practice

4
2.4

Quotes, Code, Time and Other Meaningful Text

HTML has small elements that say exactly what a piece of text is: a quotation (blockquote, q, cite), an abbreviation (abbr), contact details (address), a date (time), or computer text (code, pre, kbd, samp, var).

25 min 2 code practice

5
2.5

Figures and Captions

figure wraps self-contained content that the main text refers to (an image, chart, code listing or quotation), and figcaption gives it a visible caption that is tied to it in code.

19 min 2 code practice

6
2.6

Built-in Interactive Elements

details/summary give you an open-and-close section, dialog gives you a real popup window, and the popover attribute makes menus and tips that appear on top; all with keyboard support and accessibility built in, often with no JavaScript.

26 min 3 code practice

7
2.7

Global Attributes

Global attributes work on every HTML element: id and class name elements, title, lang and dir describe them, hidden, tabindex and contenteditable change behaviour, and data-* stores your own data.

26 min 3 code practice

Practise this phase

Hands-on exercises: write the code, see your page live, and press Check to have it tested automatically.

1

Fix a list trapped in a paragraph

This menu was written with a list inside a paragraph, so the browser splits it apart and creates an extra empty paragraph.

Beginner
2

Give a div page real landmarks

This page is built only from divs. Rebuild it with semantic elements, keeping the same content:

Beginner
3

Repair a broken heading outline

This travel guide picked its headings by size. Fix the levels so the outline makes sense:

Beginner
4

An FAQ accordion without JavaScript

Turn the three questions and answers into details elements: the question is the summary, the answer follows it.

Beginner
5

A delete confirmation dialog

Add a dialog that asks Delete this photo?. Inside it, use a <form method="dialog"> with two buttons: Cancel (value="cancel") and Delete (value="delete").

Intermediate
6

Build a semantic blog article

Rebuild this recipe post as a complete, meaningful page using what you learned in this phase:

Intermediate