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.

At Online Learner, we're on a mission to ignite a passion for learning and empower individuals to reach their full potential. Founded by a team of dedicated educators and industry experts, our platform is designed to provide accessible and engaging educational resources for learners of all ages and backgrounds.

Terms Disclaimer About Us Contact Us