HTML Semantic Elements

HTML semantic elements are the HTML tags that provides structure and meaning to the content of a web page. It helps both the browser and developers to understant the purpose of the content enclosed in it. These elements are cruicial for accessibility, SEO (Search Engine Optimization) and maintainability.

Following are some common HTML semantic elements:

<header>
<nav>
<main>
<footer>
<section>
<article>
<aside>
<h1> - <h6>
<p>
<figure>
<figcaption>

HTML <header> Element

The <header> element defines the header section of a document or a section that contains headings, logo or navigation links.

<header>
    <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
            <li><a href="#">Blog</a></li>
        </ul>
    </nav>
</header>

HTML <nav> Element

The <nav> elements are use for navigation links in a web page.

<nav>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">Blog</a></li>
    </ul>
</nav>

HTML <main> Element

The <main> element is defines the main content of a web page.

<main>
  <section>
    <h1>Welcome to our website</h1>
    <p>This is a sample website.</p>
  </section>
  <aside>
    <p>This is a sidebar.</p>
  </aside>
</main>

HTML <footer> Element

The <footer> element is used for defining the footer of a web page.

<footer>
    <p>Copyright © 2024. All rights reserved.</p>
    <p>Designed and developed by Vaibhav Goswami.</p>
</footer>

Previous Next