re: Stop using so many divs! An intro to semantic HTML VIEW POST


Thanks for this.

Would you wrap your "cheesy content" inside any kind of element, or just have it as text alongside ?



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.



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

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

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?

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:

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

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.

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

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


Ha, I sure did 😂 Thanks! Fixed for posterity

code of conduct - report abuse