HTML Semantic Structure

HTML is not about using div in every tag. Get used to using HTML semantic elements from the beginning. HTML5 semantic elements help structure the code we create, making it more readable and easier to maintain. They help us think about the structure of our dynamic data, and to choose titles’ hierarchy properly.

What is HTML Semantic Structure?

A semantic element clearly describes its meaning to both the browser and the developer. Many websites contain HTML code to indicate navigation, header, and footer. So basically each section of the page has its own HTML tag. The elements clearly describe its meaning & help increase accessibility.

<div class=”footer”></div> ❌

<footer></footer>✅

Semantic Tags

• <header>
• <footer>
• <aside>
• <main>
• <nav>
• <section>

Why Semantic Tags?

• They are machine and human-readable.
• Increase SEO score, as Search crawler knows part of the page they are crawling
• Good for accessibility.

Let’s look at some Semantic HTML structure elements 👇

<header>

The <header> element represents a container for introductory content or a set of navigational links.

<aside>

The <aside> element defines some content aside from the content it is placed in (like a sidebar). The <aside> content should be indirectly related to the surrounding content.

<main>

The <main> tag specifies main content of the HTML document. The content inside the <main> element should be unique to the document. It should not contain any content that is repeated across documents such as sidebars, navigation links, copyright information, site logos, and search forms.

<nav>

The <nav> element defines a set of navigation links.

<section>

The <section> element defines a section in a document. A section is a thematic grouping of content, typically with a heading. A web page could normally be split into sections for introduction, content, and contact information.

// Basic Structure <header> <h1>Semantic Tags In HTML</h1> </header> <section> <article> <h3>29 May 2021</h3> <p>This is a thread</p> </article> </section> <footer> <h3>© LOL </h3> </footer>

List of semantic elements in HTML5 : <header> <article> <aside> <details> <main> <mark> <nav> <section> <figure> <figcaption> <time> <summary> <footer>

<header>: It contains introductory tags like - <h1>...<h6> - <p> - logo - author's name, etc.

<nav> : It contains navigation links like - menus - tables of contents - index

<section>: the basic purpose of a section tag is to group content together. It defines sections in a document like chapters, headers and footers.

<aside> : This element contains a portion of a document and is generally placed on right/ left sides of a website. It may me a callout or an advertisement, etc. Eg: related articles on a blog website

<article> : We use article element in such a way that it's reusable independently. Eg: similar posts on a website or a blog entry. You can say that <section> and <article> can replace <div> if you use semantic tags.

<footer> : You know it already. It contains basic details about a website like : - Made by {author} - Other related links - Copyright data - Contact