How to semantically tag poem text? - html

Question

What to use for poem?
pre
blockquote
code
something else?

Answer 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

Answer 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.

Answer 3

I was also looking for a good option of marking up a poem, and finally I got to make one myself; therefore I share it here with you, and I hope it might be useful to somebody.
<article itemscope itemtype="http://schema.org/CreativeWork">
<link itemprop="additionalType" href="https://dbpedia.org/ontology/Poem" />
<h2 itemprop="name">Lorem Ipsum</h2>
<h4 itemprop="author">Jane Doe</h4>
<section itemprop="hasPart" itemscope itemtype="http://schema.org/CreativeWork">
<link itemprop="additionalType" href="https://dbpedia.org/ontology/Strophe" />
<ul itemprop="text">
<li>Lorem ipsum dolor sit amet,</li>
<li>consectetur adipiscing elit,</li>
<li>sed do eiusmod tempor incididunt</li>
<li>ut labore et dolore magna aliqua.</li>
</ul>
</section>
<section itemprop="hasPart" itemscope itemtype="http://schema.org/CreativeWork">
<link itemprop="additionalType" href="https://dbpedia.org/ontology/Strophe" />
<ul itemprop="text">
<li>Ut enim ad minim veniam, consectetur</li>
<li>adipiscing elit, squis nostrud</li>
<li> exercitation ullamco laboris nisi</li>
<li>ut aliquip ex ea commodo consequat</li>
</ul>
</section>
</article>
This is a minimal markup, and you can also add complementary markup, for each verse, or for the date, the genre, or the book it was published in, etc.