How to semantically tag poem text?

Question

What to use for poem?

• pre
• blockquote
• code
• something else?

Solution 1

Don't use code (unless computer code is part of the poem). Don't use blockquote (unless you quote a poem).

white space / line breaks: pre or br

You may use the pre element. The spec gives an (informative) example:

The following shows a contemporary poem that uses the pre element to preserve its unusual formatting, which forms an intrinsic part of the poem itself.

<pre>                maxling

it is with a          heart
               heavy

that i admit loss of a feline
        so           loved

a friend lost to the
        unknown
                                (night)

~cdr 11dec07</pre>

However, I'd only use the pre element if the poem contains "more" than just meaningful line breaks (e.g. in this example the horizontal whitespace is meaningful).

If you have a simple poem, I'd go with the br element:

br elements must be used only for line breaks that are actually part of the content, as in poems or addresses.

container: p

For most poems, the p element is the right candidate (or several p elements, of course). The spec has an (informative) example:

<p>There was once an example from Femley,<br>
Whose markup was of dubious quality.<br>
The validator complained,<br>
So the author was pained,<br>
To move the error from the markup to the rhyming.</p>

Also:

For instance, an address is also a paragraph, as is a part of a form, a byline, or a stanza in a poem.

structure: (article, figure)

Depending on the context (content, page structure, …), a sectioning element might be appropriate (article in most cases).

Also depending on the context, the figure element might be appropriate:

Here, a part of a poem is marked up using figure.

<figure>
 <p>'Twas brillig, and the slithy toves<br>
 Did gyre and gimble in the wabe;<br>
 All mimsy were the borogoves,<br>
 And the mome raths outgrabe.</p>
 <figcaption><cite>Jabberwocky</cite> (first verse). Lewis Carroll, 1832-98</figcaption>
</figure>

But don't use these in general for all poems, it really depends on the page if their use is correct.

misc. & trivia

• someone proposed a poetry element (→ Rejected)
• someone proposed a microformat for poems
• discussion in the w3.org wiki: Explicit Markup to Semantically Express Poetic Forms (thanks for the link, steveax)
  • see also: on the mailing list
• similar question on Webmasters SE: How to mark up a poem in HTML for SEO

Solution 2

I've looked for the same information and, similarly, haven't found any definitive "best practices" -- so I figured I'd just have to figure out my own method. The <p> tag does make some sense as a stanza marker, with lines divided by <br>s, per the spec -- BUT I've found that that markup style doesn't provide enough flexibility.

Specifically, I wanted control over indentation. For instance, if a line runs too wide for the width of the text column, it shouldn't just break: its continuation should be indented. This hanging indent can be achieved only (as far as I know) if each line is its own block element. So in my case I've made each poetry line a <p> with a class (say, "poetry-line"). Then I can use the following CSS:

.poetry-line {
    text-indent: -2em;
    margin-left: 2em;
}

In another example, the poem I was posting indented every other line, with some irregularities at the ends of stanzas. I couldn't achieve this effect with just <br>s between each line. I had to create a new class for the "indented-line" and apply it manually.

I'm just sharing my experience. I guess my suggestion is that you use a block-level element for each line, for formatting purposes. This could be a <p>, or I guess you could use CSS to set a <span>'s "display" to "block". In any case, the spec's example with <br>s between lines won't work for most poetry, I think: each line needs to be its own element.

Comments

[JayC]

This seems to be a question of etiquette more than anything...

[steveax]

this may be of interest: w3.org/html/wg/wiki/PoeticSemantics. Also, see: w3.org/html/wg/drafts/html/master/grouping-content.html

[jdg]

I ended up coming to the same conclusion as you @davidtheclark. I don't think using <p> tags with <br>s allow one to handle indents properly.

[Maëlan]

The question of indentation after breaks has been asked here. Apparently, since at least 2012, CSS 3 has been proposing a keyword each-line for this very use-case, for use with text-indent. You would say text-indent: -2em each-line; for instance. But as of 2021, no browser has implemented it. Someone minds an easy contrib to open-source software?

[Maëlan]

Also asked here.