Semantic Elements

HTML semantic elements are tags that clearly describe their meaning in a human- and machine-readable way. They help structure the content of a webpage more logically and improve accessibility and SEO. Here’s an overview of some common semantic elements and examples of how they’re used:

<header>
Represents introductory content or a set of navigational links. It typically contains elements like logos, headings, or navigation menus.

<header>
    <h1>My Website</h1>
    <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>

<nav>
Defines a set of navigation links. It’s used to group navigation links into a cohesive section.

<nav>
    <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#services">Services</a></li>
        <li><a href="#contact">Contact</a></li>
    </ul>
</nav>

<article>
Represents a self-contained piece of content that could be distributed independently. It could be a blog post, news article, or any other standalone content.
```
<article>
    <h2>My First Blog Post</h2>
    <p>Welcome to my first blog post. Here I will share some interesting thoughts...</p>
</article>
```
<section>
Represents a thematic grouping of content, typically with a heading. It’s used to break content into different sections.
```
<section>
    <h2>About Us</h2>
    <p>We are a company that specializes in...</p>
</section>
```
<aside>
Represents content that is tangentially related to the content around it, such as sidebars or pull quotes.
```
<aside>
    <h3>Did you know?</h3>
    <p>We offer a wide range of services...</p>
</aside>
```
<footer>
Represents the footer of a section or page. It usually contains information like copyright notices, contact information, or related links.
```
<footer>
    <p>&copy; 2024 My Website</p>
    <a href="#privacy-policy">Privacy Policy</a>
</footer>
```
<main>
Represents the dominant content of the <body>. There should be only one <main> element per document. It’s used to encapsulate the core content of the page.
```
<main>
    <h1>Welcome to My Website</h1>
    <p>This is the main content of the webpage...</p>
</main>
```

<figure> and <figcaption>
Used for grouping media content (like images or videos) and their captions.

<figure>
    <img src="image.jpg" alt="A beautiful landscape">
    <figcaption>A beautiful landscape.</figcaption>
</figure>

Using these semantic elements helps create a more readable and maintainable HTML structure, which benefits both users and search engines.

Written by Shaikh Abdul Shahid

A Full-Stack Developer with experience in PHP, Laravel, JavaScript, and React.
Founder of Online Learner, sharing practical knowledge and programming tutorials.
Building and maintaining real-world web applications since 2017.

0 likes

Your Feedback

Help us improve by sharing your thoughts

Previous: HTML Semantic Elements

Next: HTML Forms

Online Learner helps developers master programming, database concepts, interview preparation, and real-world implementation through structured learning paths.

Semantic Elements

Written by Shaikh Abdul Shahid

Your Feedback

Quick Links

Company