Article on Semantic

These are the elements having meaning. These elements are telling about the content inside the tag.  Lots of semantic elements are introduced from HTML 5. 

<div> and <span> are non-semantic elements, we can not predict the content inside the element. On the other hand elements like <form>, <table> and <video> tells us about type or category of content inside it. In this unit, we will lean the following mainly used semantic elements instead of the generic <div> tag. 

• <section>
• <article>
• <header>
• <footer>
• <nav>
• <aside>
• <figcaption>
• <figure>

<section>

This elements represent section in a webpage.  In the section heading tag should be included a child of the section tag. <div> is a generic container tag, <section> tag should not be used like <div> .  You can also use <article> tag for separate content inside <section> . 

<article>

This is a semantic tag used for representing blog post, news, forum post in a webpage. Appropriate heading is provided by heading tags <h1> to <h6> inside article tag. 

<header>

This tag contains primary contents like logo, navigational link, search, author details etc. 

<footer>

This tag contains data like copyright details, author name and generally placed at the bottom of its root element. 

<nav>

The purpose of this element is to provide navigation links. 

<aside>

This element provides the proper way to introduce sidebar in a document which holds content indirectly related to main document content. 

<figure>

This element holds an image inside it. It is having <img> tag as child element. 

<figcaption>

This is a dedicated tag used for displaying the caption of the image.