Lyrics translation in html

Question

How to represent lyrics and corresponding translation strophe in HTML?

just an example:

Может, поздно, может, слишком рано,        Maybe, it's too late or, maybe, early, 
И о чем не думал много лет,                It has not occurred to me for years,
Походить я стал на Дон-Жуана,              I resemble now Don Juan, really,
Как заправский ветреный поэт.              Like a proper flippant man of verse.

How to represent it in SEO friendly and semantic way?

P.S.   I really hate solution with tables and don't want to put original line and translated in one container (I think it's ugly and bad for googgles).

Answer 1

You use divs. You put each set of lyrics in a div tag and then use some CSS to format the two divs next to each other such as:

.lyrics {
 float: left;
}

There are a number of other CSS techniques that will do the same thing.

Answer 2

I would just leave off the English translations entirely. I think most music sounds more impressive if you can't actually understand what the singer is saying, and your example lyrics seem to verify this. :)

All seriousness aside, I would actually just alternate the original lyrics and the translation with different fonts, like so:

Je ne parle pas d'un bâtiment

[I do not speak a building]

请不要拍我

[Please do not shoot me]

Answer 3

Hmmm. Semantically speaking I could see an argument for these being lists or paragraphs.

Me I think I'd go with something like this (apologies for code bloat):

<style>
.song
{
  background: #444;
  overflow: auto;
  zoom: 1.0;
  padding-bottom: 1em;
  border: 1px solid #000;
}

.song .lyrics
{
  float: left;
  color: #ddd;
  margin: 1em;
  width: 20em;
}

.song #russian.lyrics { background: #009; }

.song #english.lyrics { background: #090; }   

.song .lyrics p { margin: .5em .2em; }
</style>

<div class="song">
    <div id="russian" class="lyrics">
     <p>Может, поздно, может, слишком рано,</p> 
     <p>И о чем не думал много лет,</p>
     <p>Походить я стал на Дон-Жуана,</p>
     <p>Как заправский ветреный поэт.</p>
    </div>
    <div id="english" class="lyrics">
     <p>Maybe, it's too late or, maybe, early,</p>
     <p>It has not occurred to me for years,</p>
     <p>I resemble now Don Juan, really,</p>
     <p>Like a proper flippant man of verse.</p>
     </div>
</div>

Answer 4

I actually think a table makes the most sense here.