DEV Community

Cover image for HTML div tag explained
Beey
Beey

Posted on

HTML div tag explained

#webdev #programming #beginners #html

The <div> tag in html is simple once you know how to use it properly.

In HTML, the <div> tag is a generic container it does not have any semantic meaning.

The div tag can be used to group things together because this is really messy:


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Webpage</title>
  </head>
  <body>
    <h1>My Awesome Webpage!</h1>
    <h2>A cool webpage</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.       Vivamus blandit luctus pulvinar. Morbi aliquet posuere ex       faucibus commodo. Duis venenatis ac nisl volutpat       porttitor. In sagittis, lacus sit amet lacinia posuere,       velit velit malesuada urna, sed semper elit libero vitae            lacus. Quisque malesuada et lectus vitae elementum.       Vestibulum eleifend, enim eget aliquam pretium, lacus lorem       dictum purus, non rutrum nulla libero nec leo. Curabitur             mollis lacus et justo dictum, in sodales leo tincidunt.             Cras eros massa, congue at porttitor non, placerat et       tortor.
    </p>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

There is no <div> container holding it.

Instead you can wrap it in a <div>.

Here is an example of wrapping 3 basic tags in <div>:


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My webpage</title>
  </head>
  <body>
    <div>
      <h1>My Awesome Webpage!</h1>
      <h2>A cool webpage</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus blandit luctus pulvinar. Morbi aliquet posuere ex faucibus commodo. Duis venenatis ac nisl volutpat porttitor. In sagittis, lacus sit amet lacinia posuere, velit velit malesuada urna</p>
      <p>sed semper elit libero vitae lacus. Quisque malesuada et lectus vitae elementum. Vestibulum eleifend, enim eget aliquam pretium, lacus lorem dictum purus, non rutrum nulla libero nec leo. Curabitur mollis lacus et justo dictum, in sodales leo tincidunt. Cras eros massa, congue at porttitor non, placerat et tortor.</p>
    </div>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

This is cleaner it also shows paragraph splitting but there are still more ways to boost SEO that aren't shown in this page.

However it's better sometimes if you use semantic tags ( <header> <nav> <footer> <main> <article> ) and more semantic tags. <div> is for layout grouping, not meaning.

Top comments (0)