Look at the graph given above, and you can quickly see how extensively HTML 5 is growing popularity. The Semantic HTML 5 has almost replaced the HTML. Now, we are going to discuss Semantic HTML 5 and how it is used for structuring the document
If you have the basic idea about HTML language that you probably know HTML (Hypertext Markup Language) is the standard markup language for web pages. We use HTML tags to format the content of the web pages as these tags instruct the browser how to display the content on the page. It’s a basic and simple thing that we all know. But, do HTML tags let the browser know what type of content they have, or the roles played by the different types of content? No, they don’t. This is precisely where Semantic HTML 5 plays the crucial role as it uses the particular tags to let the browser clearly understand what type of content those tags have.
Semantic HTML tags provide the precise information to the web crawler/robot like Google and Bing to clearly understand which content is crucial, which is a subsidiary, which is given for navigation and many other things. It is imperative to make Google and Bing understand what roles the different parts of your web page is playing, and by adding Semantic HTML tags to your pages, you can do it.
| HTML | Semantic HTML 5 |
| HTML tags tell browsers how the content should be presented. | Semantic HTML 5 tags clearly tells browsers what type of content these tag contain and the roles played by the content |
For example, a tag like <p> is both semantic and presentational. Why? Well, it indicates that the enclosed text or content is a paragraph, so it serves both the purposes- it tells browsers that it’s a paragraph and how to display it.
On the other hands, tags like <b> and <i> are non-semantic as they only define the appearance of the text – bold and italic, but they don’t say anything about the type of content or which role the content is playing.
Ideal examples of Semantic HTML tags include the header tags – from <h1> to <h6>, <code>, <blockquote> and < em>. There are so many HTML tags that you can use to build a standard-compliant website.
Now, you should know why one should use Semantic HTML 5?
We, the human users, can easily see and understand the different parts of the web page at a single glance. The header, menu, main content, footer – all are visually apparent to us but, what about the non-human bots like Google or Bing? They don’t see and understand the different parts of a page. So, you need to establish the communication with the bots and make them know about the different types of content and which roles they are playing – what part of your content is header, the main content, navigation, footer and so on. Furthermore, you can tell Google or Bing bots that which part of your content is essential and so that they can prioritize the content based on your information.
Semantic tags make the meaning of your content and page entirely apparent to the browser. This clarity is also communicated with the search engines so that they can deliver the right pages for the correct queries.
Semantic tags give you a lot of styling options for your content. Maybe now you prefer your content displayed in the default browser style, but a few days later, you may decide to add a grey background and then, you want to define monospaced font family for your samples. You can quickly implement all these things with Semantic HTML markup which can be successfully applied to CSS.
How Does Semantic HTML look like?
Basic examples of Semantic HTML include <nav>, <footer> and <section>. There are so many Semantic tags that can be used, such as <blockquote>, <em>, <code> , etcetera. But in this section of the article, we are going to talk about the semantic tags that you will require the break the page content into its basic parts.
Instead of using an old HTML tag like <div>, using the following Semantic HTML tags can be a perfect decision to break the page content into identified parts each of which has a specific roles to play:
<header>
<nav>
<main>
<article>
<section>
<aside>
<footer>
One of the best advantages of attributing a clear role of each part of the content is that that it enables Google and Bing to index the page correctly and promptly.
Know how to make the correct use of Semantic HTML tags
When it comes to using Semantic tags, you must ensure they convey the meaning, instead of using it for the presentational purposes.
A lot of web designing solutions make a mistake at the time of using these semantic tags :
Blockquote: a lot of people use blockquote to indenting text, which is not a quotation. The reason is blockquotes are indented by default. The smart way to use the benefit of indentation without using the blockquote is using CSS margin instead.
<p>: some people use <p>abcd</p> for adding space between page elements, but it is supposed to be used for defining the actual paragraph for the text of the page. Just like the indenting example given above, using padding style property or margin would be the right idea to use space.
<ul>: just like blockquotes, some people use <ul> to indent the text for most browsers. It is a semantically incorrect and invalid HTML as only <li> tags work with the <ul> tag. Using the margin or padding style to indent the text is the best idea.
Which HTML tags are Semantic?
While nearly all the HTML 4 and five tags have semantic meaning but, some of them are primarily semantic
Semantic HTML tags :
<abbr> Abbreviation
<acronym> Acronym
<blockquote> Long quotation
<dfn> Definition
<address> Address for author(s) of the document
<cite> Citation
<code> Code reference
<tt> Teletype text
<div> Logical division
<span> Generic inline style container
<del> Deleted text
<ins> Inserted text
<em> Emphasis
<strong> Strong emphasis
<h1> First-level headline
<h2> Second-level headline
<h3> Third-level headline
<h4> Fourth-level headline
<h5> Fifth-level headline
<h6> Sixth-level headline
<hr> Thematic break
<kbd> Text to be entered by the user
<pre> Pre-formatted text
<q> Short inline quotation
<samp> Sample output
<sub> Subscript
<sup> Superscript
<var> Variable or user defined text
An example of using Semantic HTML 5 tags is given below
