Semantics Tags in HTML
Tags: webdev, html, programming, productivity
Published: 2023-08-09 18:48:07


# What are HTML Semantics?
HTML semantics refer to the practice of using HTML tags in a way that conveys meaningful information about the content they enclose.  Semantic HTML emphasizes on providing structure and context to a website. By using the right semantic tags, developers can better describe the making it easy for both humans and machines to understand the content's significance.

**Examples of non-semantic elements:** `<div>` and `<span>` - Tells nothing about its content.
**Examples of semantic elements:** `<form>`, `<table>`, and `<article>`- Clearly defines its content.



## Why do we use them?
•	**Code Readability:**
Semantic HTML enhances the readability and maintainability of code. The use of semantic tags in our code allows our code to make more sense and as our project grows, it helps us orient ourselves.
•	**Makes our site more accessible:**
Semantic HTML tags have imbedded accessibility constructs that enable users with disabilities to make use assistive technologies such as screen readers and screen magnifiers.
•	**Content Organization:**
Semantic HTML helps in organizing the content of the site in a meaningful order with the use of appropriate tags. Developers can structure the content hierarchically, making it easier for users to grasp information



### HTML Semantic elements

|  Tags   | Explanation  |
|------------|----------|
|article |The <article> element specifies independent, self-contained content. |
|nav | The <nav> element defines a set of navigation links. |
|aside| The <aside> element defines some content aside from the main content it is placed in (like a sidebar).|
|section| It represents the section of the document. |
|details| It specifies the tag for additional details.|
|header| The <header> element represents a container for introductory content or a set of navigational links.|
|footer| The <footer> element defines a footer for a document or section|
|main| This specifies the main page content and should be unique|
|summary| This specifies a header for the <details> element.|
|mark| This specifies the text that is highlighted.|



### Examples and when they are used



•	**Article:**

```
<body>
    <article>
        <h1>Article Title</h1>
        <p>This is the content of the article.</p>
        <p>It can have multiple paragraphs and other elements.</p>
    </article>
</body>
```
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bgyher540tt3qgco2r9z.png)
The <article> element is used to explain a self-contained piece of content, like a blog post or news article.



•	**Header and Nav:**
  

```
<body>
    <header>
        <h1>Website Title</h1>
        <nav>
            <ul>
                <li><a href="/">Home</a></li>
                <li><a href="/about">About</a></li>
                <li><a href="/contact">Contact</a></li>
            </ul>
        </nav>
    </header>
</body>
```
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tz07sm3c5vhoua36ylok.png)

The <header> element is used to define the header section of a webpage, typically containing the site's title, logo, and main navigation and the <nav> element represents a navigation menu and contains links to different sections or pages of a website.

•	**Aside:**

```
<body>
    <aside>
        <h2>Related Articles</h2>
        <ul>
            <li><a href="/article1">Article 1</a></li>
            <li><a href="/article1">Article 2</a></li>
        </ul>
    </aside>
</body>
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/udh3jx8ubwfaqdhhyp68.png)



  
The <aside> element is used for content that is not related to the main content but provides some information.



•	**Details and Summary:**

```
<body>
    <details>
        <summary>Click to expand</summary>
        <p>Hidden content revealed when the details are expanded.</p>
    </details>
</body>
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oruyeqtq0hvprw5gi2be.png)



  
This element allows us to create accordions. It's particularly useful for displaying a list of items, conserving screen space and providing a neat way to organize and present information.



•	**Footer:**

```
    <p>Contact us at contact@example.com</p>
    <nav>
        <ul>
            <li><a href="/privacy">privacy Policy</a></li>
            <li><a href="/terms">Terms of Service</a></li>
        </ul>
    </nav>
</footer>
```
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m2pja5o75uuxlzqp9sd2.png)

The <footer> element represents the footer section of a webpage, typically containing contact information, copyright notices, and secondary navigation.



•	**Main:**

```
    <main>
        <h1>Main Content</h1>
        <p>This is the main content of the webpage.</p>
    </main>
</body>
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gxpbic7e7lia0z9f49xk.png)
  
The <main> element is used to define the main content area of a webpage, excluding headers, footers, and sidebars. There can only be one main element on the page.





### Sample layout:
 

```
<html>

<head>
    <title>Semantic HTML layout</title>
</head>

<body>

    <header>

    </header>

    <main>

    </main>

    <footer>

    </footer>

</body>

</html>
```



By using the appropriate semantic elements, web developers can create more meaningful and well-organized documents for both humans and assistive technologies.