Can you use mostly div elements, or is this highly discouraged?

I did a tutorial a couple of days ago to learn to use VS Code and it was just constructing an HTML and CSS page. The instructor used a lot of ul and li elements, along with several section elements, and a footer element. He also floated many of the elements. I normally mostly use div elements and flexbox. Is one approach better than the other? Thanks for any help and have a great day!

Btw, I am up to the Front End projects section and mostly use React, Redux, and a bunch of divs.

You should use the semantically correct tags for your content. This especially helps with accessibility. So if you have a list then it should be coded as a list. If you are using divs for lists and such then you are doing it wrong.

The div tag is a generic element that can be used when no other tag is appropriate. Generally, it is used to group other elements together for styling purposes. If there is a better (more specific) tag to use (such as <footer> for the footer on your page) then you should use the more specific tag. That doesn’t mean you can’t wrap the <footer> element with a div if you needed to. The important thing is that the footer content is in a <footer> tag.

Using purely floats for layouts is pretty much out of style now when we have much more powerful layout mechanisms like flexbox and grids. It can be done for simple layouts but I wouldn’t recommend it for more complex layouts. Maybe there was a reason the instructor was using floats? Without seeing the tutorial I can’t comment on that.

1 Like

Thanks a lot for your help! I’ll take a more semantic approach.

It is an old tutorial from years ago, so that’s why he was probably using floats.