Login/Register
How to semantically tag poem text?
Asked Answered
Solved htmlmeta-tagssemanticssemantic-websemantic-markup
A

3

23

What to use for poem?

  • pre
  • blockquote
  • code
  • something else?
Anissaanita answered 6/2, 2013 at 16:57 Comment(2)
This seems to be a question of etiquette more than anything... – Janycejanyte
this may be of interest: w3.org/html/wg/wiki/PoeticSemantics. Also, see: w3.org/html/wg/drafts/html/master/grouping-content.html – Cutty
M
37

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

Martymartyn answered 7/2, 2013 at 14:48 Comment(0)
E
10

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.

Elviraelvis answered 16/4, 2013 at 2:8 Comment(3)
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. – Camala
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? – Redundant
Also asked here. – Redundant
B
0

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.

Blavatsky answered 6/2, 2023 at 10:10 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.