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.