HTML

Tags are things like <div> and <li>. HTML5 introduced many new tags that allow HTML to be more semantic. Semantic HTML is meaningful HTML - HTML that indicates its own function.

Complete list of HTML tags

Avoid using tags that don't mean anything, or mean the wrong thing.

In this example, we are using a div - which is one of the least meaningful HTML tags - when we could be using a header tag. We are also using an ul/li combination instead of the nav tag, which is more appropriate in this case.

<div class="header">
    <ul class="main-menu">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Products</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</div>

Instead use semantic tags when possible.

One of the positive side effects of semantic HTML is that it cuts down on the number of classes we need to use to explain or identify pieces of our code.

<header>
    <nav>
        <a href="#">Home</a>
        <a href="#">About</a>
        <a href="#">Products</a>
        <a href="#">Contact</a>
    </nav>
</header>

Here is a list of some common HTML tags that have intrinsic meaning:

• main
• nav
• header
• footer
• article
• aside
• section
• summary
• details
• menu
• figure
• figcaption
• blockquote
• h1, h2, h3, h4, h5, h6