diff --git a/_includes/emoji-icon.html b/_includes/emoji-icon.html
new file mode 100644
index 0000000..d3bf911
--- /dev/null
+++ b/_includes/emoji-icon.html
@@ -0,0 +1 @@
+<i class="em em-{{ emoji.name }}" aria-role="presentation" aria-label="{{ emoji.description }}"></i>
\ No newline at end of file
diff --git a/_includes/emoji.html b/_includes/emoji.html
new file mode 100644
index 0000000..a6c5a56
--- /dev/null
+++ b/_includes/emoji.html
@@ -0,0 +1,5 @@
+{% capture alternative_names %}
+{% if emoji.alt_names.size > 1 %}{{ emoji.alt_names | join:',' }}{% else %}{{ emoji.name }}
+{% endif %}
+{% endcapture %}
+{% include emoji-icon.html emoji=emoji %} em-<span class="name" data-alternative-names="{{ alternative_names | strip }}">{{ emoji.name }}</span>
\ No newline at end of file
diff --git a/index.html b/index.html
index 95bff24..d5df7a2 100755
--- a/index.html
+++ b/index.html
@@ -23,15 +23,21 @@ <h1>Emoji CSS</h1>
     <p>
       Want to include emoji in your HTML? Just include the (minified) stylesheet below, then add <code>&lt;i&gt;</code> tags to insert emoji. That's it!<br>
       &#x2708; <b>Click the emoji code and it will be copied to your clipboard.</b>
-      <pre><code>&lt;link href="https://afeld.github.io/emoji-css/emoji.css" rel="stylesheet"&gt;
+    </p>
+{% highlight html %}
+<link href="https://afeld.github.io/emoji-css/emoji.css" rel="stylesheet">
+
+{% assign emoji=site.data.emoji[104] %}{% include emoji-icon.html %}
 
-&lt;i class="em em-some-emoji"&gt;&lt;/i&gt;</code></pre>
+{% endhighlight %}
+    <p>
       By default, the emoji will be served as PNGs. To use SVG instead, use the <code>em-svg</code> class instead of <code>em</code>. This will scale better, but has larger file size.
     </p>
     <ul class="emojis">
-      {% for emo in site.data.emoji %}
-        <li class="emoji" data-clipboard-text="&lt;i class=&quot;em em-{{ emo.name }}&quot;&gt;&lt;/i&gt;">
-          <i class="em em-{{ emo.name }}"></i> em-<span class="name" data-alternative-names="{{ emo.description | split: '#' | concat: emo.alt_names | join: ',' }}">{{ emo.name }}</span>
+      {% for emoji in site.data.emoji %}
+        {% capture clipboard_text %}{% include emoji-icon.html %}{% endcapture %}
+        <li class="emoji" data-clipboard-text="{{ clipboard_text | replace:'"','&quot;' | replace:'<','&lt;' | replace:'>','&gt;' }}">
+          {% include emoji.html %}
         </li>
       {% endfor %}
     </ul>