Ben Henick

Semantic approaches to producing poetry on the Web

c. Apr 2005

In April 2005, Molly Holzschlag asked: what's the best way to mark up poetry for the Web?

What follows is the answer I gave her.


Because HTML was designed for a narrow scope only to see that scope overtaken by the Web's popularity, semanticians and stylists - whom some might call "standardistas" - are stranded when it comes to finding the most extensible way to mark up certain types of poetry with HTML alone.

Molly suggested two approaches: using <br /> to represent the breaks between lines and paragraphs as stand-ins for stanzas, or preformatting the whole mess.

On consideration I decided that neither approach was especially desirable, when one considers the structural nature of poetry.

Recursing through the structure of a poem

When we look closely at a poem, we discover that we can break it down with a textbook taxonomy that's well-lent to the strengths of the Document Object Model. For the sake of completeness, I'll use the structure of a Classical epic to illustrate my point:

  • Work
    • Book
      • Chapter/Part/Act
        • Stanza/Scene
          • Line
            • Beat

Now, just between you, me, and our network cards, I'd say that we've got a good document tree doing here. Under the circumstances, I reckon that the conscientious semantician is best-off using nested ordered-lists, or (as I'm about to propose) nested <div>s. The list approach has a certain elegance, but it's even greater overkill, in my opinion: an ordered list is what you use for points on an agenda or a shopping trip, but poetry's quite a bit more sublime than that... and if it's ever converted to XML, the markup we use is down to a choice between sheep and goats. Meanwhile, the styling will be easier if we stick with <div>s.

Marking up the poem

All that's needed hence is to nest markup properly. Assign classes as needed, and if needed, id's for the sake of margin notes.

Adding the line numbers

Oftentimes, we see lines included with poems for the sake of reference, and also as an aid to performers in respecting the structure of the poem. However, they're not an integral part of the poem, so we can turn to an external source, such as JavaScript, for annotation.

Since we're using classed <div>s for the sake of defining structure, we can simply walk through the elements that are direct children of the stanza class, and create them accordingly. Once created, they can be relatively positioned as needed.

Interested readers should read through the source markup of the fragment below. The line-number scripting is at

The poem: The Song of Wandering Aengus

Note: Some of you, particularly devoted fans of the Star Trek universe, may be wondering why I chose this particular poem... and that's because it's been my hands-down favorite since my senior year of high school.

I WENT out to the hazel wood,
Because a fire was in my head,
And cut and peeled a hazel wand,
And hooked a berry to a thread;
And when white moths were on the wing,
And moth-like stars were flickering out,
I dropped the berry in a stream
And caught a little silver trout.
When I had laid it on the floor
I went to blow the fire a-flame,
But something rustled on the floor,
And someone called me by my name:
It had become a glimmering girl
With apple blossom in her hair
Who called me by my name and ran
And faded through the brightening air.
Though I am old with wandering
Through hollow lands and hilly lands,
I will find out where she has gone,
And kiss her lips and take her hands;
And walk among long dappled grass,
And pluck till time and times are done,
The silver apples of the moon,
The golden apples of the sun.
— William Butler Yeats