What Are Semantic Tags?

Semantic tags describe the purpose of content. They help browsers, search engines, and other developers understand your page structure.

Common Semantic Tags

<header>     Top area of a page  
<nav>        Navigation menu  
<main>       Main content  
<section>    A grouped section of content  
<article>    Independent content  
<aside>      Sidebar or extra info  
<footer>     Bottom of the page  
      

Basic Semantic Layout

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

<nav>
  <a href="#">Home</a>
  <a href="#">Tutorials</a>
</nav>

<main>
  <section>
    <h2>Welcome</h2>
    <p>This is my site.</p>
  </section>

  <article>
    <h2>Blog Post</h2>
    <p>Cool article...</p>
  </article>
</main>

<footer>
  <p>2025 CodeTweakrs</p>
</footer>
      

Why Use Semantic Tags?

• Improves SEO (Google understands your page better)
• Makes your site easier to maintain
• More accessible for screen readers
• Cleaner structure than random <div> spam

HTML5 vs Old Layouts

Before semantic tags, everything was built using divs. HTML5 added meaning — now pages have real structure.

	<!-- Old structure -->
	<div id="top"></div>
	<div id="menu"></div>
	<div id="content"></div>
	<div id="footer"></div>

	<!-- New semantic structure -->
	<header></header>
	<nav></nav>
	<main></main>
	<footer></footer>
	

Full Example: Simple Webpage

<header>
  <h1>CodeTweakrs</h1>
</header>

<main>
  <article>
    <h2>Learning HTML</h2>
    <p>Semantic tags make everything clear.</p>
  </article>
</main>

<footer>
  <p>Built with ❤️ in Bulgaria</p>
</footer>
      

What’s Next?

Next you’ll learn the basics of asynchronous JavaScript — how code can run in the background without blocking the page.