title: How To (Semantically) Mark Up A (Theatre) Script / Play in HTML5
body: <p>How To (Semantically) Mark Up A (Theatre) Script / Play in HTML5?</p>
  
  <p>For obvious reasons, it's hard to search for "play" and "script" without a search engine thinking you mean “play a sound" and “JavaScript".</p>
  
  <p>How can I mark up a script (as in the document one would give to actors in a play) such that it is semantically correct, and easy to style?</p>
  
  <p>For example, let's take the start of Hamlet</p>
  
  <blockquote>
    <p>Hamlet</p>
    
    <p>ACT I</p>
    
    <p>SCENE I    Elsinore. A platform before the castle.</p>
    
    <p>[FRANCISCO at his post. Enter to him BERNARDO]</p>
    
    <p>BERNARDO   Who's there?</p>
    
    <p>FRANCISCO  Nay, answer me: stand, and unfold yourself.</p>
  </blockquote>
  
  <p>Fairly obviously, I think, one should start with</p>
  
  <pre><code>&lt;h1 id="title"&gt;Hamlet&lt;/h1&gt;
  &lt;h2 id="act-1"&gt;Act 1&lt;/h2&gt;
  &lt;h3 id="scene-1"&gt;Scene 1&lt;/h3&gt;
  </code></pre>
  
  <p>But, then I get stuck.</p>
  
  <p>I've tried looking at MicroData, but Schema.org's CreativeWork[0] really doesn't contain much that would be useful in the case of a work of fiction.</p>
  
  <p>Is it enough just to say</p>
  
  <pre><code>&lt;p class="stage-direction"&gt;FRANCISCO at his post. Enter to him BERNARDO&lt;/p&gt;
  &lt;p id="1"&gt;&lt;span class="character bernardo"&gt;BERNARDO&lt;/span&gt;Who's there?&lt;/p&gt;
  &lt;p id="2"&gt;&lt;span class="character francisco"&gt;FRANCISCO&lt;/span&gt;Nay, answer me: stand, and unfold yourself.&lt;/p&gt;
  </code></pre>
  
  <p>Or is there a better / more sensible way of doing things?</p>
  
  <p>[0]<a href="http://schema.org/CreativeWork" rel="nofollow">http://schema.org/CreativeWork</a></p>