What is Semantic HTML?

A semantic element describes its meaning to the browser and the developer.

Non-semantic: <div>, <span>...
Semantic: <nav>, <form>, <article>...

Let's take a look at some different examples and why they are important to use on your website.

What are the benefits?

Search engines will consider its content as important and influence the page's search rankings.
Screen readers can use them to help visually impaired people navigate the page.

It helps the developer, it's much easier to find a <nav> than going through a hundred <div>s.
Suggest to the developer what data goes inside the tag.

Let's talk about the main ones you should start using today!

<nav>

A section that contains navigation links, you can have more than one menu, but they can't be nested.

<header>

This should contain the logo, title, and navigation (<nav>), it's usually used at the top of the page or section.

<footer>

The page footer, usually contains copyright info or contact links.

<main>

This is where the most important page of your website goes. Only one per document.

<section>

This separates different sections of your website, like projects, skills, contact...

<article>

A piece of self-contained content. It can be used for articles, but also for comments, widgets...

<aside>

A section related to the main element, but independent, like an explanation box. It can also be used for a sidebar.

<h1> to <h6>

Use h elements to define headings, only one h1 per page. This helps Google know what's the most important thing on your page.

These are the main ones I use and I recommend!

Any that I missed and you would like to add? Comment below!

Would you like a more detailed explanation in an article, with more examples? Tell me what you want to read about