HTML
Schnittelemente

Angular 2 AngularJS ASP.NET CSS Java Language JavaScript jQuery PHP Python Language twitter-bootstrap
Suche…


Bemerkungen

Die HTML5-Standards listen das Hauptelement nicht als Teilelement auf.

Artikelelement

Das <article> -Element enthält in sich geschlossenen Inhalt wie Artikel, Blogbeiträge, Benutzerkommentare oder ein interaktives Widget, das außerhalb des Kontexts der Seite, beispielsweise per RSS, verbreitet werden kann.

  • Wenn Artikelelemente verschachtelt sind, sollte der Inhalt des inneren Artikelknotens auf das äußere Artikelelement bezogen sein.

Ein Blog ( section ) mit mehreren Beiträgen ( article ) und Kommentaren ( article ) könnte ungefähr so ​​aussehen. 

<section>
    <!-- Each individual blog post is an <article> -->
    <article>
        <header>
            <h1>Blog Post</h1>
            <time datetime="2016-03-13">13th March 2016</time>
        </header>

        <p>The article element represents a self contained article or document.</p>
        <p>The section element represents a grouping of content.</p>

        <section>
            <h2>Comments <small>relating to "Blog Post"</small></h2>

            <!-- Related comment is also a self-contained article -->
            <article id="user-comment-1">
                <p>Excellent!</p>
                <footer><p>...</p><time>...</time></footer>
            </article>
        </section>
    </article>

    <!-- ./repeat: <article> -->

</section>

<!-- Content unrelated to the blog or posts should be outside the section. -->
<footer>
    <p>This content should be unrelated to the blog.</p>
</footer>

Vermeiden Sie unnötigen Gebrauch

Wenn der Hauptinhalt der Seite (mit Ausnahme von Kopfzeilen, Fußzeilen, Navigationsleisten usw.) einfach eine Gruppe von Elementen ist. Sie können den <article> zugunsten des <main> -Elements weglassen. 

<article>
    <p>This doesn't make sense, this article has no real `context`.</p>
</article>

Stattdessen ersetzen Sie den Artikel mit einem <main> Elemente , um anzuzeigen , das den ist main für diese Seite. 

<main>
    <p>I'm the main content, I don't need to belong to an article.</p>
</main>

Wenn Sie ein anderes Element verwenden, müssen Sie sicherstellen, dass Sie die ARIA-Rolle <main> angeben, um eine korrekte Interpretation und Wiedergabe über mehrere Geräte und Nicht-HTML5-Browser hinweg zu ermöglichen. 

<section role="main">
    <p>This section is the main content of this page.</p>
</section>

Anmerkungen:

Klicken Sie hier, um die offizielle HTML5-Spezifikation für das <article> -Element zu lesen

Hauptelement

Das <main> -Element enthält den Hauptinhalt für Ihre Webseite. Dieser Inhalt ist für die einzelne Seite eindeutig und sollte an keiner anderen Stelle der Website angezeigt werden. Wiederholte Inhalte wie Kopf- und Fußzeilen, Navigation, Logos usw. werden außerhalb des Elements platziert.

  • Das <main> -Element sollte auf einer Seite höchstens einmal verwendet werden .
  • Das <main> -Element darf nicht als Nachkomme eines article , aside footer , header oder nav eingefügt werden.

Im folgenden Beispiel zeigen wir einen einzelnen Blogeintrag (und zugehörige Informationen wie Referenzen und Kommentare). 

<body>
    <header>
        <nav>...</nav>
    </header>

    <main>
        <h1>Individual Blog Post</h1>
        <p>An introduction for the post.</p>

        <article>
            <h2>References</h2>
            <p>...</p>
        </article>

        <article>
            <h2>Comments</h2> ...
        </article>
    </main>

    <footer>...</footer>
</body>

  • Der Blogbeitrag ist im Element <main> , um darauf hinzuweisen, dass dies der Hauptinhalt dieser Seite ist (und somit eindeutig auf der gesamten Website).

  • Die <header> und <footer> Tags sind Geschwister mit dem <main> Element.

Anmerkungen:

Die HTML5-Spezifikation erkennt das <main> -Element als Gruppierungselement und nicht als ein Abschnittselement .

Das Hinzufügen eines role="main" ARIA- Rollenattributs zu anderen Elementen , die als Hauptinhalt verwendet werden sollen, wird empfohlen, um Benutzeragenten zu unterstützen, die kein HTML5 unterstützen, und um mehr Kontext für diejenigen bereitzustellen, die dies tun.

Das <main> -Element hat standardmäßig die Hauptrolle und muss daher nicht angegeben werden.

Klicken Sie hier, um die offizielle HTML5-Spezifikation für das <main> -Element zu lesen

Das Element <nav> ist in erster Linie für Abschnitte gedacht, die Hauptnavigationsblöcke für die Website enthalten. Dies kann Links zu anderen Teilen der Website (z. B. Anker für ein Inhaltsverzeichnis) oder andere Seiten enthalten.

Inline-Artikel

Im Folgenden werden eine Reihe von Hyperlinks angezeigt. 

<nav>
    <a href="https://google.com">Google</a>
    <a href="https://www.yahoo.com">Yahoo!</a>
    <a href="https://www.bing.com">Bing</a>
</nav>

Verwenden Sie bei Bedarf Listenelemente

Wenn der Inhalt eine Liste von Elementen darstellt, verwenden Sie ein Listenelement, um dies anzuzeigen und die Benutzererfahrung zu verbessern.

Beachten Sie die role="navigation" , dazu weiter unten. 

<nav role="navigation">
    <ul>
        <li><a href="https://google.com">Google</a></li>
        <li><a href="https://www.yahoo.com">Yahoo!</a></li>
        <li><a href="https://www.bing.com">Bing</a></li>
    </ul>
</nav>

Vermeiden Sie unnötigen Gebrauch

<footer> -Elemente enthalten möglicherweise eine Liste mit Links zu anderen Teilen der Website (FAQ, AGB usw.). Das Fußzeile Element allein ist in diesem Fall ausreichend, brauchen Sie nicht weiter zu Ihren Links mit einem Wrap <nav> Elemente in dem <footer> . 

<!-- the <nav> is not required in the <footer> -->
<footer>
    <nav>
        <a href="#">...</a>
    </nav>
</footer>

<!-- The footer alone is sufficient -->
<footer>
    <a href="#">...</a>
</footer>

Anmerkungen:

Wenn Sie dem <nav> -Element eine ARIA-Rolle role="navigation" <nav> , wird empfohlen, Benutzeragenten zu unterstützen, die HTML5 nicht unterstützen, und denjenigen, die dies tun, mehr Kontext bereitzustellen. 

<nav role="navigation"><!-- ... --></nav>

Bildschirmleser: (Software, mit der blinde oder sehbehinderte Benutzer auf der Website navigieren können)

Benutzeragenten wie Screenreader interpretieren das <nav> -Element je nach ihren Anforderungen unterschiedlich.

  • Es könnte dem <nav> -Element beim Rendern der Seite eine höhere Priorität einräumen
  • Dies kann das Rendern des Elements verzögern
  • Es könnte die Seite auf eine bestimmte Weise anpassen, um sie an die Bedürfnisse des Benutzers anzupassen
    Beispiel: Vergrößern Sie die Textlinks innerhalb der <nav> -Elemente für sehbehinderte Personen.

Klicken Sie hier, um die offizielle HTML5-Spezifikation für das <nav> -Element zu lesen

Abschnittselement

Das <section> -Element repräsentiert einen generischen Abschnitt, um Inhalte thematisch zu gruppieren. In der Regel sollte jeder Abschnitt mit einem Überschriftenelement als untergeordnetes Element des section identifiziert werden können.

  • Sie können das <section> -Element innerhalb eines <article> und umgekehrt.
  • Jeder Abschnitt sollte ein Thema haben (ein Überschriftenelement, das diese Region identifiziert).
  • Verwenden Sie das <section> -Element nicht als allgemeinen "Container".
    Wenn Sie einen Container zum Anwenden des <div> benötigen, verwenden Sie stattdessen ein <div> .

Im folgenden Beispiel zeigen wir einen einzelnen Blogbeitrag mit mehreren Kapiteln. Jedes Kapitel ist ein Abschnitt (eine Gruppe thematisch gruppierter Inhalte, die durch die Überschriftenelemente in jedem Abschnitt identifiziert werden können) . 

<article>
    <header>
        <h2>Blog Post</h2>
    </header>
    <p>An introduction for the post.</p>
    <section>
        <h3>Chapter 1</h3>
        <p>...</p>
    </section>
    <section>
        <h3>Chapter 2</h3>
        <p>...</p>
    </section>
    <section>
        <h3>Comments</h3> ...
    </section>
</article>

Anmerkungen:

Entwickler sollten das article- Element verwenden, wenn es sinnvoll ist, den Inhalt des Elements zu syndizieren.

Klicken Sie hier, um die offizielle HTML5-Spezifikation für das <main> -Element zu lesen

Kopfelement

Das <header> -Element repräsentiert den einleitenden Inhalt für seinen nächsten Abschnittsinhalt oder Abschnittsstammelement. Ein <header> enthält normalerweise eine Gruppe von Einführungs- oder Navigationshilfen.

Hinweis: Das Header-Element ist nicht in Abschnitte unterteilt. Es wird kein neuer Abschnitt eingeführt.

Beispiele: 

<header>
  <p>Welcome to...</p>
  <h1>Voidwars!</h1>
</header>

In diesem Beispiel hat der <article> einen <header> . 

<article>
  <header>
    <h1>Flexbox: The definitive guide</h1>
  </header>
  <p>The guide about Flexbox was supposed to be here, but it turned out Wes wasn’t a Flexbox expert either.</p>
</article>

Vorgeschlagene Empfehlung des W3C

Fußzeilenelement

Das <footer> -Element enthält den Fußzeilenteil der Seite.

Hier ist ein Beispiel für das <footer> -Element, das das p Absatztag enthält 

<footer>
    <p>All rights reserved</p>
</footer>


Modified text is an extract of the original Stack Overflow Documentation
Lizenziert unter CC BY-SA 3.0
Nicht angeschlossen an Stack Overflow