← Feed
This feels like a naive question but reading about using `div` or not, the reasons I could find in blogs and such were mostly talking about complexity. Which I have experienced and do understand.
What I don't really get though is structurally how do you accomplish layouts then? My (wrong) assumption was that divs were somehow required for this. Using (i think this is the term) semantic elements like header, nav, article, footer you can accomplish a layout.
Right. So how then do I have a two column layout then? as in header and footer sandwiching a 20:80 columnar layout, or similar?
I suppose this is expressed with css and selectors? So then with css, you chose flexbox, grid, or float. On mdn and w3chools I found how these all work but not really why or why not to chose any one of them.
Part of my hangup on this is that I truly want a simple html layout but I also want to understand why it works the way it does. Since ya, I got a nav by some article elements but for example if there are more than one article the alignment shifts past the nav on the second article. Why? In my mind this would be oh because you _also_ need these to be in some container, a div, which appears to be maybe the answer?
Any links or comments would very much be welcome.
#html #css #webDev
Replies (1)
-
@elebertus@eigenmagic.net you can get a better idea at https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements,
the issue with `div` is its over used to give semantic meaning while in reality it's designed to be a shell.
```
As a "pure" container, the element does not inherently represent anything. Instead, it's used to group content so it can be easily styled using the class or id attributes, marking a section of a document as being written in a different language (using the lang attribute), and so on.
The element should be used only when no other semantic element (such as or ) is appropriate.
```
https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/div#usage_notes
Open ##4719512