Introduction to Semantics tags in HTML5

Before Semantics tags:-

Before HTML5 we put every content in <div>, with HTML5 we got the Semantics tags. These tags represent what tags actually are doing i.e it is adding meaning to the code.
Examples of non-semantic elements: <div> and <span> which tells nothing about its content.

Important Semantics tags include:-

List of Important HTML5 Semantics tags.

<header>: The header usually goes on the top, a lot of times header will contain a logo, it may have a Navigation menu, you may have a search box, etc.

<nav>: The nav is used for Navigation. You may have an unordered list <ul> and or may have a side menu using <aside> which is again unordered and you wrap it under <nav> tag.

<main>: The main is another important tag, which is like the main content of the page or maybe around the whole thing. ( You may write the other tags like <section>, <article>, <aside> inside the <main> tag, which generally means the main content of the page.

<section> : This tag defines a section in a document or a page.
In the section, we can add Introduction, Chapters, News Items and Contact Information.

<aside> : The aside generally means sidebar content i.e content that is not the main focus of the page, it may Ads or Category section for the main blog section or something like that.

<footer> : The footer is generally added at the bottom of the page. It may contain copyright information, contact information, sitemap, related documents, back-to-top links, etc.

List of other Semantics tags include:
<details>
<figcaption>
<figure>
<mark>
<summary>
<time>

I am Full Stack Java Developer @ Tata Strive | Get blogs and tutorials related to the (React | Kafka | DevOps) | Follow me on LinkedIn https://www.linkedin.com

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Going for a Javascript Interview ……..

Express.js and AWS Lambda — a serverless love story

A simple introduction to JavaScript closure in 2 minutes

Building a Serverless React App on Firebase Functions

Routing ionic-react apps

Strapi, GraphQL, Mongoose

Global State Mangement with React useState, useContext hooks and Context API.

[Learning]#15 JS: if else statement

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Sagar Kudu

Sagar Kudu

I am Full Stack Java Developer @ Tata Strive | Get blogs and tutorials related to the (React | Kafka | DevOps) | Follow me on LinkedIn https://www.linkedin.com

More from Medium

Map Accessibility: How to Customize your map for Color Blindness

Create a Balance Reminder with Vonage Account API and Google Apps

Using the twitter API with Node.js (2)

How to automate charts (Canvas Element) using Javascript in selenium (without image comparison)