4.4.7 The subline element

Categories
Flow content
Palpable content
Contexts in which this element can be used:
Where flow content is expected.
Content model:
Phrasing content. Zero or more h1, h2, h3, h4, h5, h6 elements and/or zero or more div and/or p elements.
Content attributes:
Global attributes
DOM interface:
Uses HTMLElement.

The subline element represents a single or multiple subheadings, subtitles, taglines or bylines for a h1, h2, h3, h4, h5, or h6 element. The subline element content is associated with the first preceding heading element that is not itself contained in a subline element.

Here are some examples of valid use of the subline element. In each case, the subline content represents the text that is a subheading, subtitle, tagline or byline of a heading. The subline content would not be used as a heading in an application extracting heading data and ignoring subheadings.

 <h1>The reality dysfunction</h1>
 <subline><h2>Space is not the only void</h2></subline>

   
 <h1>Dr. Strangelove</h1>
 <subline><h2>Or: How I Learned to Stop Worrying and Love the Bomb</h2></subline>
 <subline><p>Starring Peter sellers</p></subline>

The reasons for using subline in these examples is to to convey the semantics of the h2 element (as a secondary title) and to mask the h2 element from the outline algorithm. The use of an additional subline in the second example indicates the p content is an associated tagline for the preceding heading.

Assistive technology may convey the semantic of the subline element instead of the heading it contains. Thus for an assistive technology user the first example above could be announced as:

"heading level 1 The reality dysfunction subline Space is not the only void"

Or the assistive technology may convey both the heading and subline semantics.

"heading level 1 The reality dysfunction subline, heading level 2 Space is not the only void"

In the following example the heading has 2 associated subline elements the first containing the subtitle and the second containing further information about the subject of the heading.

<h1>Dr. Strangelove</h1> 
<subline><h2>Or: How I Learned to Stop Worrying and Love the Bomb</h2></subline>
<subline>
<p>Starring Peter sellers.</p>
<p>Directed by Stanley Kubrick.</p> 
</subline>

If you want to group a heading and its associated subline content, because as a whole it is acting as header content use the the header element.

<header>
<h1>Dr. Strangelove</h1> 
<subline><h2>Or: How I Learned to Stop Worrying and Love the Bomb</h2></subline>
<subline>
<p>Starring Peter sellers.</p>
<p>Directed by Stanley Kubrick.</p> 
</subline>

</header>
  

Although in many cases it may be appropriate to use the subline element as a semantic container for other elements, it is not required.

<h1>US prisoners refused all books except Bible</h1>    
<subline>American Civil Liberties Union says jail in South Carolina is banning books 'for no good reason'</subline>

If you want to group a heading and its associated subline content purely for styling purposes, use a div element.

<div id="sylinghook">
<h1>US prisoners refused all books except Bible</h1>    
<subline>American Civil Liberties Union says jail in South Carolina is banning books 'for no good reason'</subline>
</div>