Semantic elements are the TAGS which have both meaning to the browser and developer. In other words, semantic elements are the tags in plain English which says what it does.

EXAMPLE CONSIDER <div> and <span> which says nothing about what they do or what they are to a normal person. They are non-semantic elements.

On the other hand, elements like <form> and <table> tells what they are and do exactly the same thing. They are semantic elements.

Some of the Semantic elements with their brief descriptions are -

• <article>- It specifies some content on the website. Used to wrap an article like a blog post on the SITE.
• <section>- It specifies some section in article. An article can have many paragraphs and they should be wrapped in section tag.
• <header>- It specifies the header section in the website. It is use to wrap the content, which will form the header for the site.
• <footer>- It specifies the footer section of the website. Generally contains the contact us, copyright information.
• <nav>- It is used to wrap all Navigation part of your website. All the navigation links should be put here.
• <aside>- It is used to wrap all the content of the website, which will be in the sidebar. In most websites sidebar contains advertisements and aside can be used to wrap them.
• <main>- It specifies the main content of the website. It will wrap all your articles and other section.
• <figure>- It is used to wrap an image tag and convey the message that the following contains images. It is generally used with fig caption tag.
• <figcaption>- It is used inside a figure tag along with image tag and is used to specify the caption.

Below is an example of a website created using semantic elements.

Save the above code as demo.html and open in any browser.