Semantic vs Non-Semantic HTML

What is Semantic HTML?

Semantic HTML means using HTML tags that clearly describe their purpose.

For example:

<header>Website Header</header> <nav>Navigation</nav> <main>Main Content</main> <footer>Website Footer</footer>

Just by looking at these tags, we can understand what each part is used for.

Some Common Semantic Tags

  • <header> – Header of a page
  • <nav> – Navigation links
  • <main> – Main content
  • <section> – A section of content
  • <article> – An independent article or blog post
  • <footer> – Footer of a page

What is Non-Semantic HTML?

Non-semantic HTML uses tags that don't clearly describe what the content is.

The most common examples are:

<div> <span>

For example:

<div> <h1>My Website</h1> </div>

The <div> is just a general container. It doesn't tell us whether it is a header, footer, or navigation.

Simple Example

Non-Semantic 

<div class="header"> <h1>My Website</h1> </div>

Semantic 

<header> <h1>My Website</h1> </header>

The semantic version is easier to understand because <header> clearly tells us what it represents.

Advantages of Semantic HTML

Semantic HTML helps us:

  • Make code easier to read
  • Organize our webpage better
  • Improve accessibility
  • Help search engines understand the structure of the page

Easy Rule to Remember

Use semantic tags when they describe the purpose of your content. Use <div> or <span> when you need a general container.

That's the basic idea behind Semantic and Non-Semantic HTML.