I’ve been trying to figure out the best way to mark up lyrics for the Sirens website (and, tangentially, my Lenni Jabour fan site). For my purposes, best means having the most flexibility for entry and layout while retaining as much semantic value as possible. There are a few options:
- <pre>
- Preformatted text is probably the simplest way to go, but it’s also semantically poor. It also suffers from an apparent bug in IE (who’d’a thunk?) which doesn’t allow the font of a <pre> element to be styled.
- <p/>/<div/>
- Piggin.Net suggests using a separate paragraph for each line. This makes layout much easier, but drops the semantic idea of paragraphs being groups of sentences. On the other hand, the stanzas example does group lines into verses using <div/> elements.
- <p/>/<br/>
- Paragraphs and line breaks are reasonable and commonly used, though they provide somewhat less-flexible layout options than simple <p/> elements. Classes can be applied directly to each paragraph, however, which allows things like <p class=”chorus”>…</p>.
- <p/> plus white-space: pre
- Simple paragraphs are probably the most semantically correct, and applying the CSS white-space: pre property allows them to be laid out in lines. Non-CSS2 browsers will see long lines of text for each verse, though, which isn’t the desired effect.
- All <div/>, all the time
- <div/> throws out all the semantics and most of the style inherent in HTML entirely, leaving everything to CSS. Non-CSS browsers will have a fit, and this isn’t much different otherwise from <p/>/<div/> or <p/>/white-space: pre.
- XML markup
- Definitely the most semantic, but also the least usable for general browsing. TEI‘s Base Tag Set for Verse seems to be the ultimate method; all of the other XML music formats (like 4ML) are note-based, so it’s impossible to do just lyrics. Layout-wise, if more browsers supported styling inline XML it might be worthwhile, but ultimately there’s nothing to see here. Move along.
Markupbation aside, I’m thinking <p/>/<br/> gives the biggest bang for the buck. Add some classes (verse and chorus) and some CSS (.chorus:before { content: ‘Chorus:’; }) and I’m ready to go.
As Dave Shea says, This is an article I needed to find myself…. Feel free to link gratuitously with [appropriate search term phrases]… so that others may benefit from it.
