Sök…


Anmärkningar

HTML5-standarderna listar inte huvudelementet som ett avsnittelement.

Artikel Element

Elementet <article> innehåller fristående innehåll som artiklar, blogginlägg, användarkommentarer eller en interaktiv widget som kan distribueras utanför sidans sammanhang, till exempel med RSS.

  • När artikelelement är kapslade bör innehållet i den inre artikelnoden relateras till det yttre artikelelementet.

En blogg ( section ) med flera inlägg ( article ) och kommentarer ( article ) kan se ut så här.

<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>

Undvik onödig användning

När huvudinnehållet på sidan (exklusive sidhuvud, sidfot, navigeringsfält etc.) helt enkelt är en grupp av element. Du kan utelämna <article> förmån för <main> -elementet.

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

Istället ersätter artikeln med en <main> element för att indikera detta är main för den här sidan.

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

Om du använder ett annat element, se till att du anger <main> ARIA-rollen för korrekt tolkning och rendering på flera enheter och webbläsare som inte är HTML5.

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

Anmärkningar:

Klicka här för att läsa den officiella HTML5-specifikationen för elementet <article>

Huvudelement

Elementet <main> innehåller huvudinnehållet för din webbsida. Detta innehåll är unikt för den enskilda sidan och bör inte visas någon annanstans på webbplatsen. Upprepande innehåll som sidhuvuden, sidfot, navigering, logotyper etc. placeras utanför elementet.

  • Elementet <main> ska bara någonsin användas högst en gång på en enda sida.
  • Elementet <main> får inte inkluderas som en ättling till en article , till aside , footer , header eller nav element.

I följande exempel visar vi ett enda blogginlägg (och relaterad information som referenser och kommentarer).

<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>
  • Blogginlägget ingår i <main> -elementet för att indikera att detta är huvudinnehållet för denna sida (och därför unikt på hela webbplatsen).

  • Taggarna <header> och <footer> är syskon till <main> -elementet.


Anmärkningar:

HTML5-specifikationen känner igen <main> -elementet som ett grupperingselement och inte ett sektionselement .

Att lägga till en role="main" ARIA- rollattribut till andra element som är avsedda att användas som huvudinnehåll rekommenderas att hjälpa användaragenter som inte stöder HTML5 och även för att ge mer sammanhang för dem som gör det.

Elementet <main> standard huvudrollen och behöver därför inte tillhandahållas.

Klicka här för att läsa den officiella HTML5-specifikationen för <main> -elementet

Elementet <nav> är främst avsett att användas för avsnitt som innehåller huvudnavigeringsblock för webbplatsen, detta kan inkludera länkar till andra delar av webbsidan (t.ex. ankare för en innehållsförteckning) eller andra sidor helt.

Inline artiklar

Följande visar en inbyggd uppsättning hyperlänkar.

<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>

Använd listobjekt vid behov

Om innehållet representerar en lista med objekt, använd ett listobjekt för att visa detta och förbättra användarupplevelsen.

Observera role="navigation" , mer om detta nedan.

<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>

Undvik onödig användning

<footer> -element kan ha en lista med länkar till andra delar av webbplatsen (FAQ, T&C, etc.). Enbart sidfoten elementet är tillräckligt i det här fallet behöver du inte ytterligare wrap dina länkar med <nav> element i <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>

Anmärkningar:

Att lägga till en role="navigation" ARIA-roll till <nav> -elementet rekommenderas att hjälpa användaragenter som inte stöder HTML5 och även för att ge mer sammanhang för dem som gör det.

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

Skärmläsare: (programvara som gör att blinda eller synskadade användare kan navigera på webbplatsen)

Användaragenter som skärmläsare tolkar <nav> -elementet på olika sätt beroende på deras krav.

  • Det kan ge <nav> -elementet en högre prioritet när sidan återges
  • Det kan försena rendering av elementet
  • Det kan anpassa sidan på ett specifikt sätt för att anpassa efter användarens behov
    exempel: göra textlänkar inom <nav> -elementen större för någon som är synskadad.

Klicka här för att läsa den officiella HTML5-specifikationen för <nav> -elementet

Sektionselement

Elementet <section> representerar ett generiskt avsnitt för tematiskt gruppinnehåll. Varje sektion bör vanligtvis kunna identifieras med ett rubrikelement som section barn.

  • Du kan använda elementet <section> en <article> och vice versa.
  • Varje avsnitt bör ha ett tema (ett rubrikelement som identifierar denna region)
  • Använd inte <section> -elementet som en generell "behållare".
    Om du behöver en behållare för att tillämpa styling, använd en <div> istället.

I följande exempel visar vi ett enda blogginlägg med flera kapitel varje kapitel är ett avsnitt (en uppsättning tematiskt grupperat innehåll, som kan identifieras med rubrikelementen i varje avsnitt) .

<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>

Anmärkningar:

Utvecklare bör använda artikeln elementet när det är vettigt att syndikera innehållet i elementet.

Klicka här för att läsa den officiella HTML5-specifikationen för <main> -elementet

Header Element

Elementet <header> representerar introduktionsinnehåll för sitt närmaste avsnittinnehåll för förfäder eller rotande element. En <header> innehåller vanligtvis en grupp introduktions- eller navigationshjälpmedel.

Obs: Huvudelementet är inte avsnittinnehåll; det introducerar inte ett nytt avsnitt.


Exempel:

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

I det här exemplet har <article> en <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>

W3C föreslagen rekommendation

Elementet <footer> innehåller sidfotens sidfot.

Här är ett exempel på <footer> -element som innehåller p stycktagg.

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


Modified text is an extract of the original Stack Overflow Documentation
Licensierat under CC BY-SA 3.0
Inte anslutet till Stack Overflow