An Overview to Semantics in HTML5

The semantic HTML structure is one which tells how is HTML used on web pages. The proper presentation of HTML elements on the web page is explained by this. Semantics is required that is it is easy to communicate with the non-programmer as well. 

By the use of semantic tags, we actually provide the additional information to the document that is being built. It provides proper and complete information on the workflow of the content that is displayed.

Learning core concepts like semantic tags is really important for every learner pursuing any HTML & CSS3 course.

Semantics has been divided into four different categories:

• First one is - Document structure tags
• Secondly, Textual meaning tags
• Then, Media type tags
• The last one is Correlation tags

Now, firstly we will see Document Structure Tags:

•         header: It is used to show the header content of the webpage such as logo, navigation bar etc.

•         footer: It is used to show footer content of the webpage such as copyright details, navigation links, contact information, etc.

•         main: It is used to show the unique content of the webpage.

•         nav: It is used to show the navigation bar buttons. It is mainly used in header or footer or in aside element

•         section: It is used to divide the page into sections or chapters

•         aside: It is used to show that there is some more content related to the website but not directly to that page.

•         article: It is used to write the blog or article in this tag.

Now, secondly, we will discuss about Textual Type Tags:

•         h1 to h6: These tags are used to highlight the title or content.

•         strong: This helps in making the content bold and standout about other content.

•         mark: It is used as a highlighter.

•         cite: It is used to mark the original content

•         blockquote or q:  Both these are used when text is directly related to the quotation

•         time: It is used to tell the time.

Thirdly we will discuss Media Type Tags:

•         audio: It is used to attach audio to the page.

•         video: It is used to attach the video to the content

•         picture: It is used to pick the best picture among so many on the web browser on the basis of the media query.

Lastly, we will discuss Correlation Tags:

•         ul: Used to highlight the starting of an unordered list

•         figure and figcaption: It is used to insert a figure. It is usually paired with figcaption to caption the image as well.

Conclusion:

Hello, my name is Paras Puri. I’m pursuing Graphics MasterPlus course from ADMEC Multimedia Institute. This blog is one of the parts of my HTML & CSS3 projects.

I hope my blog will be useful to you. And it also explains all the semantics of HTML clearly. Since they are a vital part of HTML coders and very helpful for web designers.