Warning:
This wiki has been archived and is now read-only.

ChangeProposals/hSub2

From HTML WG Wiki
Jump to: navigation, search

Change Proposal

Replace <hgroup> with an element that has a simple content model and backwards compatibility.

Rationale

  • <hgroup> overloads meaning of <h1-h6>, making them either headings included in document outline or not, depending on context created by hgroup and other headings. No other element in HTML creates such ambiguous context-dependent meaning.
  • Name and usage of <hgroup> can be confused with <header>, since both appear in headers and group elements.
  • Existing content on the web does not use as complex multi-level subheadings as <hgroup> was intended to support. There is no need to precisely mark up levels of subheadings, as the whole title is meant to be read in (document) order and subheadings are not used for sectioning/navigation.

Details

<hsub> element is a subordinate block within a heading. <hsub> may only be used within <h1-h6> (and possibly other heading-like elements, such as <caption>). <hsub> element has a transparent content model.

Examples

<body>
<h1>
  Title
  <hsub>Subtitle</hsub>
</h1>

<h1>
  Second Title
  <hsub>Second Subtitle 1</hsub>
  <hsub>Second Subtitle 2</hsub>
</h1>
</body>
<article>
  <h1>
    <hsub>The Magical</hsub>
    <span>Title</span>
    <hsub>That Has</hsub>
    <hsub>Multiple Subtitles</hsub>
  </h1>
</article>

Styling

The default style should be font-size:smaller; display:block.

Authoring errors

Mistakes in usage of <hsub> cannot break document outline, as it is entirely ignored by the outline algorithm, which is a significant improvement over <hgroup>.

Mistakes where <hsub> is used outside a heading element are easily detected by validators.

Risks

  • Removal of the <hgroup> element.
  • Legacy UAs will render the <hsub> element inline. Rendering can be corrected with CSS. For very-legacy non-CSS user agents, clever use of punctuation can disguise the problem:
<body>
<h1>
  Title:
  <hsub>Subtitle</hsub>
</h1>
</body>