Learn about the role of semantic elements that improve the accessibility, readability and structure of web pages.
Front-end Developer
Semantic HTML elements are those that clearly describe their meaning to both humans and machines. Elements such as
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.
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>.
To look at the benefits of using semantic elements, here are two pieces of HTML code. The first block of code uses semantic elements:
Unsemantic code:
<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>code using semantics:
<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.
"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 <div>.
The
The article is intended for independent distribution or reuse. A section is a thematic grouping of content.
Example:
<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>The
Example:
<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>REMEMBER that the element <header> may contain any content, but the element <hgroup> may only contain other headers, i.e. <h1> To <h6> including <hgroup>.
The
<aside>
<p>This is a sidebar, for example a definition of a term or a brief background of a historical figure.</p>
</aside>Before HTML5, our menus were created with
Front-end Developer
© 2022 - 2024 Our creativity, your possibilities. All rights reserved.
English 
Polski 
Deutsch