# What Semantic HTML Means
Semantic elements such as strong, nav, main and footer say what their content is, so the HTML describes the content and CSS handles how it looks.
Apprentice · HTML · Updated October 31, 2026
## After this lesson you can
- Replace the formatting tags b, i, u and center with strong, em or CSS
- Mark up a page's regions with header, nav, main, aside, article, section and footer instead of div
## Key takeaways
- A semantic element's name says what its content is, such as a navigation bar, the main content or an important phrase.
- Use strong and em for importance and emphasis, and do bold for looks, underlining and centering with CSS.
- Mark up a page's regions with header, nav, main, aside and footer instead of a div with an id.
- Semantic HTML helps screen readers and search engines, and it makes your HTML easier for the next person to read.
Sooner or later a class assignment, a code review or a job posting will ask for **semantic HTML**. An accessibility checker will say *the page has no main landmark*. Both are about the same idea, and it's the idea this whole module is built on: every element should say what its content *is*, not how it should look.
## Labeled moving boxes
Picture moving day. You can pack everything into plain brown boxes and number them 1 to 20. They all look the same, and they all hold your stuff. But when they arrive, nobody knows which box goes in the kitchen, so someone has to open every one.
Now write on each box what's inside: *Kitchen: plates*, *Bathroom*, *Books*. The boxes look no different, but anyone can carry them to the right room without opening them.
HTML elements are the labels. A **semantic** element is one whose name says what's inside it: `