Question About Good Practice

Language Help HTML
1

I’m currently undertaking the Full Stack Engineer course and after a few steps into front-end development, I wanted to ask the following: Inspecting many websites with Chrome DevTools, I notice that every page utilises the div tag. I understand that the div tag does nothing but help target an element or a set of elements to style them in CSS.

My initial code structure is usually html - head - header - body - footer. I usually transition from section to section with an h1 tag, for example h1 This is the first section h1 then a p tag with maybe some images and what not and then moving on to the next section with the next h1 tag. I don’t find myself using the div tag. Should I start using it since almost all the websites utilise it or? Is it a matter of “semantic” html? What’s the best way to use div?

2

Hi, there!

Welcome to the forums!

First on the part of <div>

When I first started—not that long ago, mind you—I thought it best to avoid divs. But then I started using <section> for everything and getting confused about when to use <article>. This is where the <div> element causes confusion, as a lot of people say, “Don’t use divs! Don’t use divs!” However, the correct thought should be, don’t use divs in place of semantic elements.

If I have an article that will implement grid or flex to cover both sides of the screen and all of the information is relative content, there isn’t really a need to “section” different parts. There’s only a visual difference and no semantic meaning, so <div> is totally acceptable.

Looking at Codecademy’s page, you can see that there are a lot of <div>s, but they’re being used as wrappers and semantic HTML is still being implemented.

Now on to other notes I’d like to make

This structure would be incorrect because the <header> and <footer> elements are outside of the <body>. The <header> and <footer> represent actual content being displayed on the webpage, so you want to make sure that any elements representing content are nested in the body.

<!DOCTYPE html>
<html>
  <head>
    <!-- Relative Metadata -->
  </head>
  <body>
    <header></header>

    <main>
      <!-- Main content -->
    </main>

    <footer></footer>
  </body>
</html>

There should only be one <h1> tag per page that reflects the main subject of the content on that page.

2 Likes