Semantic Html

Semantic

Semantics refers to the meaning of a piece of code. In Html, what purpose or role does that Html element have?

Let's understand the story, you have a situation where you want to open a bookstore to sell books. So, you need a store and books on bookshelf where you can show a different categories of books for your consumer. Now you thought to keep books for that you have to have books selves. So, you have different shelves for different book categories. It is also easy for consumers to pick books and sales could start happening.

If books have not been kept with the same book categories on the same selves. Here would create confusion for consumers and sales could stop happening.

And if you compare it with the same Html. Readability for code could decrease and hence create a lot of confusion for developers also for search engines.

Semantics in Html

In Html, the h1 element is a semantic element which signifies text that has a large heading font that wraps around it.

<h1> Hello world </h1>

But what if the above Html is written with different Html elements.

<span style=”font-size:32px ;margin:21px 0;”> Hello world </span>

After rendering the above code, you will see no difference in display. But it would not get extra benefits to display. On SEO search engines this helps show better results.

Why do you need semantic HTML?

Increase code readability.
Semantic Html would be preferred by extension on the engine.
Scalable code helps developers to understand code better.

Semantic that you should prefer:

Article - html element represents a self-contained composition in a document,page,application,or,site.e.g - a forum post, a magazine,newspaper article,a blog entry.
Aside - Html represents a portion of a document whose content is only indirectly related to the document’s main content. Aside from mostly being used to represent sidebars or call-out boxes.
Main - Html represents the dominant content of the of a document. The main content area consists of content that is directly related to or expands upon the central topic of a document.
Section - The Html element represents a generic standalone section of a document.

Footer - Html elements represent a footer for the detail of the company. Mostly used on the downside of layout page that contains author details, copyright data, or links.

Other semantic Html elements are :