{"id":269,"date":"2003-08-06T20:11:03-04:00","date_gmt":"2003-08-07T04:11:03+00:00","guid":{"rendered":"http:\/\/peterjanes.ca\/wordpress\/?p=269"},"modified":"2003-08-06T20:11:03-04:00","modified_gmt":"2003-08-07T04:11:03+00:00","slug":"semantic-html-lyrics-markup","status":"publish","type":"post","link":"https:\/\/peterjanes.ca\/blog\/2003\/08\/06\/semantic-html-lyrics-markup\/","title":{"rendered":"Semantic HTML lyrics markup"},"content":{"rendered":"

I’ve been trying to figure out the best way to mark up lyrics for the Sirens website<\/a> (and, tangentially, my Lenni Jabour fan site<\/a>). For my purposes, best<\/cite> means having the most flexibility for entry and layout while retaining as much semantic value as possible<\/cite>. There are a few options:<\/p>\n\n

\n
<pre><\/samp><\/dt>\n
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><\/samp> element to be styled.<\/dd>\n
<p\/>\/<div\/><\/samp><\/dt>\n
Piggin.Net<\/a> 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<\/a> example<\/a> does group lines into verses using <div\/><\/samp> elements.<\/dd>\n
<p\/>\/<br\/><\/samp><\/dt>\n
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><\/samp>.<\/dd>\n
<p\/><\/samp> plus white-space: pre<\/samp><\/dt>\n
Simple paragraphs are probably the most semantically correct, and applying the CSS white-space: pre<\/samp> 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.<\/dd>\n
All <div\/><\/samp>, all the time<\/dt>\n
<div\/><\/samp> 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\/><\/samp> or <p\/>\/white-space: pre<\/samp>.<\/dd>\n
XML markup<\/dt>\n
Definitely the most semantic, but also the least usable for general browsing. TEI<\/abbr>‘s Base Tag Set for Verse<\/a> seems to be the ultimate method; all of the other XML music formats<\/a> (like 4ML<\/a>) are note-based, so it’s impossible to do just<\/em> lyrics. Layout-wise, if more browsers supported styling inline XML<\/a> it might be worthwhile, but ultimately there’s nothing to see here. Move along.<\/dd>\n<\/dl>\n\n

Markupbation<\/a> aside, I’m thinking <p\/>\/<br\/><\/samp> gives the biggest bang for the buck. Add some classes (verse<\/cite> and chorus<\/cite>) and some CSS (.chorus:before { content: ‘Chorus:’; }<\/samp>) and I’m ready to go.<\/p>\n\n

As Dave Shea says<\/a>, 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.<\/q><\/p><\/div>

<\/div>","protected":false},"excerpt":{"rendered":"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…","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"mf2_syndication":[],"venue_id":0},"categories":[3],"tags":[],"kind":false,"_links":{"self":[{"href":"https:\/\/peterjanes.ca\/blog\/wp-json\/wp\/v2\/posts\/269"}],"collection":[{"href":"https:\/\/peterjanes.ca\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/peterjanes.ca\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/peterjanes.ca\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/peterjanes.ca\/blog\/wp-json\/wp\/v2\/comments?post=269"}],"version-history":[{"count":0,"href":"https:\/\/peterjanes.ca\/blog\/wp-json\/wp\/v2\/posts\/269\/revisions"}],"wp:attachment":[{"href":"https:\/\/peterjanes.ca\/blog\/wp-json\/wp\/v2\/media?parent=269"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/peterjanes.ca\/blog\/wp-json\/wp\/v2\/categories?post=269"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/peterjanes.ca\/blog\/wp-json\/wp\/v2\/tags?post=269"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}