Skip to content

Semantic HTML

What does the abbreviation HTML mean? It stands for Hypertext Markup Language, originally written by Tim Berners-Lee in 1993. HTML is the code that is used to structure a web page and its content. The latest major version is HTML5.

Important to keep in mind is: HTML is developed as a markup language and not as a programming language. 

The use of elements

Nowadays HTML5 not only contains text elements, but also document structure elements like landmarks and elements for interaction, such as links, buttons and form controls. These elements give content and structure meaning, which is called ‘semantics’. For example:

Formatting text:
<p>A paragraph of text.</p>
<h1>The main heading of a page</h1>

Graphical elements:
<img src=”IMG_123.jpg” alt=”Cherry tree in full bloom”>

Structure with landmarks:
<header>The top of the web page, with for example a logo, menu and search form</header>
<main>The main content of a web page</main>
<aside>A sidebar</aside>
<footer>At the bottom of the web page, with for example contact information</footer>

Interaction:
A link: <a href=”some-url”>A link to another page</a>
A button: <button>Open the menu</button>
An input field in a form <input type=”text” value=”your favourite color” name=colour”>

Semantic HTML5 informs browsers and assistive technology about how to use and interact with a web page.

Elements like<div>s and <span>s are meaningless, inert. You can use them for layout and styling, but not to replace semantic HTML5, as it will require a lot of JavaScript to mimic the real HTML5 element. Always choose an existing HTML5 element first.

That is why using semantic HTML5 is so important for the accessibility and robustness of a website. Using the right element for the job makes all the difference. 

Learn more about semantic HTML5!

And how to implement it in your web project. Follow our course "Accessible Code".