A complete Guide to Semantic HTML5 Elements
Semantic HTML elements are those that clearly describe their meaning in human- and in a machine-readable way.
Elements such as <header>, <footer> and <article> are all considered semantic because they accurately describe the purpose of the element and the type of content that is inside them.
What are Semantic Elements?
As the use of visually designed layouts progressed, programmers started to use a generic “non-semantic” tag like <div>.
They would often give these elements a class or id attribute to describe their purpose. For example, instead of<header> this was often written as <div class=”header”>.
As HTML5 is still relatively new, this use of non-semantic elements is still very common on websites today.
List of new Semantic Elements
- <article> Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â ,
- Â <aside>
- <details>
- <figcaption>
- <figure>
- <footer>
- <header>
- <main>
- <mark>
- <nav>
- <section>
- <summary>
- <time>
Elements such as <header>, <nav>, <section>, <article>, <aside>, and <footer> act more or less like <div> elements.
They group other elements together into page sections.
However where <div> tag could contain any type of information, it is easy to identify what sort of information would go in a semantic <header> region.
Why use semantic elements?
It is much easier to read. This is probably the first thing you will notice when looking at the first block of code using semantic elements.
It has greater accessibility. You are not the only one that finds semantic elements easier to understand.Overall, semantic elements also lead to more consistent code.
When creating a header using non-semantic elements, different programmers might write this as
<div class=”header”>, <div id=”header”>, <div class=”head”>, or simply <div>.
There are so many ways that you can create a header element.
But By creating a standard semantic element, it makes it easier for everyone.
<header> and <hgroup>
The <header> element is generally found at the top of a document, a section, or an article and usually contains the main heading and some navigation and search tools.
The <hgroup> element should be used where you want a main heading with one or more subheadings.
REMEMBER, that the <header> element can contain any content, but the <hgroup> element can only contain other headers, that is <h1> to <h6> and including <hgroup>.
<section> and <article>
The <section> and <article> elements are conceptually similar and interchangeable.
To decide which of these you should choose, take note of the following
An article is intended to be independently distributable or reusable.
A section is a thematic grouping of content.
<aside>
The <aside> element is intended for content that is not part of the flow of the text in which it appears, however, still related in some way.This of <aside> as a sidebar to your main content.
<Small>
The <small> element often appears within <a footer> or <aside> element which would usually contain copyright information or legal disclaimers, and other such fine print. However, this is not intended to make the text smaller. It is just describing its content, not prescribing a presentation.
<footer>
If there is a <header> there must be a <footer>. A <footer> is generally found at the bottom of a document, a section, or an article.It is also valid to include <section> elements within a footer.
<time>
The <time> element allows an unambiguous ISO 8601 date to be attached to a human-readable version of that date.
