The right tag tells browsers, search engines and screen readers what something is.
Direct answer
Semantic HTML uses elements that carry meaning: header, nav, main, section, article, aside and footer. They improve accessibility, help search engines understand your page and make your code easier to maintain compared with a page full of divs.
A semantic page skeleton
<body>
<header>
<h1>My Site</h1>
<nav>
<a href="/">Home</a>
<a href="/about">About</a>
</nav>
</header>
<main>
<article>
<h2>Post title</h2>
<p>Text...</p>
</article>
<aside>Related links</aside>
</main>
<footer>Contact and copyright</footer>
</body>
Key elements
| Element | Meaning |
|---|---|
header | introduction or top area |
nav | main navigation links |
main | the primary content (one per page) |
article | self-contained content |
section | a themed group of content with a heading |
aside | related, side content |
footer | closing information |
Other meaningful tags
Use button for actions, a for links, ul for lists, table for data and label for form fields.
Where Teyro fits
Teyro's HTML & CSS for Beginners course turns this into short lessons you can play in a few minutes a day. It has 100 lessons, and you can start free.
The bottom line
Choose the element that describes the content. Your users and search engines will thank you.
