New proposed HTML structure

By having specialised elements, the HTML DOM would be much easier to read and understand.

This page tries to translate the current structure to something that is much more readable, and will allow adding styling, ... much easier.

Old

<div id="boardMoves" class="moves inline">
  <span class="moveNumber">1. </span>
  <span id="boardMoves0" class="move white">
    <a>e4</a>
  </span>
  <span id="boardMoves1" class="move">
    <a>e5</a>
  </span>
  <span class="moveNumber">2. </span>
  <span id="boardMoves2" class="move white">
    <a>Nf3</a>
  </span>
  <span id="boardMoves3" class="move">
    <a>Nc6</a>
  </span>
  <span class="moveNumber">3. </span>
  <span id="boardMoves4" class="move white">
    <a>Bb5</a>
  </span>
  <span id="boardMoves5" class="move">
    <a>a6</a>
  </span>
  <span class="comment afterComment">  alternative could be  </span>
  <div class="variations">
    <div class="variation">
      <span class="moveNumber">3... </span>
      <span id="boardMoves6" class="move var var1">
        <a>Nf6</a>
      </span>
    </div>
  </div>
</div>

New (shortened, but with many more elements)

<moves>
  <move>
    <move-nr>1</move-nr>
    <san>e4</san>
    <nags><nag>!</nag></nags>
    <comment after>  alternative could be </comment>
  </move>
...
</moves>