Full-time web dev; JS lover since 2002; CSS fanatic. #CSSIsAwesome
I try to stay up with new web platform features. Web feature you don't understand? Tell me! I'll write an article!
He/him
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.
Full-time web dev; JS lover since 2002; CSS fanatic. #CSSIsAwesome
I try to stay up with new web platform features. Web feature you don't understand? Tell me! I'll write an article!
He/him
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.
Full-time web dev; JS lover since 2002; CSS fanatic. #CSSIsAwesome
I try to stay up with new web platform features. Web feature you don't understand? Tell me! I'll write an article!
He/him
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 textlike my text wall illustration.
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?
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: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)
Cheers
Ha, I sure did 😂 Thanks! Fixed for posterity