HTML5 Outliner

HTML5 Outliner is een webapplicatie die bedoeld is voor het maken van een inhoudsopgave van een HTML5-document. Op deze pagina vind je een beknopte beschrijving van deze app.
Het document kan op internet staan, of op je eigen PC. Je kunt het ook laten werken op code die je met copy - paste in een tekstveld plakt.

Je vindt de Outliner op http://gsnedders.html5.org/outliner/.

Om de Outliner goed te laten werken, moet het document als volgt zijn gedeeld:

• Je maakt de koppen met <h.> … </h.>-tags.
• De broodtekst staat tussen <section> … </section>-tags.
• Elke section kan weer <h.> … </h.>-tags bevatten,
• elk gevolgd door een <section> … </section>-tag.
• enzovoort.

Voorbeeld:
De code:

<h1>Inleiding</h1>
<section>
<h1>Inleiding Paragraaf A</h1>
  Tekst van Paragraaf A
<h1>Inleiding Paragraaf B</h1>
  Tekst van Paragraaf B
</section>
 
<h1>Uitwerking</h1>
<section>
<h1>Uitwerking Paragraaf X</h1>
  Tekst van Paragraaf X
<h1>Uitwerking Paragraaf Y</h1>
  Tekst van Paragraaf Y
<h1>Uitwerking Paragraaf Z</h1>
  Tekst van Paragraaf Z
</section>
<h1>Conclusie</h1>

Wordt door Outliner uitgewerkt als:

1. Inleiding
   1. Inleiding Paragraaf A
   2. Inleiding Paragraaf B
2. Uitwerking
   1. Uitwerking Paragraaf X
   2. Uitwerking Paragraaf Y
   3. Uitwerking Paragraaf Z
3. Conclusie

In het bovenstaande is alleen <h1> gebruikt, voor zowel de koppen als de paragrafen. Je kunt voor de paragrafen natuurlijk ook <h2>, <h3>, enz. gebruiken.

Voorbeeld:
De code:

<h1>Inleiding</h1>
<h2>Inleiding Paragraaf A</h2>
  Tekst van Paragraaf A
<h2>Inleiding Paragraaf B</h2>
  Tekst van Paragraaf B
 
<h1>Uitwerking</h1>
<h2>Uitwerking Paragraaf X</h2>
  Tekst van Paragraaf X
<h2>Uitwerking Paragraaf Y</h2>
  Tekst van Paragraaf Y
<h2>Uitwerking Paragraaf Z</h2>
  Tekst van Paragraaf Z
<h1>Conclusie</h1>

geeft in Outliner het zelfde resultaat als in het eerste voorbeeld. Merk op dat de <section>-tags in dit voorbeeld zijn weggelaten. Outliner heeft <section>-tags alleen nodig als de koppen van hoofdstukken en paragrafen met dezelfde <h.>-tag zijn gemaakt.
In het tweede voorbeeld wordt <h1> gebruikt voor de hoofdstukken en <h2> voor de paragrafen.

De tag <hgroup> … </hgroup>
De HTML5-specificatie heeft een tijdje de tag <hgroup> bevat, bedoeld om koppen van gelijk of verschillend niveau samen te voegen tot één blok. Deze tag is weer uit de HTML5-specificatie verdwenen, vermoedelijk omdat deze tag geen toegevoegde waarde heeft (lees: geen nut heeft). Met HTML5 Outliner is er nog wel een funtie: Je kunt met <hgroup> de weergave van koppen tegenhouden:
Alleen de inhoud van de eerste <h.>-tag binnen de <hgroup> wordt weergegeven.

Voorbeeld:
De code:

<hgroup>
<h1>Inleiding</h1>
<h2>Inleiding Paragraaf A</h2>
  Tekst van Paragraaf A
<h2>Inleiding Paragraaf B</h2>
  Tekst van Paragraaf B
</hgroup>
 
<hgroup>
<h1>Uitwerking</h1>
<h2>Uitwerking Paragraaf X</h2>
  Tekst van Paragraaf X
<h2>Uitwerking Paragraaf Y</h2>
  Tekst van Paragraaf Y
<h2>Uitwerking Paragraaf Z</h2>
  Tekst van Paragraaf Z
</hgroup>
<h1>Conclusie</h1>

geeft in Outliner dit resultaat:

1. Inleiding
2. Uitwerking
3. Conclusie

Hoe bruikbaar is dit?
Meestal is het inzetten van dit programma te veel werk in verhouding tot de omvang van het document. HTML5 kan worden gebruikt om behoorlijk complexe documenten te maken, tot hele boekwerken aan toe. Dan loont het zeker de moeite om HTML5 Outliner te gebruiken. In de meeste gevallen gaat het handmatig sneller. met behulp van geordende lijsten (<ol>).

• Als je een website ontwikkelt in HTML5 kun je voor grote documenten met HTML5 Outliner snel een inhoudsopgave genereren van dat document, mits je je houdt aan de hierboven genoemde indeling.
• De Outliner crasht als er geen <h.> … </h.>-tags in het document zitten.
• Als je de code van de gemaakte inhoudsopgave wilt zien en/of kopiëren, moet je de 'bron weergeven'-functie van je browser gebruiken. HTML5 Outliner heeft daar zelf geen voorzieningen voor.
• Als je code die Outliner heeft gemaakt wilt gebruiken in je eigen site, kun je die zelf opmaken met CSS.
• Wees er op bedacht dat:
  • Interne en externe hyperlinks worden niet gevolgd.
  • Met documenten die niet in HTML5 zijn geschreven werkt het niet goed.
  • Als het document in een frameset staat, crasht de Outliner.
• HTML5 Outliner is niet geschikt (en ook niet bedoeld) voor het maken van een sitemap van je website. Voor het maken van een sitemap is op internet ruim voldoende software voorhanden. Dat geldt overigens ook voor het maken van een inhoudsopgave. De functionaliteit van HTML5 Outliner is dus zeker niet uniek.