clear

menu

body_html5 spec

This is a "loose" spec for the body_html5 part of TTNinjs and TTNewsML.

For the complete schema see here.

Revision history

  • 1.6 Errate em was emp. Added uri to img. 2019-12-02
  • 1.5 Added <a> to schema 2017-03-08
  • 1.4 <footer> and <h5> for changes as of 2016-10-03
  • 1.3 Clarify html-doc structure
  • 1.2 alt-attribute in <img>, div.byline before figcaption (to be html5-valid)
  • 1.1 Multiple <article>
  • 1.0 Initial revision

Image hosting

TT is currently not set up to deliver the thumbnails or previews to end users. The src/preview of <img> tags should be downloaded locally and served off suitable platforms.

Entire HTML-documents as XML

body_html5 contains an entire HTML(5)-document including <html>, <head> and <body>. It's an XML-polyglot so whilst it adhere to HTML5, it is parseable using a strict XML-parser (img tags are closed, etc).

<html>
  <head></head>
  <body>
    <article>...</article>
    <article>...</article>
    ...
</html>

The intention is that the contents of body_html5 can be saved to a file and viewed without styling and also picked apart using an XSL-transform or a jQuery alike tool.

Multiple articles

Some body_html5 contain multiple <article> elements. This is currently the case for "notispaket" and similar products. Such articles are not related (more than grouped under say "bostad"), i.e. they have different subjects. The structure of each such article follows the below example.

body_html5

<!-- body_html5 can contain one or many <article> elements -->
<article>

  <!-- An article can have multiple occurences of <section> with article text.
       data-charcount is the number of characters in this section
       excluding <figurecaption>. -->
  <section data-charcount="2377">

    <!-- Each <section> starts with a title.-->
    <h1>FN-chef frustrerad över långsamt klimatarbete</h1>

    <!-- Minor data commonly found at the beginning of articles. -->
    <div class="dat">
      <span class="vignette">Klimat</span>
      <span class="source">TT</span>
    </div>

    <!-- <h4> is a preamble which can have internal <p> and <blockquote>. -->
    <h4>
      <blockquote>Vi har ingen tid att förlora, säger FN:s generalsekreterare Antonio
        Guterres när han inviger FN:s klimattoppmöte i Madrid.</blockquote>
      <p>Han uppmanar de största utsläpparna i världen att anstränga sig mer.</p>
    </h4>

    <!-- The main body text. -->
    <div class="bodytext">
      <p>FN-chefen uttrycker frustration över att det går så långsamt att minska
        utsläppen av växthusgaser. Särskilt frustrerad är han över att de stora
        utsläpparna i världen inte gör tillräckligt.</p>

      <!-- Body text can have internal <h2> subheadlines -->
      <h2>Fel håll</h2>
      <p>Trots att inga nya klimatmål ska förhandlas fram på mötet, kommer trycket
        utifrån vara hårt på att världens regeringar visar upp en starkare vilja att
        minska utsläppen.</p>

      <!-- Quotes are marked with <blockquote> -->
      <blockquote>De största utsläpparna måste göra mer, säger Guterres.</blockquote>

      <!-- h5 is used for direct questions, typically alternated with
           blockquote -->
      <h5>Vad är den största risken?</h5>
      <blockquote>Utan fullt engagemang från de största utsläpparna kommer alla våra
        ansträngningar att undermineras, säger Guterres.</blockquote>

      <!-- Bodytext can contain unordered lists -->
      <ul>
        <li>Rad 1 i osorterad lista.</li>
        <li>Rad 2</li>
        <li>Rad 3</li>
      </ul>

      <!-- Bodytext can contain html-tables: -->
      <table>
      <tr><td>Kommun</td><td>Antal män</td><td>Antal kvinnor</td><td>Andel kvinnor (procent)</td><td>Andel män (procent)</td></tr>
      <tr><td>Lidingö</td><td>22 844</td><td>24 009</td><td>51,2</td><td>48,8</td></tr>
      <tr><td>Östersund</td><td>30 189</td><td>31 556</td><td>51,1</td><td>48,9</td></tr>
      <tr><td>Ystad</td><td>14 405</td><td>15 043</td><td>51,1</td><td>48,9</td></tr>
      </table>

    </div>

    <!-- If you handle sports results and tables from the html5 format please note that they have another body-structure than the pure text format. See the html5 schema for details. -->

    <!-- Byline for this text part. -->
    <div class="byline">Maria Davidsson/TT</div>

    <!-- There can be multiple <figure> elements -->
    <figure>
      <!-- The src is always a square cropped thumbnail, which is
           accessible without logging in.
        data-assoc-ref   is a key in the assocations collection
                         in ttninjs.
        data-preview-src is a url to an uncropped preview which
                         requires login to reach. -->
      <img src="<cropped thumbnail path>"
           data-assoc-ref="a000"
           alt="Baby elephant causing minor chaos"
           data-preview-src="<preview path>"/>

      <!-- Image byline -->
      <div class="byline">Paul White/AP/TT</div>

      <!-- Image caption -->
      <figcaption>FN:s generalsekreterare Antonio Guterres</figcaption>

    </figure>

    <!-- Specifically for material that has a broadcast time, such
    as articles about TV-programs. That information is in
    a footer.
    <footer class="broadcastinfo">
      <p>Channel 5, 20/3 at 08:00</p>
    </footer>

  </section>

  <!-- Facts & figures related to the article -->
  <aside class="facts" data-charcount="972">
    <h1>Fakta: Klimattoppmötet i Madrid</h1>
    <div class="dat">
      <span class="source">TT</span>
    </div>
    <div class="bodytext">
      <p>Den 2–13 december pågår FN:s klimattoppmöte COP25 i Madrid, som hastigt tog
        över värdskapet när Santiago i Chile backade ur på grund av oroligheter i
        landet.</p>
      <p>Runt 25 000 deltagare från nästan 200 länder deltar. Under första veckan är
        det främst tjänstemän som förhandlar, under andra veckan anländer ministrar
        och andra tunga politiker. Från Sverige deltar klimat- och miljöminister
        Isabella Lövin (MP) och biståndsminister Peter Eriksson (MP).</p>
      <p>Sverige förhandlar inte som enskilt land, utan genom EU.</p>
      <p>Den formella agendan handlar mycket om hur Parisavtalet ska implementeras.
        Regler för utsläppshandeln mellan länder ska beslutas (artikel 6) och en
        översyn ska göras av hur skador och förluster till följd av
        klimatförändringarna hanteras.</p>
      <p>Andra frågor som lyfts fram är havsfrågor och jämställdhet. Dessutom pågår
        mängder av möten utanför förhandlingsrummen där klimatorganisationer,
        näringsliv och forskare deltar.</p>
      <p>Källa: Regeringen, COP25</p>
    </div>
  </aside>

  <aside class="notes" data-charcount="2339">
    <h1>Bakgrund: Detta har hänt</h1>
    <div class="dat">
      <span class="source">TT</span>
    </div>
    <div class="bodytext">
      <p>14 november:
      ...
      </p>
    </div>
  </aside>
</article>