Before the introduction of semantic HTML, developers used divs to arrange content. Div elements have no meaning on their own. They only provide a way to apply styles and arrange content.
The word semantic means relating to meaning. Semantic HTML elements describe the purpose of their content. They provide meaning to the developer, user, search engines, and assistive technologies. Here is a list of popular semantic HTML tags you can use in your next project.
What Are Divs?
In HTML, the div (division) element is a block-level container. You use a div to group or divide HTML elements into sections on a web page. The syntax is as shown below:
<div>
</div>
Benefits of Using Semantic HTML Elements Over Divs
HTML5 introduced semantic HTML elements to make it easier to read code. Semantic elements provide meaning and structure to web content.
They make your code understandable to other developers. They also make it easier for search engines to find your content and drive traffic to your site. Here are some semantic elements you can use in your HTML and CSS projects.
1. <header>
The <header> tag defines the header section on a document. Typically, it contains the site logo, navigation, and the title of the page. It is the section that appears on top of a webpage. You can customize the header according to your need. The syntax is as follows:
<body>
<header>
<h1> Hi There!</h1>
<p>I am a header</p>
</header>
</body>
2. <nav>
The <nav> tag contains the navigation links for the website. These can be menus, tables of contents, or indexes. It's usually placed within the <header> tag. The syntax is as follows:
<header>
<nav>
<ul>
<li>My website links</li>
<li><a href="#"> Home</a> </li>
<li ><a href="#"> About Us </a></li>
</ul>
</nav>
<h1>The above is navigation part of my website.</h1>
</header>
On the browser it will look like this:
You can use CSS layout models such as CSS flexbox to align the <nav> elements on your webpage.
3. <main>
The <main> tag contains the main content of the web page. It separates the content from the header, sidebar, and footer. The main represents the dominant content of the <body> section.
<body>
<header>
<title> Website facts </title>
</header>
<main>
<p> This website is a short demonstration of how the main tag works.</p>
<p> It encloses the part of the website with useful content.</p>
</main>
<footer>
<h3> This is a footer </h3>
</footer>
</body>
It appears like this:
4. <article>
Use the <article> tag to define self-contained sections in a document or website. For example, you can use them to structure blog posts, magazines, or product cards. The <article> element can enclose other elements including other articles, sections, and headings. The enclosed elements should relate to the article topic.
<article>
<h1>Stranger Than Fiction</h1>
<article>
<h3>Introduction</h3>
<p>The events and persons naratted in this book are fictitious.</p>
</article>
<article>
<h3>Chapter One</h3>
<p> The day was bright and the sun smiled from the sky</p>
</article>
</article>
It appears like so:
5. <aside>
The <aside> tag contains the content related to the main content. Use this tag to create sidebars for quotes, comments, or shout-outs. <aside> highlights information that the reader might miss. It stands out from the rest of the content.
<!DOCTYPE html>
<html>
<style>
body{
background-color:#abdbe3;
}
aside {
width: 30%;
padding-left: 0.5rem;
margin-left: 1rem;
flex:left;
box-shadow: inset 5px 0 5px -5px green;
font-style: italic;
color: red;
}
aside > p {
margin: 0.5rem;
</style>
<body>
<main>
<h1> Weaver Birds</h1>
<p>Ploceidae is a family of small passerine birds. Many of which are called weavers, weaverbirds, weaver finches and bishops.</p>
<aside>
<p>Kingdom: Animalia
Phylum: Chordata</p>
</aside>
<p>In most recent classifications, Ploceidae is a clade, excludes some birds that have historically been placed in the family.Some of the sparrows, but includes the monotypic subfamily Amblyospizinae.</p>
</main>
</body>
</html>
6. <section>
The <section> element contains a part of the page with no specific semantic element. Sections may have a heading to introduce the content and enclose other HTML elements. <section> represents the components of a webpage like chapters in a book or blog.
<!DOCTYPE html>
<html>
<body>
<h1>The Bible</h1>
<section>
<h2>Introduction</h2>
<p>The Bible is a collection of religious scriptures sacred in Christianity, Judaism, Samaritanism. The Bible is an anthology – a compilation of texts of a variety of forms – originally written in Hebrew, Aramaic, and Koine Greek.</p>
</section>
<section>
<h2>Chapter one:Genesis</h2>
<p>The Book of Genesis is the first book of the Hebrew Bible and the Christian Old Testament. Its Hebrew name is the same as its first word, Bereshit. Genesis is an account of the creation of the world, the early history of humanity, and of Israel's ancestors and the origins of the Jewish people</p>
</section>
</body>
</html>
It appears like so:
7. <figure>
The <figure> element encloses self-contained illustrations like images or diagrams. These illustrations reference content on the main page. The figures come with captions specified by the <figcaption> element. The <figcaption> explains what the image is about. The <figure>, <figcaption>, and the content represent a single unit.
<!DOCTYPE html>
<html>
<body>
<main>
<section>
<h1>Parts of a Computer</h1>
<p> There are several parts that work together to make up a computer</p>
<figure>
<img src="some-url.jpg" alt="computer mouse">
<figcaption>This is a computer mouse</figcaption>
</figure>
</section>
</main>
</body>
</html>
You can go further and learn how to create responsive images in HTML.
8. <footer>
The <footer> HTML element encloses information at the bottom part of the webpage. It is the opposite of the <header> element. The <footer> may contain information about the owner of the page. This includes copyright data or links to additional information of the site.
<!DOCTYPE html>
<html>
<body>
<main>
<section>
<h1>Parts of a Computer</h1>
<figure>
<img src="some-url.jpg" alt="computer mouse">
<figcaption>This is a computer mouse</figcaption>
</figure>
</section>
</main>
<footer>
<p> Manufactured by ComputerTech © 2023</p>
</footer>
</body>
</html>
The above code adds a footer to the Parts of a Computer page as shown in the following image.
Why Use Semantic HTML Elements?
Using semantic HTML elements gives context to the code. Anyone looking at the code could easily understand it. The tags make it easier to style elements and collaborate on projects.
You can use semantic HTML with frontend libraries and frameworks. Most modern web browsers prefer semantic HTML elements over traditional elements. Start using semantic HTML and watch your code look modern, readable, and presentable.