Mitgliederversammlung 2017


Die diesjährige Mitgliederversammlung des Vereins SELFHTML e.V. findet am 7.10.2017 um 10:00 Uhr in Berlin statt.

Die Adresse des Tagungsortes sowie die geplante Tagesordnung entnehmt ihr bitte der Seite Mitgliederversammlung 2017.

Interessierte Gäste sind gern gesehen.

Anmeldung: https://forum.selfhtml.org/events/2

HTML/Textstrukturierung/Überschrift

Aus SELFHTML-Wiki
< HTML‎ | Textstrukturierung(Weitergeleitet von H5)
Wechseln zu: Navigation, Suche

Überschriften dienen zur Strukturierung eines Dokuments und bringen die folgenden Inhalte auf einen Punkt. Sie sind das wichtigste Merkmal für den Leser, sich im Dokument zurechtzufinden.

Eine Überschrift wird durch eines der Elemente h1, h2, h3, h4, h5 oder h6 realisiert. h steht dabei für heading, Überschrift.

  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari
  • HTML 2.0
  • XHTML 1.0
  • HTML5

Allgemeines[Bearbeiten]

HTML unterscheidet 6 Überschriftenebenen, um Hierarchieverhältnisse in Dokumenten abzubilden.

Beispiel ansehen …
<body> <h1>1. Überschrift</h1> <h2>1.1 Überschrift</h2> <h3>1.1.1 Überschrift</h3> <h4>1.1.1.1 Überschrift</h4> <h5>1.1.1.1.1 Überschrift</h5> <h6>1.1.1.1.1.1 Überschrift</h6> </body>
<h[1-6]> leitet eine Überschrift ein. Die Zahl steht für die Überschriftenebene. 1 ist die höchste Ebene, 6 die niedrigste. Dahinter folgt der Text der Überschrift, im Beispiel eingeleitet durch eine Kapitel-Nummerierung, wie man sie aus Fachbüchern kennt. </h[1-6]> beendet die Überschrift und steht am Ende des Überschriftentextes.
Beachten Sie: Die Zahlen bei einleitendem und abschließendem Tag müssen gleich sein.

Überschriften sind Blockelemente, dass heißt vor und nach Überschriften sind keine Absatzschaltungen nötig.

Überschriften richtig einsetzen[Bearbeiten]

Hierarchien beachten[Bearbeiten]

Sie sollten auf einer Seite maximal eine Überschrift der ersten Ebene einsetzen und dann den Abschnitten entsprechend ihrer Hierarchie eine Überschrift tieferer Ebene verpassen.

Beachten Sie: Das h1-Element sollte die Seitenüberschrift sein, nicht die Website-Kennung.
Beispiel: Überschriften verschiedener Hierarchieebenen ansehen …
<h1>Überschriften</h1>

  <h2>Allgemeines</h2>

  <h2>Überschriften richtig einsetzen</h2>
     <h3>Hierarchien</h3>
     <h3>Untertitel</h3>
     <h3>Zitate und Hervorhebungen</h3>

  <h2>Überschriften mit CSS formatieren</h2>

  <aside>
    <h2>Quellen</h2>
      <h3>siehe auch</h3>
        <h4>Referenzen</h4>     
      <h3>Weblinks</h3>
  </aside>
Das Beispiel enthält die Überschriften dieser Seite. Dabei sind sie von h1 für die Seitenüberschrift, h2 für die Kapitel bis hin zu h3 und h4 für Unterkapitel hierarchisch abgestuft.

Der inhaltliche Aufbau der Seite ist so sofort erkennbar.

Es spielt keine Rolle, ob die Überschriften direkte Kindelemente von body sind oder innerhalb von Seitenstrukturierungselementen wie (hier) aside oder article bzw. section notiert werden.
Beachten Sie: Sie sollten keine Lücken in der Hierarchie der Abschnitte und Unterabschnitte haben: Auf eine Überschrift der Ebene 2 folgt eine der Ebene 3, aber nicht eine der 4. oder 5. Ebene. Oft wird das falsch gemacht, weil die Schriftgröße der semantisch korrekten Überschrift nicht passend ist – vermeiden Sie dies, indem Sie Ihre Überschriften mittels CSS Ihren Anforderungen gemäß gestalten!

Untertitel[Bearbeiten]

Nicht immer kann man von einer Überschrift auf den Inhalt des eigentlichen Textes schliessen, in solchen Fällen ist es sehr nützlich, im Untertitel (engl: subtitle, auch Unterüberschrift (engl: subline zu headline) noch zusätzliche Infos unterzubringen.

Verwenden Sie hier keine Überschrift tieferer Kategorie, sondern einen normalen Textabsatz:

Beispiel: Überschrift mit Untertitel
<header>
  <h1>Schreinerei Meier</h1>
  <p>Ihr Partner für alles</p>
</header>
Innerhalb eines header-Elements befindet sich die h1-Überschrift und ein Untertitel. Dieser soll kleiner dargestellt werden. Da er aber kein Teil der Überschrift an sich ist, wird er in einem Absatz ausgezeichnet.

Zitate und Hervorhebungen[Bearbeiten]

Falls Sie einen Text hervorheben möchten, beispielsweise ihr Motto oder ein Zitat, überlegen Sie sich gut, ob es vom Sinn her die Überschrift des folgenden Abschnitts ist.

Empfehlung: Verwenden Sie alternativ passendere Elemente beispielsweise p oder blockquote und gestalten Sie diese wie gewünscht mithilfe von CSS.

Gestaltung[Bearbeiten]

Praktische Verwendung[Bearbeiten]

Überschriften sollten kurz und aussagekräftig sein. Sie können auch über zwei Zeilen gehen, dabei ist jedoch zu beachten, dass auf kleineren Viewports mehr Zeilen entstehen.

Falls ein Inhaltsverzeichnis existiert, sollten die Einträge den Überschriften genau entsprechen.

Überschriften mit CSS formatieren[Bearbeiten]

Verwenden Sie CSS, um die Überschriften nach Ihren Vorstellungen zu formatieren.

Beispiel: Formatierung durch CSS ansehen …
h1 {}	
h2 {
  color: darkred;
  padding-left: 1em;
}
h3 {
  color: red;
  padding-left: 2em;
}
h4 {
  color: salmon;
  padding-left: 3em;  
}
Im Beispiel werden die Überschriften h1 - h4 so formatiert, dass sie mit tieferer Hierarchie weiter eingerückt dargestellt werden. Zusätzlich wird die Farbe heller.

Siehe auch[Bearbeiten]

CSS[Bearbeiten]

Referenzen[Bearbeiten]

  • Referenz: h1
  • Referenz: h2
  • Referenz: h3
  • Referenz: h4
  • Referenz: h5
  • Referenz: h6

Weblinks[Bearbeiten]