 ======Jonah HTML structure======

As a reference for those writing [[stylesheet]]s, the HTML structure of the **Jonah** [[Story format]] is shown here.

When displaying three passages with this code:

  :: Start
  This is the first passage.
  
  [[Next]]
  
  :: Next [special]
  
  This is the second passage, with a special tag.
  
  [[End]]
  
  :: End
  
  This is the final passage.

Then, the resulting HTML DOM structure looks like this:

   <body data-tags="">
      <div id="floater">
        <div class="container">
          <div id="storyMenu" class="storyElement"></div>
          <p>
            <a id="restart" href="#">Restart Story</a>
          </p>
        </div>
      </div>
      <div id="content1">
        <div id="content2">
          <div id="header"></div>
          <div id="titleLine"></div>
          <h1>
            <span id="storyTitle" class="storyElement">Untitled Story</span>
          </h1>
          <h2>
            <span id="storySubtitle" class="storyElement"></span>
          </h2>
          <h3>
            <span id="storyAuthor" class="storyElement">Anonymous</span>
          </h3>
          <div id="passages">
            <div id="passageStart" class="passage" style="visibility: visible;">
              <div class="header"></div>
              <div class="title">
                Start
                <span class="toolbar">
                  <a class="toolbar-bookmark" href="#.0" title="Bookmark this point in the story">bookmark</a>
                  <a class="toolbar-rewind" title="Rewind the story to this point">rewind to here</a>
                </span>
              </div>
              <div class="body content">
                This is the first passage.
                <br>
                <br>
                <a class="internalLink">Next</a>
              </div>
              <div class="footer"></div>
            </div>
            <div id="passageNext" class="passage" style="visibility: visible;" data-tags="special">
              <div class="header"></div>
              <div class="title">
                Next
                <span class="toolbar">
                  <a class="toolbar-bookmark" href="#.0.3" title="Bookmark this point in the story">bookmark</a>
                  <a class="toolbar-rewind" title="Rewind the story to this point">rewind to here</a>
                </span>
              </div>
              <div class="body content">
                This is the second passage, with a special tag.
                <br>
                <br>
                <a class="internalLink">End</a>
              </div>
              <div class="footer"></div>
            </div>
            <div id="passageEnd" class="passage" style="visibility: visible;">
              <div class="header"></div>
              <div class="title">
                End
                <span class="toolbar">
                  <a class="toolbar-bookmark" href="#.0.3.1" title="Bookmark this point in the story">bookmark</a>
                  <a class="toolbar-rewind" title="Rewind the story to this point">rewind to here</a>
                </span>
              </div>
              <div class="body content">This is the final passage.</div>
              <div class="footer"></div>
            </div>
          </div>
          <p id="footer">
            This story was created with 
            <a class="externalLink" href="http://twinery.org/">Twine</a>
             and is powered by 
            <a class="externalLink" href="http://www.tiddlywiki.com/">TiddlyWiki</a>.
          </p>
        </div>
      </div>
      <div id="storeArea" hidden="">
         ...passage data is stored here...
      </div>
    </body>
    
Some notes:
  * Both the body element and the .passage element's data-tags attribute reflects the tags of the bottommost (i.e. the present) passage. This was originally used just as a CSS hook, before the advent of tagged stylesheets in version 1.4.0.
  * The #content1, #content2, #header, #titleLine, .header and .footer divs are unused by Twine's normal operations, but can be styled in any manner you like.
  * .floater is fixed to the upper-right corner of the screen. It is analogous to [[sugarcane html|Sugarcane]]'s #sidebar.