So im watching a Youtube tutorial and at the end of the HTML series, he posted a full web page to do as an exercise. before watching the video or his code, i saw the base web page design and decided to write the html file myself, using semantic elements as much as possible.
after i finished mine, i saw his code and was confused. he used a lot of divs and things like sections for quotes, which i thought is unnecessary.
so… here’s the two codes… both in code pen. his has the CSS, mine isnt done yet. but im bothered about the html part only.
please tell me if i improved the code or did much much worse, and how…
It looks like most of the divs he is using is purely for styling and organizational purposes.
like the wrapper div and logo divs.
As for the quotes, yes it would be better to use the blockquote there instead.
But also, that is not all to uncommon. I have been in codebases where paragraph elements are used instead.
I think both of your approaches are pretty similar and there isn’t a clear “this one is 10x better” or “10x worse” situation.
I think you did a good job for your first web page
The key takeaway is to continue to think through the markup and use appropriate elements for the appropriate situations.
But it is also important to remember that you will see many different approaches to markup for the same page and there are multiple ways to go about it.
Nothing in his example jumped out at me that screamed “OMG what is that?” or “what in the div soup is going on”
both of your approaches were readable and understandable
Without the CSS, it can be hard to know just how many containers/wrappers you will actually need. If you are experienced, you can usually mark up the page and know ahead of time how many elements you will need. But most often you end up adding or removing layout containers as you start to implement the design in CSS. It also depends on the technique used, for example with CSS grid you can sometimes skip a few containers you might have needed if using Flexbox (maybe, maybe not).
