Discussion on: Stop using so many divs! An intro to semantic HTML

[Ken Bellows]

In my example above, which is meant to be a mass-text article, I'd probably put the prose into <p> tags to mark the paragraphs. But you don't necessarily have to, you certainly could just put your text inline there, though I'd only recommend that if it's a single paragraph worth of text. HTML doesn't respect line breaks in the source, so if you don't use <p> or some other container styled with margins to separate your paragraphs, you will literally end up producing a huge block of text
like my text wall illustration.

[bcbz-vssms-com]

Thanks.

I think sometimes I add extra divs because I feel there should be some kind of hierarchical "parity"(?) with elements, e.g.:

<section>
<header>
<h2>Part 1: Variety is spicy</h2>
</header>
<div class="not-header">
<p><!-- some cheesy content --></p>
<p><!-- more cheesy content --></p>
</div>
</section>

Do you think there's any value to that? If so, is there a better element than div here? Or should I just get over myself?

[Ken Bellows]

There's nothing semantically wrong with an extra <div>. I probably should have made clearer in the article, <div>s aren't bad, and there's nothing wrong with using them, just as long as the correct semantic elements are used where their semantics apply. The sort of <div> you're describing doesn't have any semantics to it anyway, so a <div> works fine if you prefer it, and can be useful for layout purposes as well.

By the way, another thing I probably should have made clear in the article is that <header> is not strictly necessary if the only thing inside it is a heading (<h1>-<h6>). It's useful for grouping things, like a heading, an icon, and a section anchor link, and it might be useful for styling purposes, but if you don't need those things, you could just do this:

<section>
  <h2>Part 1: Variety is spicy</h2>
  <p><!-- some cheesy content --></p>
  <p><!-- more cheesy content --></p>
</section>

That might give you the consistent feel without needing the extra <div>, if you're worried about it.

Any of the three options is fine: <header> + <p>s, <header> + <div>, <h2> + <p>s.

[bcbz-vssms-com]

Yes, I like <h2> <p> <p> better, thanks.

(& I think you meant to write divs are "NOT bad" above)

Cheers

[Ken Bellows]

Ha, I sure did 😂 Thanks! Fixed for posterity