How to Semantically Tag Poem Text

How to semantically tag poem text?

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

Create poetry-like lines indents in html using blockquotes, pre, or dd tags?

The indentation really belongs with the styling, as it's presentation and not semantic meaning that HTML should represent.

However to do this with html only, just consider using breaks and nbsp tags

<p>
"Knowing is not enough, we<br>
  must apply. Willing is not<br>
    enough, we must do."</p>

Just increase the number of nbsp tags to adjust the spacing.

Is it semantically correct to use a p for text that technically is not a paragraph

The semantics of elements are described by the html specification. I think it is fair to say that a semantically correct usage is one that is consistent with what is in the specification.

There are two html specifications, but in this case they provide the exact same description of paragraph:

A paragraph is typically a run of phrasing content that forms a block of text with one or more sentences that discuss a particular topic, as in typography, but can also be used for more general thematic grouping. For instance, an address is also a paragraph, as is a part of a form, a byline, or a stanza in a poem.
https://html.spec.whatwg.org/multipage/dom.html#paragraphs, https://www.w3.org/TR/html5/dom.html#paragraphs

The examples you provided fit within that description, so I would say they are semantically correct usages.

However, regarding a phone number in the header, or an address in the footer, it turns out there may be an even more semantically correct element.

The Address element:

The address element represents the contact information for its nearest article or body element ancestor. If that is the body element, then the contact information applies to the document as a whole.
https://html.spec.whatwg.org/multipage/sections.html#the-address-element, https://www.w3.org/TR/html5/sections.html#the-address-element

<address></address>

As an example, if you were creating a webpage about the history of addresses throughout time, you would use paragraph tags in the body to demonstrate historical addresses, but in the header/footer you would use address tags to markup your contact info as the page author.

br tag semantic alternative usage

First, line breaks are intended to be used in situations where the break must occur within the flow of text, such as in a poem.

The generally accepted way to markup text like this is as paragraphs, which are block level and therefore always create a new line, and to set the margins between them. Here you have two paragraph styles, one that requires space and one that does not. You could have two different styles of paragraph like this (and I just illustrate the vertical margins here - the horizontal ones are set to 0).

p {margin:.1em 0;}

p.special {margin:0;}

Then just add the class "special" to the paragraphs without space. Note the vertical margins will collapse so you will only get 1em of space between each paragraph.

My bigger question though is a design one: why do you want to organize your paragraphs like this? Why not just have a standard paragraph spacing throughout and perhaps using headings to group the sets of paragraphs? What you are doing is rather unconventional, which is why you are running into problems finding the right HTML elements to use. hth, charles

What is the semantically correct way to break these lines?

talking about semantic, this could be a good usecase for <address> if the contact information provided is related to the document (I may suppose, since I see a license information included¹): see http://html5doctor.com/the-address-element/ for further reference about it.

(If not, the same page on html5doctor is suggesting to simply use a pararaph with the hcard microformat using <br> where it's necessary)

So in the first scenario I would go with

<footer>
    <p>
       License: <a href="#" rel="license">Creative Commons BY</a>
    </p>
    <address>
        Email: <a href="mailto:#">email@mail.com</a>
        Telephone: <a href="tel:#">0123456789</a>
    </address>
</footer>

and

footer p { margin: 0; }

footer address {
   font-style: normal; /* just because of default browser style */
}

footer address a:after {
  content: "";
  display: block;
}

see jsbin example: http://jsbin.com/ajohur/1/edit

---

⁽¹⁾ Edit — as pointed out by @unor, the information license should probably stay outside the address element, so I wrapped it in a paragraph.

h1 and semantic HTML5

You can think of the title as the title of a book and h1 is the chapter heading but this does not always work for all sites. If your site was a book, then "My Book" would make a great title tag along with the h1 on each page being "Chapter X". That won't always work. Google says if you have CompanyX then each subsequent page title should reflect what's on the page like "Our Products" instead of "CompanyX - Our Products". But that's for layout on their search results.

With HTML5, as said by others, there can be many sections on a page, each with its own h1 heading. However, you may have a page with only one necessary h1 heading. So thinking of an appropriate title/h1 combination requires some thought.

---

Related Topics