Semantic HTML Explained: Give Website Content the Right Meaning

The six points in the video

This is a silent video. The headings, explanations and labels below reproduce the information on screen.

1. 1

   Step 1: A heading has a structural role

   0:18

   Heading markup identifies a section rather than just enlarging its text.

   On-screen labels: Section heading; Document structure; Visual styling.

2. 2

   Step 2: A button performs an action

   0:30

   Use a suitable native control for an interactive task.

   On-screen labels: Action control; Native behaviour; Clear label.

3. 3

   Step 3: A link leads somewhere

   0:42

   Link markup identifies navigation to a resource or destination.

   On-screen labels: Destination; Link purpose; Navigation behaviour.

4. 4

   Step 4: Lists identify related items

   0:54

   List markup communicates the relationship between entries.

   On-screen labels: Related items; List structure; Meaningful grouping.

5. 5

   Step 5: Appearance can be styled

   1:06

   CSS can change presentation while useful HTML meaning remains.

   On-screen labels: HTML meaning; CSS appearance; Working structure.

6. 6

   Step 6: Check software understanding

   1:18

   Review structure, names and keyboard behaviour as well as the screenshot.

   On-screen labels: Programmatic role; Accessible name; Actual interaction.

Common questions

Go further