Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://developer.cdn.mozilla.net/de/docs/Web/HTML/Reference/Elements/Heading_Elements below:

<h1>–<h6>: Die HTML-Abschnittsüberschriftselemente - HTML

Die <h1> bis <h6> HTML-Elemente repräsentieren sechs Ebenen von Abschnittsüberschriften. <h1> ist die höchste Abschnittsebene und <h6> ist die niedrigste. Standardmäßig erzeugen alle Überschriftselemente ein Block-Level-Element im Layout, das in einer neuen Zeile beginnt und die volle verfügbare Breite im enthaltenden Block ausnutzt.

<h1>Beetles</h1>
<h2>External morphology</h2>
<h3>Head</h3>
<h4>Mouthparts</h4>
<h3>Thorax</h3>
<h4>Prothorax</h4>
<h4>Pterothorax</h4>

h1,
h2,
h3,
h4 {
  margin: 0.1rem 0;
}

h1 {
  font-size: 2rem;
}

h2 {
  font-size: 1.5rem;
  padding-left: 20px;
}

h3 {
  font-size: 1.2rem;
  padding-left: 40px;
}

h4 {
  font-size: 1rem;
  font-style: italic;
  padding-left: 60px;
}

Diese Elemente enthalten nur die globalen Attribute.

• Überschrifteninformationen können von Benutzeragenten genutzt werden, um automatisch ein Inhaltsverzeichnis für ein Dokument zu erstellen.
• Verwenden Sie keine Überschriftselemente, um Text zu vergrößern. Verwenden Sie stattdessen die CSS font-size-Eigenschaft.
• Überspringen Sie keine Überschriftsebenen: Beginnen Sie immer mit <h1>, gefolgt von <h2> und so weiter.

Die Verwendung mehrerer <h1>-Elemente auf einer Seite ist zwar durch den HTML-Standard erlaubt (solange sie nicht verschachtelt sind), wird jedoch nicht als Best Practice angesehen. Eine Seite sollte im Allgemeinen ein einziges <h1>-Element haben, das den Inhalt der Seite beschreibt (ähnlich wie das <title>-Element des Dokuments).

Hinweis: Das Verschachteln mehrerer <h1>-Elemente in verschachtelten sectioning elements war in älteren Versionen des HTML-Standards erlaubt. Dies wurde jedoch nie als Best Practice angesehen und ist jetzt nicht mehr konform. Lesen Sie mehr in There Is No Document Outline Algorithm.

Es wird bevorzugt, nur ein <h1> pro Seite zu verwenden und Überschriften zu verschachteln, ohne Ebenen zu überspringen.

Vor Mai 2025 spezifizierte der HTML-Standard, dass <h1>-Elemente in einem <section>, <article>, <aside> oder <nav> Element als <h2> (kleinere font-size mit angepasstem margin-block) dargestellt werden sollten, oder als <h3> wenn weiter verschachtelt, und so weiter. Dieser spezielle kontextabhängige Standardstil wurde nun entfernt.

Um eine konsistente <h1>-Darstellung für Browser sicherzustellen, die den alten kontextabhängigen Standardstil implementieren, verwenden Sie die folgende Stilregel:

h1 {
  margin-block: 0.67em;
  font-size: 2em;
}

Alternativ können Sie, um andere Stilregeln, die <h1> ansprechen, nicht zu überschreiben, :where() verwenden, welches keine Spezifität aufweist:

:where(h1) {
  margin-block: 0.67em;
  font-size: 2em;
}

Eine übliche Navigationstechnik für Benutzer von Screenreading-Software besteht darin, schnell von Überschrift zu Überschrift zu springen, um den Inhalt der Seite zu bestimmen. Aus diesem Grund ist es wichtig, eine oder mehrere Überschriftsebenen nicht zu überspringen. Dies könnte zu Verwirrung führen, da die Person, die auf diese Weise navigiert, sich fragen könnte, wo die fehlende Überschrift ist.

Machen Sie das nicht:

<h1>Heading level 1</h1>
<h3>Heading level 3</h3>
<h4>Heading level 4</h4>

Bevorzugen Sie dies:

<h1>Heading level 1</h1>
<h2>Heading level 2</h2>
<h3>Heading level 3</h3>

Überschriften können als Unterabschnitte verschachtelt werden, um die Organisation des Inhalts der Seite widerzuspiegeln. Die meisten Screenreader können auch eine geordnete Liste aller Überschriften auf einer Seite erzeugen, die einer Person helfen kann, schnell die Inhaltshierarchie zu bestimmen und zu verschiedenen Überschriften zu navigieren.

Gegeben ist die folgende Seitenstruktur:

<h1>Beetles</h1>

<h2>Etymology</h2>

<h2>Distribution and Diversity</h2>

<h2>Evolution</h2>
<h3>Late Paleozoic</h3>
<h3>Jurassic</h3>
<h3>Cretaceous</h3>
<h3>Cenozoic</h3>

<h2>External Morphology</h2>
<h3>Head</h3>
<h4>Mouthparts</h4>
<h3>Thorax</h3>
<h4>Prothorax</h4>
<h4>Pterothorax</h4>
<h3>Legs</h3>
<h3>Wings</h3>
<h3>Abdomen</h3>

Screenreader würden eine Liste generieren wie diese:

1. h1 Käfer

   1. h2 Etymologie

   2. h2 Verbreitung und Vielfalt

   3. h2 Evolution

      1. h3 Spätpaläozoikum
      2. h3 Jura
      3. h3 Kreidezeit
      4. h3 Känozoikum

   4. h2 Äußere Morphologie

      1. h3 Kopf

         1. h4 Mundwerkzeuge

      2. h3 Thorax

         1. h4 Prothorax
         2. h4 Pterothorax

      3. h3 Beine

      4. h3 Flügel

      5. h3 Abdomen

Wenn Überschriften verschachtelt sind, dürfen Überschriftenebenen beim Schließen eines Unterabschnitts "übersprungen" werden.

• Überschriften • Seitenstruktur • WAI Web Accessibility Tutorials
• MDN Verständnis von WCAG, Guideline 1.3 Erklärungen
• Understanding Success Criterion 1.3.1 | W3C Understanding WCAG 2.0
• MDN Verständnis von WCAG, Guideline 2.4 Erklärungen
• Understanding Success Criterion 2.4.1 | W3C Understanding WCAG 2.0
• Understanding Success Criterion 2.4.6 | W3C Understanding WCAG 2.0
• Understanding Success Criterion 2.4.10 | W3C Understanding WCAG 2.0

Eine weitere gängige Navigationstechnik für Benutzer von Screenreading-Software besteht darin, eine Liste von sectioning content zu generieren und diese zu verwenden, um das Layout der Seite zu bestimmen.

Abschnittsinhalte können durch die Kombination der Attribute aria-labelledby und id gekennzeichnet werden, wobei das Label den Zweck des Abschnitts prägnant beschreibt. Diese Technik ist nützlich, wenn es mehr als ein sectioning Element auf derselben Seite gibt.

<header>
  <nav aria-labelledby="primary-navigation">
    <h2 id="primary-navigation">Primary navigation</h2>
    <!-- navigation items -->
  </nav>
</header>

<!-- page content -->

<footer>
  <nav aria-labelledby="footer-navigation">
    <h2 id="footer-navigation">Footer navigation</h2>
    <!-- navigation items -->
  </nav>
</footer>

In diesem Beispiel würde die Screenreader-Technologie ankündigen, dass es zwei <nav>-Abschnitte gibt, einen namens "Primäre Navigation" und einen namens "Fußzeilen-Navigation". Wenn keine Labels bereitgestellt würden, müsste die Person, die Screenreading-Software verwendet, möglicherweise den Inhalt jedes nav-Elements untersuchen, um deren Zweck zu bestimmen.

• Verwendung des Attributs aria-labelledby
• Abschnitte kennzeichnen • Seitenstruktur • W3C WAI Web Accessibility Tutorials

Der folgende Code zeigt alle Überschriftsebenen in Gebrauch.

<h1>Heading level 1</h1>
<h2>Heading level 2</h2>
<h3>Heading level 3</h3>
<h4>Heading level 4</h4>
<h5>Heading level 5</h5>
<h6>Heading level 6</h6>

Der folgende Code zeigt einige Überschriften mit Inhalten darunter.

<h1>Heading elements</h1>
<h2>Summary</h2>
<p>Some text here…</p>

<h2>Examples</h2>
<h3>Example 1</h3>
<p>Some text here…</p>

<h3>Example 2</h3>
<p>Some text here…</p>

<h2>See also</h2>
<p>Some text here…</p>

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4