HTML5 Semantics

In any language, it is essential to understand the meaning of words during communication. And if this is a computer communication then it becomes more critical. So HTML5 provides more semantic elements which make easy understanding of the code.

Hence Semantics defines the meaning of words and phrases, i.e.

Semantic elements= elements with a meaning. Semantic elements have a simple and clear meaning for both, the browser and the developer.

For example:

In HTML4 we have seen

, etc. are which are non-semantic elements. They don't tell anything about its content.

On the other hand,

, , and
etc. are semantic elements because they clearly define their content.

HTML5 semantic elements are supported by all major browsers.

Why to use semantic elements?

In HTML4, developers have to use their own id/class names to style elements: header, top, bottom, footer, menu, navigation, main, container, content, article, sidebar, topnav, etc.

This is so difficult for search engines to identify the correct web page content. Now in HTML5 elements (

Index Semantic Tag Description
1.
Defines an article
2. Defines content aside from the page content
3.
Defines additional details that the user can view or hide
4.
Defines a caption for a
element
5.
Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.
6.
Defines a footer for a document or section
7.
Specifies a header for a document or section
8.
Specifies the main content of a document
9. Defines marked/highlighted text
10. Defines navigation links
11.
Defines a section in a document
12. Defines a visible heading for a
element
13. Defines a date/time

Some important semantic elements in HTML5

HTML5
Element

HTML

element defines article content within a document, page, application, or a website. It can be used to represent a forum post, a magazine, a newspaper article, or a big story.

Example:

Test it Now

HTML5

The

Contact US

Email:[email protected]

HTML5 Semantics
10/30