HTML/Textstrukturierung/Überschrift

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

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

Inhaltsverzeichnis


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

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

Beispiel ansehen …
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Überschriften definieren</title> </head> <body> <h1>Überschrift 1. Ordnung</h1> <h2>Überschrift 2. Ordnung</h2> <h3>Überschrift 3. Ordnung</h3> <h4>Überschrift 4. Ordnung</h4> <h5>Überschrift 5. Ordnung</h5> <h6>Überschrift 6. Ordnung</h6> </body> </html>
<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. </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.

Jede Überschrift ist ein eigener Absatz, d. h. vor und nach Überschriften sind keine Absatzschaltungen nötig. Beim Überschriftentext gelten die Aussagen zu Zeichenvorrat und HTML-eigene Zeichen.

[Bearbeiten] Überschriften richtig einsetzen

Sie sollten auf einer Seite maximal eine Überschrift der ersten Ebene einsetzen und dann den Abschnitten entsprechend ihrer Hierarchie eine Überschrift höherer Ebene verpassen:

  • Grafikdesign Farbpinsel → h1
    • Leistungen → h2
      • Print → h3
      • Web → h3
    • Kontakt → h2
      • E-Mail → h3
      • Anschrift → h3

Auch sollten Sie keine Lücken in der Hierarchie Abschnitte und Unterabschnitte haben: Auf eine Überschrift der Ebene 3 folgt eine der Ebene 4, aber nicht eine der 5. oder 6. Ebene. Oft wird das falsch gemacht, weil die Schriftgröße der semantisch korrekten Überschrift nicht passend ist – vermeiden Sie dies und gestalten Sie Ihre Überschriften mit CSS!

Hinweis

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. Verwenden Sie alternativ passendere Elemente beispielsweise p oder blockquote und gestalten Sie diese mithilfe von CSS wie gewünscht.

[Bearbeiten] Überschriften mit CSS formatieren

Wie eine Überschrift vom Browser genau dargestellt wird, darauf haben Sie mit HTML keinen Einfluss. Die Browser benutzen Default-Formatierungen, um Überschriften darzustellen. Mit Stylesheets (CSS) können Sie Überschriften jedoch nach Wunsch formatieren. Bei Verwendung von Stylesheets müssen Sie zunächst wissen, wie man CSS-Formate definieren kann. Anschließend sind Sie in der Lage, CSS-Eigenschaften anzuwenden. Maßgeblich sind im hier beschriebenen Zusammenhang folgende CSS-Eigenschaften:

Beispiel ansehen …
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Überschriften formatieren mit CSS</title>
    <style type="text/css">
      h1 {font-size:300%; color:red;}
    </style>
  </head>
  <body>
    <h1>Überschrift 1. Ordnung</h1>
  </body>
</html>
Im Beispiel wird eine Überschrift 1. Ordnung definiert, die 300 Prozent Schriftgröße hat und in roter Farbe dargestellt wird.

[Bearbeiten] siehe auch

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

[Bearbeiten] Weblinks

Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Index
Mitmachen
Werkzeuge
Spenden
SELFHTML