DEV Community

Cover image for HTML Semantics
Mohamed Yahia
Mohamed Yahia

Posted on

HTML Semantics

Html semantics was introduced in HTML 5 by the introduction of semantic elements. Semantic elements mean elements that have meaning.

Text was divided in elements using the div element. (div, short for 'divider'). Now, there are many other elements that can be used <article>, <section>, <header>, <footer>, <nav> and so much more.

The <b> or bold element is now replaced by the <strong> element.
The <i> or italic element is now replaced by the <emphasis> element.

They are still there, i mean replaced in common modern usage.

div everything, why complicate it?

Well, the introduction of semantics have been of immense benefit.

For starters, search engines are now much better at understanding the context of the webpage. A navigation element might include titles of other topics. Without the element being highlighted as a navigation element by using the element, it would be harder for the search engine to know that the page is not about the titles included in the navigation.

Secondly, webpages with semantic elements have a higher SEO (search engine optimization) score ranking them higher in the search results.

Thirdly, screen readers will be better at reading content, they could skip reading the navigation or start reading the main content only so it's better for accessibility.

Let's look at some of the usage cases of some of the most common semantic elements.

<main>

Image description

<header>

Image description

<footer>

Image description

<aside>

Image description
<section>
Image description

Image description

<article>
Image description

<figure>
Image description

Heroku

Deliver your unique apps, your own way.

Heroku tackles the toil — patching and upgrading, 24/7 ops and security, build systems, failovers, and more. Stay focused on building great data-driven applications.

Learn More

Top comments (0)

Image of Stellar post

Check out Episode 1: How a Hackathon Project Became a Web3 Startup 🚀

Ever wondered what it takes to build a web3 startup from scratch? In the Stellar Dev Diaries series, we follow the journey of a team of developers building on the Stellar Network as they go from hackathon win to getting funded and launching on mainnet.

Read more

👋 Kindness is contagious

Dive into this insightful write-up, celebrated within the collaborative DEV Community. Developers at any stage are invited to contribute and elevate our shared skills.

A simple "thank you" can boost someone’s spirits—leave your kudos in the comments!

On DEV, exchanging ideas fuels progress and deepens our connections. If this post helped you, a brief note of thanks goes a long way.

Okay