DEV Community

Beey
Beey

Posted on

Semantic HTML: for beginners part 2

#webdev #beginners #html #programming

Imagine you want a quick blog for an app and you write this:


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Blog app</title>
  </head>
  <body>
    <div id="App">
      <header>
        <h1>Blog</h1>
        <h2>John Doe's blog</h2>
      </header>
      <main>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus blandit luctus pulvinar. Morbi aliquet posuere ex faucibus commodo. Duis venenatis</p>
      </main>
      <footer>
        <p>&copy; 2026-2027 Blog app All Rights Reserved.</p>
      </footer>
    </div>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

However there is still a way to boost SEO even more.

Wrap the paragraph in the <article> tag

An example of how a wrapped paragraph in an article tag would work:


<article>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus blandit luctus pulvinar. Morbi aliquet posuere ex faucibus commodo. Duis venenatis</p>
</article>
Enter fullscreen mode Exit fullscreen mode

TIP: remember to wrap your blogs in articles!

If you have any questions, feel free to ask them in the comments!

Top comments (0)