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



    Enter fullscreen mode
    


    Exit fullscreen mode
    




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




    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.