All topics › Unit 2 · Semantic HTML and Forms
Topic 13 · 13 of 43
Semantic HTML Elements
All in one: every semantic element, side by side
What this example compares
- Meaning or just a box:
<div class="header">(and<span>) vs<header>,<article>,<aside>,<footer>: same pixels, different meaning - The seven:
header,nav,main,section,article,aside,footer, with how many of each a page may have - The top of a page:
<header>vs<head>vs<title>vs<h1>(and<top>, which does not exist) - Navigation: one
<nav>around the group vs one per link; menu, breadcrumbs, pagination, contents; naming navs witharia-label - Choosing:
<article>vs<aside>vs<section>vs<div>, and the section with no heading - Where things go: one
<main>, the right shapeheader > nav,main > sectionvs the three wrong shapes, a header and footer inside an article - Captions:
<figure>+<figcaption>vs<picture>,<caption>,<legend>,<label> - For people and machines:
<time datetime>vs<data value>vs<date>(no such tag), and<address> - Open and close:
<details>+<summary>vs<details open>vs<dialog open>(and<collapse>, no such tag) - Showing a state:
<mark>vs<progress>vs<meter> - Worked example: naming the regions of a university home page, which is the shape of this page, with its real
<aside>and<footer>
Point at any word in the code to see what it means (tap on a phone); click a word to keep its meaning on screen. Read the comment above each numbered panel, press Run, then Edit & experiment to try the TRY lines yourself.
Loading the example…
What you should see
You should see an orange page header labelled landmark: banner, then a green main box holding eleven blue section panels, the Quick links aside and, at the bottom, the orange page footer. The last panels are further down inside the preview, so scroll it. In panel 1, card A (divs) has no labels, card B has a label on every box, and card C looks exactly like card A although its code is the same as B. Red labels appear in three places only: the three one-link navs in panel 4, the section with no heading in panel 5, card 5. Panel 8 prints the hidden datetime and value in grey brackets, and <top>, <date> and <collapse> show plain words with no box. The page has no JavaScript, so there is no console output.
Quick check: in panel 5, card 4 is a <div class="cols">. Why is that the right choice, and what does the x-ray show if you change it to a <section>?
It exists only so CSS can make two columns: it does not stand alone (not an article), it is not a removable extra (not an aside) and it has no heading (not a section), so a div is right. As a section it gets a red label “section with NO heading”: a section without a heading is a div in disguise.