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

ChangeProposals/hSub

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. All use-cases collected in the WHATWG Wiki are limited to a title followed by a subtitle that can be marked up easily with <hsub> (and not all collected examples can be marked up with <hgroup>).
  • Most popular HTML5 tutorials — MDN, HTML5 Doctor and W3Schools — as well as the HTML5 spec itself only show examples of a single title followed by a single subtitle. This can be interpreted as an indicator of lack of demand for more complex markup from HTML students and/or tutors and lack of common/popular use-cases for complex markup.
  • The HTML5 spec does not define any interpretation of rank of subheadings other than highest-ranked, i.e. <h1/><h2/><h2/> and <h1/><h4/><h6/> are equivalent from the spec point of view. Rank of non-highest-ranked subheadings doesn't affect outline algorithm nor assistive technology, and thus change to <hsub> would not lose any semantics.
  • <hgroup>'s content model disallows adding extra <div>s around multiple subheadings, which may be needed as styling hooks. A real-world example :

<div id="storyheader">
  <div class="headline">
    <h1>Cooking Solo Grows Up</h1>
  </div>
  <div class="clear"> </div>
  <div class="subheadline">
    <h2>On your own? You no longer have to put up with cereal over the sink or days of the same old leftovers. Joe Yonan shows us why</h2>
  </div>
  <div class="clear"> </div>
  <div class="byline">
    <span class="name">By Gwendolyn Richards, Calgary Herald</span>
    <span class="timestamp">May 8, 2011 2:06 AM</span>
    <span id="lblComment" class="comments"></span>
  </div>
  <div class="clear"> </div>
</div>

This code can be trivially changed to use <hsub> by replacing <h2>, but would require significant refactoring of markup and associated styles to remove three <div> elements surrounding headline and subheadline forbidden by <hgroup>'s content model.

  • Mistakes in usage of <hsub> cannot break document outline, which is a significant improvement over <hgroup>.

At worst, in a rather rare case of subtitle preceeding the title, subtitle may end up associated with an earlier heading: 

<h1>Unrelated title</h1>
<p>Content</p>

<hsub>Preceeding subtitle</hsub>
<h1>Title</h1>

However, this kind of mistake can be easily eliminated by use of <section>/<acticle> elements: 

<section>
  <hsub>Preceeding subtitle</hsub>
  <h1>Title</h1>
</section>

Details

Replacement of section 4.4.7 (hgroup)

Categories:

  • Flow content.
  • Heading content.
  • Palpable content.

Contexts in which this element can be used:

  • Where flow content is expected.

Content model:

  • Phrasing content.

Content attributes:

  • Global attributes

DOM interface: 

   IDL interface HTMLHeadingElement : HTMLElement {};


<hsub> element represents a subheading (tagline, subtitle) of a section. The section on headings and sections [4.4.11] defines how <h1-h6> elements are assigned to individual sections. <hsub> does not imply new sections.

<hsub> may only be used in sections that have a heading.

Examples

<body>
<h1>Dr. Strangelove</h1>
<hsub>Or: How I Learned to Stop Worrying and Love the Bomb</hsub>

How a user agent exposes such multi-level headings in user interfaces (e.g. in tables of contents or search results) is left open to implementors, as it is a user interface issue. The first example above could be rendered as: 

   The reality dysfunction: Space is not the only void

Alternatively, it could look like this: 

   The reality dysfunction (Space is not the only void)

In interfaces where a title can be rendered on multiple lines, it could be rendered as follows, maybe with the first line in a bigger font size: 

   The reality dysfunction
   Space is not the only void

<article>
    <hsub>The Magical</hsub>
    <h1>Change Proposal</h1>
    <hsub>That Has</hsub>
    <hsub>Multiple Subtitles</hsub>
</article>

4.4.11 (Headings and sections)

Add:

hsub elements in an element of sectioning content represent subheadings for that section. hsub elements following a heading that implied a section represent subheadings for that section.

Change:

These elements can have their own outlines, but the sections and headings inside these elements do not contribute to the outlines of their ancestors.

to:

These elements can have their own outlines, but the sections, headings and subheadings inside these elements do not contribute to the outlines of their ancestors.

4.4.11.1 Creating an outline

Add:

When entering a subheading content element - associate the subheading with current section

Subsections of section 14

Replace hgroup with hsub. Add in 14.3.7: 

   hsub {font-weight:bold;}

Other sections

Remove references to hgroup.


Impact

  • Removal of complexity in outline algorithm introduced by hgroup. Without hgroup only h1-h6 are headings and are always headings. There is no need to look ahead and scan hgroup content to compute its rank.
  • Availability of shorter and simpler to use markup for subheadings.
  • Ability to mark up subheadings in a manner backwards-compatibile with pre-HTML5 outlining and AT tools.
  • Simpler and less restrictive markup, name less similar to header, and the fact that hsub does not imply new sections may reduce number of authoring errors and reduce severity of errors made compared to hgroup.

Risks

  • Legacy UAs will render the <hsub> element inline. This won't be a problem in practice, as it usually will be between block-level headings and paragraphs. Rendering can be easily corrected with CSS.
  • Default rendering with an appropriate font size dependent on <section|article> nesting requires special outline-aware CSS selector. The <h1> element suffers from the same problem, so if default <h1> size is fixed, <hsub> will be too. Proposed rendering in bold 1em font may be satisfactory.
Retrieved from "https://www.w3.org/html/wg/wiki/index.php?title=ChangeProposals/hSub&oldid=13519"