Summary -

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.

Advantages -

  • 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.

Browser support

HTML5 semantic elements are supported by all advanced browsers.

chrome Internet explorer Firefox safari opera
Yes Yes Yes Yes Yes

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

Index Semantic Tag Description
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