HTML Semantic Elements you should know.

In HTML4 when we want to write content by a container in a different part of the web page then we always declare <div> tag. When you declare a lot of <div> tag in an application then you feeling bored. So in HTML5 has a solution of this situation.

The soluation is Semantic Elements, It work likes a tamplate of HTML. HTML5 bring some new tag that gives you vary easy way to coding organized.

Some Examples of Semantic Elements:

  1. <header> Element:

The header element represents a container for introductory content or a set of navigation links. Usually a header tag contained one or more heading element. The header tag also contained logo or icon.

2. <nav> Element:

The <nav> element defines a section of a page whose purpose is to provide a set of navigation links.

3. <Section> Element:

The section tag defines a section in a document. The section tag is used when requirements of two headers or footers or any other section of documents needed. Section tag grouped the generic block of related contents.

4. <article> Element:

The article element defines specifics independent, self-contained content. The article element represents a section of content that forms an independent part of a document or site. For example, a magazine or newspaper article, or a blog entry, formal post.

5. <aside> Element:

The aside element defines some content aside from the content it is placed in (like a sidebar). For example, In magazines you often see info-boxes pulled away from the actual content of the article, highlighting something with relevance to the article such as pull-quotes and when this is the scope of your aside element then it has to be placed inside the article element, because it has a relationship to the content of the article.

6. <footer> Element:

The footer element defines a footer for a document or section. Usually footer elements contained copyright information, contact information, sidemap, related documents.

Conclusion:

All knowledge and info are shared as a learner. Please make correction if anything is wrong.

Thank you..

Front-end web developer