Menu
Which of these is the proper way to nest the <h1> and <article> tags, and what is your reasoning behind it?
<article>
<h1>Some Title</h1>
<p>Here's some text and whatnot.</p>
<p>Here's another paragraph filled with other text and other whatnots.</p>
</article>
<div class="post">
<h1>Here's a Really Awesome Title</h1>
<article>
<p>Here's a paragraph with text and whatnot.</p>
<p>And here's another paragraph. I think this one is pretty awesome too.</p>
</article>
</div>
Opinions seem mixed about this, and I'm not 100% which is the correct answer.
912
⚠ Warning ⚠
This answer is severely out-of-date and relies on the now-obsolete document outline algorithm.
@David Dorward has a great answer, and I was going to comment to expand on it, but when I realized my comment was getting too long I decided I'd just add my own answer instead.
The h# elements semantically belong to their parents.
This h1 is the primary header for the page
<body>
<h1>Some text</h1>
</body>
While this h1 is the primary header for the article
<body>
<article>
<h1>Some text</h1>
</article>
</body>
This allows us to expand the usage of h# elements in meaningful ways as follows:
<body>
<h1>Blag Tottle</h1>
<article>
<h1>Article 1 Title</h1>
<p>Lorem ipsum etc</p>
</article>
<article>
<h1>Article 2 Title</h1>
<p>Lorem ipsum etc</p>
</article>
</body>
Now you may want to separate your article heading some more, which is a perfect application of the header element:
<body>
<h1>Blag Tottle</h1>
<article>
<header>
<h1>Article 1 Title</h1>
<span class="author">And not a mouse</span>
</header>
<p>Lorem ipsum etc</p>
</article>
<article>
<header>
<h1>Article 2 Title</h1>
<span class="author">Somebody</span>
</header>
<p>Lorem ipsum etc</p>
</article>
</body>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
