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?
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.
<!-- Relative Metadata -->
<!-- Main content -->
There should only be one <h1> tag per page that reflects the main subject of the content on that page.