Semantic HTML: For beginners Part 1

Imagine you're a beginner at HTML, and because you want a quick nonfunctional traveling app you write this in the body:

<div id="App">
   <h1>Traveling App</h1>
   <h2>Easier to travel than ever</h2>
   <button>Book your flight today</button>
   <p>&copy;2026-2027 Traveling App All Rights Reserved.</p>
 </div>

This is not Semantic and will not boost SEO.

The semantic version(Assuming you have Tailwind installed) would be:

<div id="App" class="text-center">
  <header>
    <h1 class="font-bold text-left">Traveling App</h1>
    <h2 class="text-left">Easier to travel than ever</h2>
  </header>
  <main>
    <button class="mt-4">Book your flight today</button>
  </main>
  <footer>
    <p><span class="font-bold">&copy;</span>2026-2027 Traveling App All Rights Reserved.</p>
  </footer>
</div>

This is Semantic And will boost SEO.

Remember:

• the header tag is for the webpage title and subtitle.
• the main tag is for the main content in the webpage.
• the footer tag is for copyright information or license information(If your app is running under a license).

It is also important to remember that the div tag is not semantic.