The 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="stylinghook">
<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>