diff --git a/patacrep/songs/chordpro/data/html/content_comment b/patacrep/songs/chordpro/data/html/content_comment
index 07381cdf..d9dfd2f1 100644
--- a/patacrep/songs/chordpro/data/html/content_comment
+++ b/patacrep/songs/chordpro/data/html/content_comment
@@ -1 +1 @@
-{comment: (( content.argument ))}
+<div class="comment">(( content.argument ))</div>
diff --git a/patacrep/songs/chordpro/data/html/content_define b/patacrep/songs/chordpro/data/html/content_define
index 47a93abf..4998f0bd 100644
--- a/patacrep/songs/chordpro/data/html/content_define
+++ b/patacrep/songs/chordpro/data/html/content_define
@@ -1,25 +1,31 @@
-{define: (( render(content.key) ))
-(*- if content.basefret *)
- base-fret ((content.basefret))
-(*- endif *)
- frets
-(*- for string in content.frets -*)
-  (( " " -))
-  (*- if string is none -*)
-      x
-  (*- else -*)
-      (( string -))
-  (*- endif -*)
-(*- endfor -*)
-(* if content.fingers *)
- fingers
- (*- for finger in content.fingers -*)
-   (( " " -))
-   (* if finger is none -*)
-     -
-   (*- else -*)
-     (( finger -))
-   (* endif -*)
- (* endfor -*)
-(* endif -*)
-}
+<div(( " " -))
+    class="chord-diagram"(( " " -))
+    data-shift="
+      (*- if content.basefret -*)
+        ((content.basefret))
+      (*- else -*)
+        0
+      (*- endif *)
+    ((- '" ' -))
+    data-frets="
+      (*- for fret in content.frets -*)
+       (* if fret is none -*)
+         x
+       (*- else -*)
+         (( fret -))
+       (* endif -*)
+      (* endfor -*)
+    ((- '" ' -))
+    (* if content.fingers -*)
+      data-fingers="
+      (*- for finger in content.fingers -*)
+       (* if finger is none -*)
+         -
+       (*- else -*)
+         (( finger -))
+       (* endif -*)
+      (* endfor -*)
+      ((- '" ' -))
+    (* endif -*)
+    data-name="(( content.pretty_key ))"(( " " -))
+></div>
\ No newline at end of file
diff --git a/patacrep/songs/chordpro/data/html/content_define_list b/patacrep/songs/chordpro/data/html/content_define_list
new file mode 100644
index 00000000..923f37c2
--- /dev/null
+++ b/patacrep/songs/chordpro/data/html/content_define_list
@@ -0,0 +1,3 @@
+(*- for chord in metadata['define'] *)
+  ((- render(chord) ))
+(* endfor *)
diff --git a/patacrep/songs/chordpro/data/html/content_guitar_comment b/patacrep/songs/chordpro/data/html/content_guitar_comment
index 1ca0c269..770cc6b0 100644
--- a/patacrep/songs/chordpro/data/html/content_guitar_comment
+++ b/patacrep/songs/chordpro/data/html/content_guitar_comment
@@ -1 +1 @@
-{guitar_comment: (( content.argument ))}
+<div class="guitar_comment">(( content.argument ))</div>
diff --git a/patacrep/songs/chordpro/data/html/content_image b/patacrep/songs/chordpro/data/html/content_image
index 58e7f904..4e1889b7 100644
--- a/patacrep/songs/chordpro/data/html/content_image
+++ b/patacrep/songs/chordpro/data/html/content_image
@@ -1 +1 @@
-{image: (( content.argument ))}
+<img src="(( content.argument ))">
diff --git a/patacrep/songs/chordpro/data/html/content_metadata_cover b/patacrep/songs/chordpro/data/html/content_metadata_cover
new file mode 100644
index 00000000..96fc7718
--- /dev/null
+++ b/patacrep/songs/chordpro/data/html/content_metadata_cover
@@ -0,0 +1,3 @@
+(* if 'cov' in metadata -*)
+  <img src="(( metadata['cov'].argument|search_image ))"><br>
+(* endif *)
\ No newline at end of file
diff --git a/patacrep/songs/chordpro/data/html/content_partition b/patacrep/songs/chordpro/data/html/content_partition
index 362c4f64..bf2d3164 100644
--- a/patacrep/songs/chordpro/data/html/content_partition
+++ b/patacrep/songs/chordpro/data/html/content_partition
@@ -1 +1 @@
-{partition: ((content.argument))}
+<a class="song-partition" href="((content.argument))">((content.argument))</a>
diff --git a/patacrep/songs/chordpro/data/html/content_verse b/patacrep/songs/chordpro/data/html/content_verse
index 4b6073a4..eab4d361 100644
--- a/patacrep/songs/chordpro/data/html/content_verse
+++ b/patacrep/songs/chordpro/data/html/content_verse
@@ -1,5 +1,6 @@
 <p class="(( content.type ))">
   (*- for line in content.lines -*)
+    (* if not loop.first *)<br>(* endif -*)
     (( render(line) ))
   (* endfor -*)
 </p>
diff --git a/patacrep/songs/chordpro/data/html/song b/patacrep/songs/chordpro/data/html/song
index 3baa8c22..e774cdff 100644
--- a/patacrep/songs/chordpro/data/html/song
+++ b/patacrep/songs/chordpro/data/html/song
@@ -1,3 +1,5 @@
 (* include 'song_header' *)
 
+<div class="song_content">
 (* include 'song_body' *)
+</div>
diff --git a/patacrep/songs/chordpro/data/html/song_header b/patacrep/songs/chordpro/data/html/song_header
index b4a59862..cc23ad17 100644
--- a/patacrep/songs/chordpro/data/html/song_header
+++ b/patacrep/songs/chordpro/data/html/song_header
@@ -1,31 +1,30 @@
-(* if language is defined -*)
-  {language: (( language ))}
-(* endif *)
-(* if metadata.columns is defined -*)
-  {columns: (( metadata.columns ))}
-(* endif *)
-(* if metadata.capo is defined -*)
-  {capo: (( metadata.capo ))}
-(* endif *)
-
 (*- for title in titles -*)
-  {title: (( title ))}
+  (* if loop.first *)
+    <h1 class="song-title">(( title ))</h1>
+  (* else *)
+    <h2 class="song-title">(( title ))</h2>
+  (* endif *)
 (* endfor -*)
 
 (*- for author in authors -*)
-  {artist: (( author[1] ))(( author[0] ))}
+  <h2 class="song-artist">(( author[1] ))(( author[0] ))</h2>
 (* endfor *)
 
-(*- for key in ['album', 'copyright', 'cov', 'tag'] *)
+
+(*- for key in ['album', 'copyright', 'tag', 'columns', 'capo'] *)
   (* if key in metadata -*)
-    {(( key )): (( metadata[key] ))}
+    <span class="song-(( key ))">(( key|capitalize )): (( metadata[key] ))</span><br/>
   (* endif *)
 (* endfor *)
 
+(* if language is defined -*)
+  <span class="song-language">Language: (( language ))</span><br>
+(* endif *)
+
+(* include 'content_metadata_cover' *)
+
 (*- for key in metadata.keys -*)
   {key: (( key.keyword )): (( key.argument ))}
 (* endfor *)
 
-(*- for chord in metadata['define'] *)
-  ((- render(chord) ))
-(* endfor *)
+(* include 'content_define_list' *)