Why should you care about semantics on your website?

Learn about the role of semantic elements that improve the accessibility, readability and structure of web pages.

Jan Szarwaryn

Front-end Developer

Homepage » Why should you care about semantics on your website?
Table of contents:

Table Of Contents

Share entry:

Introduction

Semantic HTML elements are those that clearly describe their meaning to both humans and machines. Elements such as

,
and
are considered semantic because they accurately describe the purpose of the element and the type of content it contains.

What are semantic elements?

HTML was originally created as a markup language to describe documents in the early days of the internet. As the internet has grown and spread, its needs have changed.

Originally intended for sharing scientific documents, the internet started to be used for sharing other content as well. Quickly, people began to strive to make websites look more attractive.

Because the web was not originally built with design in mind, developers used various tricks to place elements on pages in different ways. Instead of using <table> to describe information in a table, developers used them to position other elements on the page.

As visual page design evolved, developers began to use generic, 'non-semantic' tags like <div>. They often assigned class or id attributes to these elements to describe their purpose. For example, instead of <header> has often written <div class="”header”">.

Although HTML5 is relatively new, the use of non-semantic elements is still very common on websites.

List of new semantic elements

Semantic elements added in HTML5 include: <article> <aside> <details> <figcaption> <figure> <footer> <header> <main> <mark> <nav> <section> <summary> <time> Elements such as <header>, <nav>, <section>, <article>, <aside> i <footer> function more or less like elements of <div>. They group other elements in sections of the page. However, unlike the <div>which can contain any type of information, it is easy to identify what type of information should be included in the semantic region. <header>.

Why use semantic elements?

To look at the benefits of using semantic elements, here are two pieces of HTML code. The first block of code uses semantic elements:

<div id="header"></div>
<div class="section">
	<div class="article">
		<div class="figure">
			<img>
			<div class="figcaption"></div>
		</div>
	</div>
</div>
<div id="footer"></div>
<header></header>
<section>
	<article>
		<figure>
			<img>
			<figcaption></figcaption>
		</figure>
	</article>
</section>
<footer></footer>

The first one is much easier to read. This is probably the first thing you notice when looking at the first block of code that uses semantic elements. This is a small example, but as a programmer you may read hundreds or thousands of lines of code. The easier it is to read and understand that code, the easier your job becomes.

Improves accessibility. It's not just you who find semantic elements easier to understand. Search engines and assistive technologies (such as screen readers for visually impaired users) also understand the context and content of your site better, which means a better experience for your users.

In general, semantic elements also lead to more consistent code. By creating a header using non-semantic elements, different programmers can write it as <div class="header">, <div id="header">, <div class="head"> or simply <div>. There are many ways to create a header element, and it all depends on the personal preferences of the developer. By creating a standard semantic element, it makes everyone's job easier.

Since October 2014, HTML4 has been upgraded to HTML5, along with several new 'semantic' elements. To this day, some of us may still be confused as to why there are so many different elements that do not seem to bring any significant changes.

and
.

"What's the difference?", you may ask. Both are used to dissect content and yes, they can certainly be used interchangeably. It's a question of in which situation. HTML4 offered only one type of container element, which is the <div>. Although it is still used in HTML5, HTML5 provided us with a

i
. as a way of replacing <div>.

The

and
elements are conceptually similar and interchangeable. To decide which one to choose, pay attention to the following:

The article is intended for independent distribution or reuse. A section is a thematic grouping of content.

<section>
  <p>Key messages</p>
  <section>
    <p>News</p>
    <article>History 1</article>
    <article>History 2</article>
    <article>History 3</article>
  </section>
  <section>
    <p>Sport</p>
    <article>History 1</article>
    <article>History 2</article>
    <article>History 3</article>
  </section>
</section>

and
.

The

element is usually located at the top of a document, section or article and usually contains the main header and navigation and search tools.

<header>
  <h1>Company A</h1>
  <ul>
    <li><a href="/home">Homepage</a></li>
    <li><a href="/about">About us</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
  <forms target="/search">
    <input name="q" type="search" />
    <input type="submit" />
  </forms>
</header>

<!-- Note: The 
element should be used where you want a main heading with one or more subheadings. --> <hgroup> <h1>Heading 1</h1> <h2>Subtitle 1</h2> <h2>Subtitle 2</h2> </hgroup>

The

If there is a

, there must also be a
. The
element is usually at the bottom of a document, section or article. Like the
, the content usually includes meta-information such as author details, legal information and/or links to related information. It is also important to include
elements in the footer.

<span
<footer>© Company A</footer>

.

The element often appears in the

or
<footer><small>© Company A</small> Date</footer> 

.

The element allows an ambiguous ISO 8601 date to be appended to a human-readable version of that date.

<span role="button" tabindex="0" data-code="<time datetime="2017-10-31t11:21:00+02:00">Tuesday, 31 October 2017
<time datetime="2017-10-31T11:21:00+02:00">Tuesday, 31 October 2017</time> 

Why use ? While humans can read time that can be discerned by context in the normal way, computers can read the ISO 8601 date and see the date, time and time zone.

and
.

is used to surround the content of the image and
is used to caption the image.

<figure> 
  <img src="https://en.wikipedia.org/wiki/File:Shadow_of_Mordor_cover_art.jpg" alt="Shadow of Mordor" /> 
  <figcaption>Cover art for Middle-earth: Shadow of Mordor</figcaption> 
</figure>

While I don't discuss all the available semantic markup in this text, I encourage you to explore the topic further. For those who are interested and would like to learn more, I have provided links at the bottom that lead to detailed resources and guides on HTML5 semantic elements. This is a fascinating resource for anyone who wants to deepen their skills in modern web design.

Find out more about the new HTML5 elements:

  • w3schools provides simple and clear descriptions of many of the new elements and information on how and where they should be used.
  • MDN also provides a great source of information about all HTML elements and delves into each of them.

Front-end Developer

Jan Szarwaryn

We create cutting-edge web solutions that transform your online presence into real business successes.
Company data
LunaDesign Sara Kowal
NIP: 8971901218
REGON: 521121045
ADDRESS:
3/3 Henri Barbusse Street
58-305 Walbrzych

© 2022 - 2024 Our creativity, your possibilities. All rights reserved.