Semantics

A big change in HTML5 from earlier versions of the standard is the introduction of more descriptive elements. As has been said numerous times, HTML is good at denoting what elements of the page are, not how they look. More descriptive, semantic elements help with that, and make your page cleaner and easier for computers to navigate as well.

Semantic elements replace and redefine earlier elements like <b>, <i>, and <small>, among others. These elements defined how the text was supposed to look (bold, italicized, or small, respectively), not their purpose.

But what's the big deal? `<strong>` and `<b>` look the same!

Not necessarily. There's nothing in the HTML5 standard that says a <strong> tag should be bold. Most browsers just style it that way by default. If you wanted to, you could style a <strong> to be the same font weight but a different color than the main text, and its meaning would still be the same. This is the flexibility that semantic elements give you. You decide how certain elements look, but their meaning stays the same.

Semantic tags are important for other reasons as well:

Browser behavior

While you can make a <div> look like a button, it won't act quite like a proper, semantic <button> element. You won't be able to use the keyboard to navigate to it, page focus and context can get warped if a link takes the user elsewhere on the page, and a screen reader like macOS' VoiceOver will only consider it "clickable", not a proper button. Very subtle problems can creep up from misusing tags.

Accessibility

Alternative clients, like text-mode clients such as Lynx or screen readers, will not put the same kind of emphasis on a <b> element as it will a <strong> element, despite both looking the same by default in most browsers. Though it tries its best, a screen reader might read a navigational <div> as part of the normal page content.

With semantic elements, the client knows what's important and what isn't right away, and can decide how to render the page based on that information.

Futureproofing

Semantic elements are very much the future of the standard. Not only will using less-semantic elements cause issues if clients change they way they render a specific tag, but a semantic site will often be treated better in search engine results. Potentially, newer browsers and analytics tools will be able to do more with a more semantic page.

Further, writing good markup now will save you the trouble of having to clean it up later.

Clarity

Finally, semantic elements are just nicer to read. You'll immediately know the purpose of a chunk of markup, and so will the people who read your markup.

It's also more satisfying to be able to style a <nav> directly, rather than having to resort to IDs or classes.

Instead of using this, use this...

If you're looking for a good place to start, try replacing some of the less semantic elements in your markup with the following.

Instead of...	Use...	Explanation
`<div>`	`<header>` `<footer>` `<nav>` `<main>` `<article>` `<section>` `<aside>`	`<div>` is one of the least semantic elements and should be used only as a last resort. For structuring your page, use a more specific element. `<header>` is for page headers. Naturally, `<footer>` is for page footers. `<nav>` should be the container for any navigational elements. `<main>` should be used for the main section of the page, usually where most of the page content is. If a section of text can be snipped out of the page and viewed on its own (say, for a blog entry), use `<article>`. Use `<section>` for a section of information that's grouped thematically—contact information, or an introduction. `<aside>` elements are sidebars— they shouldn't be necessary to understand the rest of the page. They usually aren't rendered by reader modes or read by screen readers. As an addendum, these are all block-level elements—the same as a `<div>`. All you need to do to use them is to switch the names of the tag in your markup and stylesheet.
`<i>`	`<em>` `<cite>`	The `<i>` element is meant for text that's a bit separate from the rest of the text, such as for a character's thoughts in a story. If you mean to use it for emphasis, use `<em>`. If you're citing the name of a long work, such as a paper, a novel, or an album name, `<cite>` is what you should use instead.
`<b>`	`<strong>`	`<strong>` should be used for text of certain importance, or to emphasize more extremely than `<em>`.
`<s>`	`<del>`	`<s>` used to be used to visually strike out text. Nowadays, `<s>` is meant for information that's no longer accurate, and `<del>` is meant for document changes.
`<u>`	`<ins>`	`<u>` used to be used to underline text. If you're using it to denote changes to a document, use `<ins>`. (Use underlining sparingly, as users associate underlining with links generally.)
`<tt>`	`<samp>` `<kbd>` `<var>` `<code>`	`<code>` is good for single snippets of code or functions. For variables (in the math or programming sense), you should use `<var>`. `<kbd>` is for user input, such as keys on a keyboard, and `<samp>` is for the sample output of a computer program or terminal.

Redefined elements

Elements introduced early in the standard have been repurposed in HTML5. The <small> tag, originally meant for small text, is now used for side comments and small print, such as disclaimers. Other examples are listed in the table above.

These tags should work similar to how they did before, so if you're already using them, you shouldn't need to do much. Just be aware of their new meaning.

Need an example?

If you need an example of how semantic tags should be used, just look around the markup of this site! It's all valid HTML5 and makes heavy use of semantic elements.

Summary:

Semantic elements are far more descriptive than traditional HTML elements. <strong>, <nav>, and <header> are all examples of semantic elements.
While semantic elements generally have a default look (<strong> is often bold, for example), this isn't consistent among browsers and isn't defined by any standards. Use semantic tags only for defining what things are and use the stylesheet to control the look of the page.
- Remember: HTML is great at describing the point of the content, not how the content should look.
The benefits to using semantic elements are numerous:
- You'll have full control over how elements render, and their meaning will stay the same. A <strong> doesn't have to render bold, but a <b> would be useless if it didn't.
- Subtle bugs can crop up from using tags for different than intended purposes.
- Screen readers, reader modes, and other alternative clients use semantic elements to read and interpret your page.
- Search engines also use semantic elements to tailor the search results to the content of your site. Semantics also helps in the overall rankings.
- Finally, semantic elements just make your markup easier to read, for you and for others.