Lesson 7 of 8
Tags with meaning
- 10 min
- 5 checks
- 3 hints
- Go to task
Goal
Tags that describe parts of the page instead of div
Explanation
A page built from div alone looks fine to anyone who can see it, but a screen reader finds nothing in it to go on: it can't tell where the navigation links are or where the content is. Semantic elements, on the other hand, have names that say what they do, like header, nav, main, article and footer.
Each one is a landmark that screen reader users can jump to directly. Search engines understand it too, and so does the next developer who works on the code after you, without having to guess. The page won't look any different, because the class is still there for styling and the tag carries the meaning.
Don't overdo it, though: a page has only one main, and an element that's there only for styling stays a div.
Your task
Turn .top into a header and the menu inside it into a nav, .content into a main, .post into an article, and .bottom into a footer.
Checks
5 checks- The page header is in a header
- The three navigation links are inside nav
- The content is in exactly one main
- The post is an article inside main with a heading
- The page footer is in a footer outside main