Summary

Structuring and describing lines of poetry and lyrics improves access for users who cannot see the difference in layout from regular prose.

Techniques

Examples

Example 1 — A basic poem with multiple stanzas

As the lines of the poems do not require any special formatting, only br tags are needed to identify the line endings. p tags are used to separate the stanzas.

The Tyger

Tyger Tyger, burning bright,
In the forests of the night;
What immortal hand or eye,
Could frame thy fearful symmetry?

In what distant deeps or skies.
Burnt the fire of thine eyes?
On what wings dare he aspire?
What the hand, dare seize the fire?

<section>
   <h2>The Tyger</h2>

   <p class="stanza">Tyger Tyger, burning bright,<br/> 
      In the forests of the night;<br/>
      What immortal hand or eye,<br/>
      Could frame thy fearful symmetry?</p>

   <p class="stanza">In what distant deeps or skies.<br/>
      Burnt the fire of thine eyes?<br/>
      On what wings dare he aspire?<br/>
      What the hand, dare seize the fire?</p>

   <p>…</p>
</section>
Example 2 — Preserving line indentation using white space

In the following poem, span tags are used to preserve line indenting. The CSS white-space property is set to pre to preserve spacing.

i will wade out
till my thighs are steeped in burning flowers
I will take the sun in my mouth
and leap into the ripe air
Alive
with closed eyes
to dash against darkness
in the sleeping curves of my body
Shall enter fingers of smooth mastery
with chasteness of sea-girls
Will i complete the mystery
of my flesh
I will rise
After a thousand years lipping
flowers
And set my teeth in the silver of the moon

<p class="poem">i will wade out<br/>
<span class="preserve">               till my thighs are steeped in burning flowers</span><br/>
I will take the sun in my mouth<br/>
and leap into the ripe air<br/>
<span class="preserve">                           Alive</span><br/>
<span class="preserve">                                 with closed eyes</span><br/>
to dash against darkness<br/>
<span class="preserve">                       in the sleeping curves of my body</span><br/>
Shall enter fingers of smooth mastery<br/>
with chasteness of sea-girls<br/>
<span class="preserve">                             Will i complete the mystery</span><br/>
<span class="preserve">                             of my flesh</span><br/>
I will rise<br/>
<span class="preserve">            After a thousand years</span>
lipping<br/> flowers<br/> <span class="preserve"> And set my teeth in the silver of the moon</span></p>
Example 3 — Preserving indentation using text indents

The same poem from Example 2 is shown but uses span tags with CSS indenting. The span tags also need to have their CSS display set to inline-block for the formatting to work.

<p class="poem">i will wade out<br/>
<span style="text-indent: 6rem">till my thighs are steeped in burning flowers</span><br/>
I will take the sun in my mouth<br/>
and leap into the ripe air<br/>
<span style="text-indent: 11rem">Alive</span><br/>
<span style="text-indent: 13rem">with closed eyes</span><br/>
to dash against darkness<br/>
<span style="text-indent: 10rem">in the sleeping curves of my body</span><br/>
Shall enter fingers of smooth mastery<br/>
with chasteness of sea-girls<br/>
<span style="text-indent: 11.5rem">Will i complete the mystery</span><br/>
<span style="text-indent: 11.5rem">of my flesh</span><br/>
I will rise<br/>
<span style="text-indent: 5rem">After a thousand years</span><br/>
lipping<br/>
flowers<br/>
<span style="text-indent: 3.5rem">And set my teeth in the silver of the moon</span></p>

Frequently Asked Questions

Can I use images for poetry?

The layout of some poetry is too complex to be represented by HTML and CSS. In these cases, the only option may be to use an image to represent the source.

If an image must be used, you must provide the text of the poem for users who cannot perceive the layout (e.g., in a details element). It will also be necessary to describe how the text is arranged in the image so that readers are able to understand the intent of the poem.

The use of images should be a last resort for only the most difficult of layouts.

Can I use pre tags for layout?

Yes, but the pre tag is best reserved for poetry that relies on positioning of individual characters and words. For simple indenting, using span or div tags with CSS styling is often a better option.

Can I identify poetry with ARIA?

No. Although the line-based formatting of poetry is visually distinctive from standard prose, and read differently from the continuous flow of prose, HTML does not provide native semantic elements for marking up poetry. ARIA also lacks roles to identify poems and their internal structures.

For books of poetry, this is generally not an issue as users know what types of works they are reading, but for works of fiction, especially, authors may randomly intersperse poems and lyrics between paragraphs of text without indicating a change in style has occurred.

At this time, users of assistive technologies are left to intuit changes in writing style by how the applications respond to the markup that is available (e.g., that they stop reading a line at a br tag).

Explanation

Although HTML does not include semantically meaningful markup for expressing poetry, it is possible to mark up lines of verse using native elements.

The p element is commonly associated with paragraphs of text, for example, but HTML expands the tag's meaning to include poetry:

A paragraph is typically a run of phrasing content … but can also be used for more general thematic grouping. For instance, an address is also a paragraph, as is … a stanza in a poem.

The lines within each stanza are then identified using br tags. Assistive technologies can pause reading at each br tag, allowing users to move line-by-line through the poem (refer to Example 1).

Note

There is a known bug with chromium-based reading systems on MacOS where VoiceOver repeats lines when br tags are used inside a blockquote. This affects quoted poetry and lyrics (e.g., in epigraphs). For more information on the current status, refer to the bug report.

Although this markup pattern works for basic poetry, there will be many situations where it is too limited. Poetry often makes use of visual layout to convey meaning. In these cases, CSS styling will also be needed to retain indentation and placement of text (refer to examples 2 and 3).

With visual poetry, it is also important to provide a description of the layout for those who cannot see the content or have difficulty viewing the full layout. This is important not only when an image has to be used, but any time the layout conveys meaning.