How to write Semantic HTML

Hi there, I bet HTML was one of the first languages you learned. But how many times have you given thought as to using a sectioninstead of a div? In this article we'll explore why Semantic HTML is so important and how to write it. What is Semantic HTML What do we mean by Semantic It simply means 'meaningful'. Writing HTML that meaningful to both humans and computers. If someone viewing your HTML code can't tell what pieces of markup are for without comments, then it's probably not Semantic. Why Semantic HTML Here are a few reasons Semantic HTML is the standard recommended by W3C It is better recognized by browsers and can benefit from default styling. It is better interpreted by screen readers It increases accessibility It gives our code structure, for instance, compare this: logo Topic Sub Topic Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et eligendi dolorum explicabo, earum atque accusamus sequi quo, excepturi fugiat totam repellat incidunt harum magni dignissimos dolores neque a ab autem. Footer With this: Logo Topic Sub Topic Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem consectetur qui rerum, tenetur corporis ex explicabo omnis quam, earum expedita ipsam pariatur natus illo, officiis! Corporis, reiciendis unde deserunt facilis. Footer give me feedback in the comments. Some Semantic Tags Here are some semantic HTML Tags for everyday use: nav section form header footer aside p small and so on... How to write Semantic HTML To write Semantic HTML, you just need to be more thoughtful. Before you wrap that piece in a divand throw CSS at it, think

May 3, 2025 - 11:36

Hi there,
I bet HTML was one of the first languages you learned.
But how many times have you given thought as to using a sectioninstead of a div?
In this article we'll explore why Semantic HTML is so important and how to write it.

What is Semantic HTML

What do we mean by

Semantic

It simply means 'meaningful'.
Writing HTML that meaningful to both humans and computers.
If someone viewing your HTML code can't tell what pieces of markup are for without comments, then it's probably not Semantic.

Why Semantic HTML

Here are a few reasons

Semantic HTML is the standard recommended by W3C
It is better recognized by browsers and can benefit from default styling.
It is better interpreted by screen readers
It increases accessibility
It gives our code structure, for instance, compare this:

logo
 id="hero">
   id="main-heading">Topic
   id="subheading">Sub Topic



  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Et eligendi dolorum explicabo,
earum atque accusamus sequi quo,
excepturi fugiat totam repellat incidunt
harum magni dignissimos dolores neque a ab autem.

 id="footer">Footer

With this:


  Logo


  Topic
  Sub Topic


  Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
  Voluptatem consectetur qui rerum,
  tenetur corporis ex explicabo omnis quam,
  earum expedita ipsam pariatur natus illo,
  officiis! Corporis, reiciendis unde deserunt facilis.


  Footer

give me feedback in the comments.

Some Semantic Tags

Here are some semantic HTML Tags for everyday use:

nav
section
form
header
footer
aside
p
small
and so on...

How to write Semantic HTML

To write Semantic HTML, you just need to be more thoughtful.
Before you wrap that piece in a divand throw CSS at it, think