In this topic, we described about the below sections -
Why Semantics Elements
HTML was initially created as a mark-up language to define documents on the early internet and was originally meant for sharing scientific documents. As the internet grew and HTML was implemented by more people, it’s required to be changed to use it for other purposes as well.
Very quickly, people started choosing to create the web look better. As the use of visually designed layouts progressed, programmers started to use a generic "non-semantic" tag like <div>.
In the HTML4 also, developers are used to their own class/id names to style elements. Such as - header, top, bottom, footer, menu, navigation, main, container, content, article, sidebar, topnav, etc. This is so critical to search engine for identifying the perfect web page content.
HTML5 introduce many semantic elements which makes easy to understand the purpose of the element and the type of the content coded inside them. For example - <header>, <body> and <footer>.
What is Semantic Element
The Semantic is the study of word and phases meanings in a language. Semantic element is nothing but an element that is with a meaning.
Semantic element is a simple and clearly defines its meaning to both the developer and browser in readable format. Basically, it is necessary in any language to understand the purpose of the element and the type of the content coded inside them.
For example, elements such as <header>, <footer> and <article> are all considered semantic elements.
Semantic elements = elements with a meaning
For example -
We have seen <div>, <span>, etc. in html4 are non-semantic elements. They don’t tell about any content coded in it. On the other hand, <form>, <table>, and <article> etc. are semantic elements because they clearly define their content about it.
- Semantic elements (<header> <footer> <nav> <section> <article>) can improve the accessibility of your website and helps to create a better structure of the website.
- Easier to read.
- Easy to identify the perfect webpage content by search engines.
- Has Greater accessibility.
- Leads to Consistent code.
HTML5 semantic elements are supported by all advanced browsers.
Difference between Semantic and non-semantic elements coding
Below example describes how the semantic elements are useful among non semantic elements -
Semantic elements coding -
<header></header> <section> <article> <figure> <img /> <figcaption></figcaption> </figure> </article> </section> <footer></footer>
The same example with non-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>
List of new semantic elements
Below are the list of new semantic elements added in HTML5
|1||<article>||Describes an article|
|2||<aside>||Describes content aside from the page content|
|3||<details>||Represent additional details that the user can view or hide|
|4||<figcaption>||Describes a caption for a <figure> element|
|5||<figure>||Specifies self-contained content,like illustrations,diagrams,photos,code listings,etc.|
|6||<footer>||Defines a footer for a document or section|
|7||<header>||Specifies a header for a document or section|
|8||<main>||Specifies the main content of a document|
|9||<mark>||Describes marked/highlighted text|
|10||<nav>||Describes navigation links|
|11||<section>||represent a section in a document|
|12||<summary>||Describes a visible heading for a <details> element|
|13||<time>||Defines a date/time|