이아 | Nessa Okeke

Posted on Jan 31, 2021

10+ HTML5 Semantic tags with examples.

#html #webdev #semantic

Prerequisite(s)

Basic knowledge of HTML (Hypertext Markup Language), you can get an overview here.

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.

<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.

<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***

<!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***

<!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.
<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.

Ciao!

Vanessa O.

PS: If you're looking to start on your tech career this year, you can download this checklist of 14 careers in tech and see the programming language you should learn first.

DEV Community