It has a two-way benefit. One, It helps browsers quickly and efficiently understand the structure of the layout, and two, it helps web developers to systematically arrange or design web pages and give meaning to each section of the layout. The elements are easy to remember, and fits where it needs.
Yes, semantic means meaning, and this is how every dictionary in the world defines it. Moreover, when we say semantic elements, it means elements with meaning.
You do not have to use the DIV element as a container to define every section on the web page. Define the header section using the <header> element and the footer section using <footer> element and so on.
For a decade, developers have used the DIV element (<div>) as a primary container, which served as header, footer, navigation etc, by identifying each element with unique ids or Class attribute.
Header using DIV
<div id="header">
Header content
</div>Footer using DIV
<div id="footer">
Footer content
</div>Technically, we will not describe the above structure as meaningless, since it serves the purpose of separating two different sections as header and footer.
However, HTML5 has added a little meaning (semantic) and identifier to its elements, so web developers can use them wisely in their web pages.
01) Semantic <header> and <footer> elements
Prior to HTML5 semantics, the header and footer would have served as independent sections of a web page. We can define the new semantic <header> and <footer> elements as part of a section or sections. Each section can have its own <header> and <footer> element, allowing us to add multiple semantic elements in a single web page.
<body>
<section>
<header>
<h1>Header in Section1</h1>
</header>
<footer>
<h1>Footer in Section1</h1>
</footer>
</section>
<section>
<header>
<h1>Header in Section2</h1>
</header>
<footer>
<h1>Footer in Section2</h1>
</footer>
</section>
</body>HTML5 Datalist Element – Add AutoComplete Feature with Datalist
02) Create navigation links using Semantic <nav> elements
The <nav> element will allow us to group together a list of navigation links in a semantic manner.
A typical navigation link section would have looked like this before.
<div id="nav">
<ul>
<li>
<a href="html5.htm">HTML5</a> |
<a href="css.htm">CSS</a> |
<a href="sql.htm">SQL</a>
</li>
</ul>
</div>Now we can encapsulate a group of links in a single semantic element and it looks organized.
<section>
<nav>
<a href="html5.htm">HTML5</a> |
<a href="css.htm">CSS</a> |
<a href="sql.htm">SQL</a>
</nav>
</section>03) The <aside> element
Place the semantic <aside> element at either the left or right of a section. It works as a sidebar inside an element.
Defined below is a markup with an <aside> inside an <article> element. To make this markup semantic, the <aside>’s contents must have relevance to the contents of the <article> element.
<article>
<aside>
<h4>Sidebar inside an Article</h4>
<p>Some content inside <aside></p>
</aside>
</article>You can define this element anywhere inside the <body> element, but it should provide some meaningful relationship with the element it resides.
04) Semantic <article> element
Use this element to write an article for a blog or a post in a forum. An <article> element may have a header showing the authors name, blog or post date and time. Conclude the article by adding footer at the end of the article.
A nested <article> must have some relevance with the <article> in which it is nested.
<article> element with <header>
<article>
<header>
<h3>Books</h3>
<p>Showing a list of Books</p>
</header>
</article>Nested <article> elements
<article>
<header>
<h3>Books</h3>
<p>Showing a list of Books</p>
</header>
<section>
<article>
<h3>Category</h3>
<p>Computer Science</p>
</article>
</section>
</article>05) Define a section using <section> element
The <section> element resembles the <div> element, which serves has a container, but the former gives for meaning to the page layout. The purpose of this element is to segregate different sections or group contents based on relevance.
Imagine that I am writing an article on HTML5 and have different topics to cover. My markup will look like this:
<article>
<header>
<h2>HTML5 New Elements</h3>
</header>
<section>
<h3>Element ‘contenteditable’</h3>
<p>Define contenteditable</p>
</section>
<section>
<h3>Element ‘datalist’</h3>
<p>Define datalist</p>
</section>
</article>Every section inside the <article> element has neatly separated each topic. Hence, gave a new meaning to the entire article section.
HTML5 contenteditable attribute - Convert your Browser into a Notepad
06) The <details> and <summary> together
These elements remind us of jQuery toggle method to show or hide contents. By default the contents in a <details> element remains hidden, when the page is first loaded. The <summary> element defines the clickable heading for the <details> element. When the user clicks the heading, it will show the contents embedded inside the elements.
<details>
<summary>Read more about us.</summary>
<h2>Name of the Company</h2>
<p>About the company</p>
<p>Company vision and mission</p>
</details>You can add multiple <details> element nested inside each other.
<details>
<summary>How much is 4 + 6?</summary>
<input type=text id=sum />
<details>
<summary>Enter your name</summary>
<input type=text id=uname />
</details>
</details>If your web page has too many elements and contents, use this combination to hide contents and only show when requested. These are perfect for creating Accordion menu with style and appeal.
Note: Works with Chrome only.
All the Elements Here
Here's the list of all the elements that I have defined above, on a single page.
<!doctype html>
<html>
<head>
<title>HTML5 Semantic elements and its usage</title>
</head>
<body style="font:14px Verdana;">
<h3>01) Semantic elements header and footer</h3>
<section>
<header>
<p>A header element inside the first section element</p>
</header>
<footer>
<p>A footer element inside the first section element</p>
</footer>
</section>
<section>
<header>
<p>A header element inside the second section element</p>
</header>
<footer>
<p>A footer element inside the second section element</p>
</footer>
</section>
<!--Semantic element <nav> -->
<h3>02) Semantic element "nav"</h3>
<section>
<nav>
<a href="html5.htm">HTML5</a> |
<a href="css.htm">CSS</a> |
<a href="sql.htm">SQL</a>
</nav>
</section>
<!--The <aside> element -->
<h3>03) Semantic "aside" element</h3>
<article>
<aside>
<h4>Sidebar inside an Article</h4>
<p>Some content inside <aside></p>
</aside>
</article>
<!--The <aside> element -->
<h3>04) Semantic "article" element</h3>
<article>
<header>
<h3>Books</h3>
<p>Showing a list of Books</p>
</header>
<section>
<article>
<h3>Category</h3>
<p>Computer Science</p>
</article>
</section>
</article>
<h3>05) Define a section using "section" element</h3>
<article>
<header>
<h2>HTML5 New Elements</h3>
</header>
<section>
<h3>Element 'contenteditable'</h3>
<p>Define contenteditable</p>
</section>
<section>
<h3>Element 'datalist'</h3>
<p>Define datalist</p>
</section>
</article>
<h3>06) The "details" and "summary" together</h3>
<details>
<summary>How much is 4 + 6?</summary>
<input type=text id=sum />
<details>
<summary>Enter your name</summary>
<input type=text id=uname />
</details>
</details>
</body>
</html>HTML5 semantic elements are here to help web developers to navigate though their web page with ease, since the semantic elements together forms a more structured layout.
Happy Coding. 🙂