HTML
Snittelement
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:
<main>elementets ättlingar är inte tillåtna inom en<article>
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 enarticle, tillaside,footer,headerellernavelement.
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 .
- ARIA-rollattribut :
main(standard) ,presentationAtt 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
Nav Element
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:
<main>elementets ättlingar är inte tillåtna inom en<nav>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>
Footer Element
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>