10+ HTML5 Semantic tags with examples.
Tags: html, webdev, semantic
Published: 2021-01-31 19:24:24

---
title: 10+ HTML5 Semantic tags with examples.
published: true
description: A soft introduction to HTML5 semantic tags with examples.
tags: html, webdev, semantic
//cover_image: ![Learn HTML](https://dev-to-uploads.s3.amazonaws.com/i/leh1g32nctnipwen11aj.png)
---
#### Prerequisite(s)
- Basic knowledge of HTML (Hypertext Markup Language), you can get an overview  [here.](https://devness.hashnode.dev/learn-html5-in-10-minutes) 


So, if you got started with HTML(Hypertext Markup Language) 10 years ago, you are most likely used to the non-semantic way of writing HTML.

> **Semantic HTML** simply means the markup code is easy to make sense of while you read through. This style of writing uses more descriptive tags like ``<section></section>``, ``<article></article>`` and others, to show the different parts of your website structure in code.

## HTML before the 5
Before HTML5 came along, HTML documents were a mashup of div and span tags:
- ``<div> </div>``: These tags are used to show block level elements ie, each element inside a div tag represents a block of code that can stand alone.
``` html
<div>
    <h4>I am the heading for this section</h4>
    <p>I am the content for this section</p>
</div>
```

- ``<span> </span>``: These tags are used to show inline elements ie, each element inside a span tag represents an inline text or information.
```html
<p>I am an <span>inline element</span></p>
```

The ``div`` tags were used to separate different sections of a HTML document while the ``span`` tags were used for inline elements. However, with this new version of HTML ie HTML5, semantic tags were introduced to takeover and create more readable and accessible HTML documents.

### HTML vs HTML5
#### HTML
*** Sample code***
``` html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>I am the Title of the page</title>
</head>
<body>
    <div class="header">
        <div class="nav">
            <ul id="nav-items">
                <li class="nav-links">
                    <a href="">Home</a>
                </li>
            </ul>
        </div>
    </div>
    <div class="main">
        <h1>I am a heading</h1>
    </div>
    <div class="section">
        <!-- a section here -->
    </div>
</body>
</html>
```

- the ``div`` with class 'header' denotes the header section of the website. This is the part of the website that holds the navigation links (the ``div`` element with the class of ``nav``), the hero of the website and all other things in the 'above-the-fold' section of the website.

- the ``div`` with the class ``main`` denotes the main section of the website. It is this section that holds the main contents of the website.

#### HTML5
*** Sample code***
``` html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>I am the Title of the page</title>
</head>
<body>
    <header>
        <nav>
            <ul>
                <li class="nav-links"></li>
            </ul>
        </nav>
    </header>
    <main>
        <h1>I am a heading</h1>
        <section>
            <p>I am a section title</p>
        </section>
    </main>
    <footer>
        <p>This is the footer</p>
    </footer>
</body>
</html>
```
-  the ``header`` tag denotes the header of the website. It is this section that holds the navigation links in the ``nav`` tags.

- the ``main`` tag holds the main block of your website. Using different ``section`` tags, you can separate different sections of your website.

- the ``footer`` tag is used to show the footer section of your website.

## HTML5 TAGS
- ``<main> </main>`` : This tag specifies the main contents of your HTML document. You would usually add your different ``section`` tags to show the different sections of your page.

- ``<header> </header>`` : This tag shows your readers the topmost part of your website, the introductory section. It typically contains the ``nav`` tags for navigation, some `heading` tags, your logo or site title.

- ``<nav> </nav>`` : This tag holds all the links to your navigation. In longform, this tag means 'navigation'.

- ``<section> </section>`` : The `section` tag is used to group different standalone sections of your website together. For example, you could have a `section` listing all your services, and another `section` listing details about your team.

- ``<code> </code>`` : The `code` tag is used to format text to resemble code blocks. Information inside the `code` tag will be formatted to mono-space type text.

- ``<map > </map >`` : The `map` tag is used create an image map. In an image map, you can set different parts of the image, using the `area` tag, to link to different external or internal pages.  [See example.](https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_areamap)

- ``<mark> </mark>`` : The `mark` tag is used to highlight text. It has a default colour of yellow, but this can easily be changed using **CSS (Cascading Style Sheet).**

- ``<detail> </detail>`` : The `detail` tag helps you to create HTML dropdown effect. This is good for when you want to give the user the option of showing or hiding certain pieces of information. It usually contains a `summary` tag.

- ``<summary> </summary>`` : The `summary` is usually contained inside the `detail` tag. It works as the heading for the details tag. Content inside this tag is usually seen by your website visitors.

- ``<footer> </footer>`` : The `footer` tag is used to define the footer section of your website. Everything inside this tag is usually text or information belonging to the footer section of your page.

## Conclusion
In conclusion, HTML5 tags are better to use for the following reasons:

- **Accessibility:** Screen readers and other disability-aid devices have an easier time reading through semantic tags. This is because the devices can read the `header` tags as headers, the `main` tags as main content e.t.c. This makes your website accessible to a wider range of people and allows accessibility for all.

- **Readability:** Semantic code makes it easier for you, the developer, and your teammates easily read through the codebase and make edits where necessary.

See you next week, I will be writing more on web development and other beginner friendly topics. <br>
Ciao! <br>
Vanessa O.

<hr>

***PS:*** If you're looking to start on your tech career this year, you can download  [this checklist of 14 careers](https://t.co/QhrUnNLVY0?amp=1)  in tech and see the programming language you should learn first.