An Overview of HTML5 Semantics

Over the years, HTML is getting more Semantic than ever. HTML has been semantic from its start, or at least, way before the era of HTML5. Sir Tim Berners-Lee (creator of World Wide Web – www) , wanted the data that can proceed by machines. This means, that each HTML element needs to have its own distinguishable structural role. W3c says “Semantic elements = elements with a meaning”. A semantic element should describe it’s meaning to both the browser and the developer.

Just to be clear, semantic elements existed before HTML5. HTML5 added new semantic tags.

Think about semantic element that have been there for most of the time like <table></table>, <img>, <form></form>.

What about the ordered and unordered lists, paragraphs, h1-h6 heading tags? They are all semantic elements.

Non-Semantic Elements

First thing first, before we move into what are semantic elements, we need to understand what are non, semantic elements.

Non-semantic elements tell us nothing about its content. Such as <div>, <span>, <strong> and so on. We can use these tags to our advantages, however, on big sites, developers used to assign classes or ids like the header to a div class, that hurt the eyes and didn’t tell much the browser what it was.

 

Why Semantic Elements?

In the earlier version of HTML, developers used to use div’s where they would assign id’s or classes to name the element. They would name a div like headers, footer, sidebar, topnav, main and so on. Now, there are other languages too, which results in different name about the same thing.

For search engines, this is impossible to tell what is what for a correct web page content.

With HTML5, it helps programmers and search engines to understand the structure of your webpage. It’s easier for our eyes to see HTML5 elements and know what they do straight away.

It gives us also a better internationalization as only 13% of the world are English Native speakers.

Why should we not use HTML semantics anyway? It makes a lot easier to work with!

 

HTML Semantics with CSS

If you’re using Sass/Less as your CSS pre-processor, you have a lot more options to write semantic HTML without wasting any time. HTML is meant to be for structure and CSS for layout. However these days we use CSS for the structure as well.

Did you ever see a div class, with column layout? Such as:

<div class=”col-xs-12 col-md-8 col-sm-6 col-xs-12”></div>

 

This is for grid making. Imagine if your project is big, and you have plenty of it, what if this is going to be nested? The eyes will hurt.

Using a pre-processor like Sass or Less, let us make mixins and function that will make our life easier and HTML more semantic than ever.

We can style our div’s with good names, that are descriptive, that will make us the code much semantic.

For example, look at this:

<div class=”footer-container”>

                <div class=”footer-col”></div>

                <div class=”footer-col”></div>

</div>

 

This is footer container, with two columns. How does this look? Better, cleaner? Hell Yeah! Now, this is a small part of a small example, but if you have a big project imagine what will this look like. Amazing!

With Sass or Less mixins, we can make a simple include the specific styles we want to that class be. We select the class, and include out mixins for the layout like:

.footer-col {

    @include mobile(12);

    @include tablet(6);

    @include desktop (6);

}

 

And this will take specific styles for the gird to be made in the specific class.

If you want to get even more specific on how you style your content, you can use a Sass framework such as Susy, that will allow you to enhance this process even more.

However, let’s get down to HTML Semantic Tags, I’m going to write another post about how you can make your whole website very semantic and will provide you with examples.

 

HTML5 Semantic Tags

 

The main Element

The main element specifies the main content in the document. The main element is a unique HTML5 tag that can be used only once per page, hence it’s the main content element. The main content should be unique on each page and should not appear elsewhere on the site. Common content that is repeated, such as navigations, logo and so on, should not be put in the main tag.

Here is an example using the <main> element

<body>

<header>

<h1>Brand Name</h1>

<nav>…</nav>

</header>

<main role=”main”>

    <article>

        <h1>Superman</h1>

       <p>Superman has superpowers…</p>

    </article>

</main>

</body>

 

The aside Element

The aside element is usually used for a sidebar. However, that’s not always the case. Aside is used for a tangible related content.

An example of aside:

<body>

<header>

<h1>Brand Name</h1>

<nav>…</nav>

</header>

    <main role=”main”>


    </main>

    <aside>

        <h3>Related Content</h3>

        <p>…</p>

    </aside>

</body>

 

The section Element

A section is a group of content. It’s a neat way to divide the blocks of content on a website without abusing div’s. When building a website, usually we want to categorize the sections by using id’s or classes by naming things such as ‘gallery’, ‘about section’ and so on. While we might still use this approach, instead is assigning the id’s or classes to a div, we assign it to a section tag. It’s more semantical and definitely easier to develop with.

An example on how we can use <section>

<body>

    <header>

        <h1>Brand Name</h1>

        <nav>…</nav>

    </header>

    <main role=”main”>

        <section class=”gallery”>…</section>

        <section class=”about-us”>…</section>

    </main>

    <aside>

        <section class=”widget”>…</div>

        <section class=”widget”>…</div>

        <nav>..</nav>

    </aside>

</body>

 

 

The nav Element

Nav element is pretty well known semantical HTML tag. Nav is – a navigation bar. Whenever there is a navigation bar, we should use a <nav> tag. However, we would avoid the <nav> tag putting in the <main> content.  Nav is good for things like table of contents or navigation of the main website.

Here is the <nav> in action:

<nav>

<ul>

    <li><a href=”#chapter-one”>Chapter one</a></li>

    <li><a href=”#chapter-two”>Chapter two</a></li>

</ul>

</nav>

 

The header Element

The header element usually represent information such as introductory content to an article, web page, metadata that is relevant to the content, such as postdate, of news article.

<header>

    <h1>Logo</h1>

    <nav…</nav>

</header>

 

The footer Element

The footer element usually represents information such as information, date, author, copyright information, links related to other pages, rare information such as links that are hard to find.

<footer role=”footer”>

    <p>Copyright Lovetocode 2017</p>

</footer>

 

 

The article Element

Article element is best used for things like excerpts,  news articles, blog posts, user comments.

An example of using article element :

<article>

    <header>

        <h1>Blog Post title</h1>

    </header>

    <p>

    …

    </p>

    <footer>
        <p>Posted March 25 2017</p>
    </footer>

</article>

 

The address Element

The address element is usually used to represent contact information in an article, or the website itself. This could be linked to an author website or their email address.

<address>

    <span>Contact <a href=mailto:aurelian@example.com>Aurelian Spodarec</a></span>

</address>

 

The address is usually used within the footer tag.

 

There is more to HTML5 semantics –  https://www.w3schools.com/html/html5_new_elements.asp

Final thoughts

Semantic elements are AWESOME! I fell in love with them for the first time I have discovered them. They improved my mark-up the first time I used them in my project. No more classes assigned to div for main elements. The structure of the website improved, and the quality of the markup has improved a lot. The more semantics we have, the easier is going to become to write a truly beautiful semantic markup. I believe that one day we will have a semantic tag for every common feature.

What are your thoughts?

Meet the author

Meet the author

Aurelian Spodarec

Front-end WordPress developer that blogs about web development. I like using the right tools for the job. In my spare time, I enjoy cooking healthy food and then eating it. Delicious!

Comments