DEV Community

Israel Rotimi
Israel Rotimi

Posted on

How to write Semantic HTML

#html #webdev #programming #a11y

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: 
<div>logo</div>
<div id="hero">
  <h1 id="main-heading">Topic</h1>
  <h1 id="subheading">Sub Topic</h1>
</div>
<div>
  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.
</div>
<div id="footer">Footer</footer>
Enter fullscreen mode Exit fullscreen mode

With this:

<nav>
  <h3>Logo</h3>
</nav>
<header>
  <h1>Topic</h1>
  <h3>Sub Topic</h3>
</header>
<section>
  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.
</section>
<footer>
  Footer
</footer>
Enter fullscreen mode Exit fullscreen mode

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 🤔,
What am I trying to to achieve?
What is this piece of content going to do?

A guide on which tags to use for what

section Use it whenever you want to group content into sections, e.g, about section, contact section.

small Use when you want to de-emphasize a piece of text.

aside Use when you have content that will be separate from the normal flow of the document.

form Use it to wrap input elements

In conclusion, Everyone can benefit from Semantic HTML and clean descriptive code in general. I hope you found this useful. Let me know in the comments.

I am a full stack NextJS developer and Technical Writer, I'm open to collaboration and discussions.
Cheers.

Top comments (0)