What Are HTML5 Semantic Elements?

HTML5 semantic elements are specific HTML tags that define the meaning and structure of content on a web page. They provide additional meaning to the content they wrap around, beyond just the visual presentation, and help search engines, assistive technologies, and other web applications to better understand and process the page.

Here’s a list of HTML5 semantic elements and their usage:

<header>:

This element is used to represent the header of a document or section. It typically contains introductory content such as the title, logo, and navigation links.

<header>
  <nav>
    <ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#about">About</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
  </nav>
  <h1>Welcome to my website</h1>
</header>

<nav>:

This element represents a section of a page that contains navigation links, usually to other pages within the same website.

<header>
  <nav>
    <ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#about">About</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
  </nav>
</header>

<main>:

This element represents the main content of a document, and should only be used once per page. It should not include content that is repeated across multiple pages such as headers, footers, or navigation links.

<main>
  <h2>About Me</h2>
  <p>I am a web developer with a passion for creating beautiful and functional websites.</p>
  <p>I have experience with HTML, CSS, and JavaScript, and I am always looking to expand my skills and knowledge.</p>
</main>

<article>:

This element represents a standalone, self-contained piece of content, such as a blog post, news story, or forum thread. Each <article> element should be able to be independently syndicated or distributed without losing its context or meaning.

<article>
  <h2>My latest blog post</h2>
  <p>In this post, I will be discussing the latest trends in web development and how to stay up-to-date in this ever-changing field.</p>
  <p>Some topics I will cover include responsive design, CSS frameworks, and JavaScript libraries.</p>
</article>

<section>:

This element represents a standalone section of content that has a thematic grouping of content, such as chapters, headings, or groups of paragraphs.

<section>
  <h2>Introduction</h2>
  <p>Welcome to my website! Here, you will find information about my background, skills, and projects.</p>
</section>

<section>
  <h2>Skills</h2>
  <ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
  </ul>
</section>

<aside>:

This element represents content that is tangentially related to the main content and is typically displayed in a sidebar or aside area.

<main>
  <h2>About Me</h2>
  <p>I am a web developer with a passion for creating beautiful and functional websites.</p>
  <p>I have experience with HTML, CSS, and JavaScript, and I am always looking to expand my skills and knowledge.</p>
</main>

<aside>
  <h3>Recent projects</h3>
  <ul>
    <li><a href="#">Personal website</a></li>
    <li><a href="#">E-commerce site</a></li>
    <li><a href="#">Portfolio website</a></li>
  </ul>
</aside>

<footer>:

This element represents the footer of a document or section, and typically contains information such as the author, copyright information, and links to related content.

<footer>
  <p>Copyright © 2023 My Website</p>
  <p>Created by neha</p>
</footer>

<figure>:

This element represents a self-contained piece of content that is typically displayed along with a caption or legend, such as an image, illustration, diagram, or table.

<figure>
  <img src="image url" alt="alt text" />
 <figcaption> This is </figcaption>

</figure>

<figcaption>:

This element represents the caption or legend for an <figure> element. It should be used within an <figure> element and should provide a description of the content within the <figure> element.

[responsivevoice_button]

What Is Tailwind CSS? How To Install Via npm?

How To Handle CSS Precedence When Using React And CSS Classes?