HTML - hgroup - the heading of a section

About

hgroup 1) or heading grouping is an element that:

  • represents the heading of a section or page
  • group a set of h1–h6 elements when the heading has multiple levels, such as:

Example

Page

<article>
 <hgroup>
  <h1>Apples</h1>
  <h2>Tasty, delicious fruit!</h2>
 </hgroup>
 <p>.....</p>
 <section>
  <h1>......</h1>
  <p>......</p>
 </section>
 <section>
  <h1>......</h1>
  <p>......</p>
 </section>
</article>

Chapter / Book

<header>
 <hgroup>
  <h1>My Book</h1>
  <h2>A sample with not much content</h2>
 </hgroup>
 <p><small>Published by Dummy Publicorp Ltd.</small></p>
</header>
<section class="chapter">
 <h1>My First Chapter</h1>
 <p>This is the first of my chapters. It doesn't say much.</p>
 <p>But it has two paragraphs!</p>
</section>
<section class="chapter">
 <h1>It Continues: The Second Chapter</h1>
 <p>Bla dee bla, dee bla dee bla. Boom.</p>
</section>
<section class="chapter">
 <h1>Chapter Three: A Further Example</h1>
 <p>It's not like a battle between brightness and earthtones would go
 unnoticed.</p>
 <p>But it might ruin my story.</p>
</section>
<section class="appendix">
 <h1>Appendix A: Overview of Examples</h1>
 <p>These are demonstrations.</p>
</section>
<section class="appendix">
 <h1>Appendix B: Some Closing Remarks</h1>
 <p>Hopefully this long example shows that you <em>can</em> style
 sections, so long as they are used to indicate actual sections.</p>
</section>

Usage

hgroup prevent any subheading element h2-h6 (which acts as a secondary title) from creating a separate section of its own in any outline.





Discover More
HTML - (Document) Outline (Table of Content)

This article talks: the extraction of the outline from a HTML document in order to create a HTML Table of Content The outline also known as the table of content is a list of one or more potentially...
HTML - Header (element)

The header in html is an element which principal use is to group ancillary information around the top level heading (ie h1). It may (not required) contain the section's heading (an h1–h6 element...
HTML - Sections (Sectioning Content Element)

Sectioning content or sectioning element are elements that creates a logical section A section in HTML logically groups content by thematic. Each section can have one heading or a group of heading associated...
HTML - Subheading / Subtitle / SupTitle / Tagline / Slogan

This page is the HTML Markup for subheadings, alternative titles or taglines Note that before the creation of the hgroup element, HTML did not have any dedicated tag. This article shows you...



Share this page:
Follow us:
Task Runner