Menu
I've been poking around online but I can't seem to find a definitive answer on this. Given the following HTML5 structure below, should I be using h2's or h3's inside of my aside element for content titles?
I know it's okay to use multiple h1's as long as they are inside a section and/or article element. But i'm not sure what I should do within my aside? I think I should stay away from multiple h1's in an aside but im not sure about h2's and h3's.
Thanks!
<!DOCTYPE html>
<html>
<head>
<title>Heading Tags</title>
</head>
<body>
<section>
<header>
<h1>Main Section</h1>
</header>
<article>
<h1>Article Title 1</h1>
<div>Some Content Here</div>
</article>
<article>
<h1>Article Title 2</h1>
<div>Some Content Here</div>
</article>
<article>
<h1>Article Title 3</h1>
<div>Some Content Here</div>
</article>
</section>
<aside>
<header>
<h1>Side Bar Heading</h1>
</header>
<div>
<h2>Side Content Title 1</h2>
<div>Some Content Here</div>
</div>
<div>
<h2>Side Content Title 2</h2>
<div>Some Content Here</div>
</div>
<div>
<h2>Side Content Title 3</h2>
<div>Some Content Here</div>
</div>
</aside>
</body>
</html>
281
The <aside> element is used to identify content that is related to the primary content of the webpage, but does not constitute the primary content of the page. Author information, related links, related content, and advertisements are exampes of content that may be found in an aside element.
The element can be used for typographical effects like pull quotes or sidebars, for advertising, for groups of nav elements, and for other content that is considered separate from the main content of the page.
Following the newer definition, the aside element should be inside of the section element to which it is related. The main element is not a sectioning element (elements like article , section , body , figure etc. are).
The <aside> tag defines some content aside from the content it is placed in. The aside content should be indirectly related to the surrounding content. Tip: The <aside> content is often placed as a sidebar in a document. Note: The <aside> element does not render as anything special in a browser.
According to MDN:
Sections in HTML5 can be nested. Beside the main section, defined by the element, section limits are defined either explicitly or implicitly. Explicitly-defined sections are the content within <body>, <section>, <article>, <aside>, and <nav> tags.
Each section can have its own heading hierarchy. Therefore, even a nested section can have an <h1>.
So the way you've done it -- with one <h1> and multiple <h2> inside your <aside> -- is appropriate.
199
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
