HTML/outline

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Dieser Artikel beschäftigt sich mit der Struktur von HTML-Dokumenten. Für die CSS-Eigenschaft siehe CSS/Eigenschaften/äußere Gestaltung/Außenlinie/outline.


Unter der outline eines HTML-Dokumentes wird seine Struktur verstanden.

Inhaltsverzeichnis

[Bearbeiten] Methoden zur Strukturierung von HTML-Dokumenten

[Bearbeiten] HTML-Dokumente mit Überschriften strukturieren

Seit jeher können Sie HTML-Dokumente mittels Überschriften strukturieren. Dazu verwenden Sie Überschriften der Ordnungen 1 bis 6.

Eine mögliche Überschriften-Struktur kann so Aussehen:

  • Name des Webangebotes (Überschrift 1. Ordnung)
  • Name der Seite / des Artikels (Überschrift 2. Ordnung)
  • Eine Kapitelüberschrift (Überschrift 3. Ordnung)
  • Noch eine Kapitelüberschrift (Überschrift 3. Ordnung)
Beispiel
  <body>
    <h1>Name des Webangebotes</h1>
    <h2>Name der Seite / des Artikels (Überschrift 2. Ordnung)</h2>
    <h3>Eine Kapitelüberschrift (Überschrift 3. Ordnung)</h3>
    <h3>Noch eine Kapitelüberschrift (Überschrift 3. Ordnung)</h3>
  </body>

Sowohl Menschen als auch Software sollten in der Lage sein, diese Überschriftenstruktur zu verstehen. Für Software ist das kein Problem, denn die Überschriften enthalten dank des hierarchischen Aufbaus alle nötigen Informationen. Für Menschen muss man ein wenig Aufwand betreiben. Die einfachste Darstellung sieht vor, dass Überschriften umso größer sind, je wichtiger sie sind. Eine Überschrift erster Ordnung wird von Browsern daher auch größer dargestellt, als eine Überschrift zweiter Ordnung.

[Bearbeiten] HTML-Dokumente in sinnvolle Bereiche (Sektionen) unterteilen

HTML5 bietet eine weitere Möglichkeit der Strukturierung. Webseiten können in Sektionen unterteilt werden. Sektionen sind Bereiche, die einen Sinnzusammenhang bilden. Auf einer Nachrichten-Seite können Sie Beispiel alle Nachrichten zu Inland und Ausland in je einer Sektion zusammen fassen. Dazu gruppieren Sie alle Artikel zu dem jeweiligen Thema mittels <section></section>

Beispiel
 <body>
    <h1>Nachrichten für Groß und Klein</h1>
    <section>
      <h2>Inland</h2>
      <article>
        <h3>1. Nachricht</h3>
        <p>...</p>
      </article>
      <article>
        <h3>2. Nachricht</h3>
        <p>...</p>
      </article>
    </section>
    <section>
      <h2>Ausland</h2>
      <article>
        <h3>1. Nachricht</h3>
        <p>...</p>
      </article>
      <article>
        <h3>2. Nachricht</h3>
        <p>...</p>
      </article>
    </section>
 </body>

Sektionen können Sie ineinander verschachteln und somit eine Hierarchie erstellen. Der HTML-Outline-Algorithmus sieht vor, dass alle Sektionen mit einer Überschrift 1. Ordnung überschrieben werden könnten und sich die Hierarchie durch die Verschachtelung der übergeordneten und untergeordneten Sektionen ergibt. Gegenwärtig ist der Outline-Algorithmus allerdings weder in Browsern noch in assistiven Technologien implementiert, sodass angeraten wird, sich nicht auf diesen zu verlassen, sondern die Hierarchie der Überschriften mit h1h6 anzugeben.

Elemente, die einen Sinnzusammenhang bilden, sind

Jede Sektion sollte mit einem header oder einer Überschrift beginnen und darf einen footer enthalten, der sich dann genau auf diese Sektion bezieht, in der er sich befindet.

[Bearbeiten] siehe auch

[Bearbeiten] Weblinks

Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Index
Mitmachen
Werkzeuge
Spenden
SELFHTML