HTML5 语义元素

Semantik (från antikens Grekland) kan definieras som studiet av språks mening.

Semantiska element är element med innebörd.

Vad är semantiska element?

Semantiska element beskriver tydligt sitt innebörd för både webbläsare och utvecklare.

IsemantiskExempel på element: <div> och <span> - kan inte tillhandahålla information om sitt innehåll.

SemantikExempel på element: <form>, <table> och <img> - definierar klart sitt innehåll.

Webbläsarstöd

Ja Ja Ja Ja Ja

Alla moderna webbläsare stöder HTML5-semantiska element.

Dessutom kan du "hjälpa" äldre webbläsare att hantera "okända element".

Lär dig mer om detta kapitel i en HTML5-webbläsare.

Nya semantiska element i HTML5

Många webbplatser innehåller HTML-kod för att visa navigationsindikatorer, rubriker och sidfot, till exempel: <div id="nav"> <div class="header"> <div id="footer">.

HTML5 erbjuder nya semantiska element för att definiera olika delar av sidan:

  • <article>
  • <aside>
  • <details>
  • <figcaption>
  • <figure>
  • <footer>
  • <header>
  • <main>
  • <mark>
  • <nav>
  • <section>
  • <summary>
  • <time>

HTML5 语义元素

HTML5 语义元素

HTML5 <section>-elementet

<section>-elementet definierar en avsnitt i dokumentet.

Enligt W3C:s HTML-dokumentation: "En avsnitt (section) är en grupp av innehåll med ett ämne, vanligtvis med en rubrik."

Webbplatsens startsida kan delas upp i avsnitt som introduktion, innehåll, kontaktinformation och så vidare.

Exempel

<section>
   <h1>WWF</h1>
   <p>The World Wide Fund for Nature (WWF) is....</p>
</section>

Prova själv

HTML5 <article>-elementet

Elementet <article> definierar självständigt innehåll.

Dokument har ett eget meningsinnehåll och kan läsas självständigt från övrigt innehåll på webbplatsen.

Tillämpningsscenarier för <article>-elementet:

  • Forum
  • Bloggar
  • Nyheter

Exempel

<article>
   <h1>Vad gör WWF?</h1>
   <p>WWF:s mission är att stoppa förstörelsen av vår planets naturliga miljö,</p>
  och bygga en framtid där människor lever i harmoni med naturen.</p>
</article>

Prova själv

Nedäknade semantiska element

I HTML5-standarden definieras elementet <article> som en fullständig och självinnehållande block av relaterade element.

Elementet <section> definieras som en block av relaterade element.

Kan vi använda denna definition för att bestämma hur vi ska nesting element? Nej, vi kan inte!

På internet kommer du att hitta HTML-sidor där <section>-element innehåller <article>-element, och sidor där <article>-element innehåller <sections>-element.

Du kommer också att märka att <section>-element innehåller <section>-element, och att <article>-element innehåller <article>-element.

HTML5 <header>-elementet

Elementet <header> definierar rubriken för dokumentet eller avsnittet.

Elementet <header> bör användas som en behållare för introduktionsinnehåll.

Ett dokument kan ha flera <header>-element.

Nedan visas ett exempel på hur en rubrik definieras för ett artikel:

Exempel

<article>
   <header>
     <h1>Vad gör WWF?</h1>
     <p>WWF:s mission:</p>
   </header>
   <p>WWF:s mission är att stoppa förstörelsen av vår planets naturliga miljö,</p>
  och bygga en framtid där människor lever i harmoni med naturen.</p>
</article>

Prova själv

HTML5 <footer>-elementet

Elementet <footer> definierar fotnoten för dokumentet eller avsnittet.

Elementet <footer> bör tillhandahålla information om dess innehåll.

Fotnoter innehåller vanligtvis dokumentets författare, copyrightinformation, användarvillkorssänkningar, kontaktinformation och så vidare.

Du kan använda flera <footer>-element i ett dokument.

Exempel

<footer>
   <p>Postat av: Hege Refsnes</p>
   <p>Kontaktinformation: <a href="mailto:someone@example.com">
  <a href="someone@example.com"></a>.</p>
</footer>

Prova själv

HTML5 <nav>-element

<nav>-elementet definierar en samling navigationslänkar.

<nav>-elementet syftar till att definiera stora navigationslänkblock. Men inte alla länkar i dokumentet bör vara inom <nav>-elementet!

Exempel

<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>

Prova själv

HTML5 <aside>-element

<aside>-elementet innehåller viss innehåll som ligger utanför huvudinnehållet på sidan (t.ex. sidopanel).</aside>

Innehållet i aside bör vara relaterat till det omgivande innehållet.

Exempel

<p>Min familj och jag besökte Epcot Center denna sommar.</p>
<aside>
   <h4>Epcot Center</h4>
   <p>Epcot Center är en temapark i Disney World, Florida.</p>
</aside>

Prova själv

HTML5 <figure> och <figcaption>-element

I böcker och tidningar är det vanligt att det finns rubriker som matchar bilderna.

Syftet med rubriken (caption) är att lägga till en synlig förklaring till bilden.

Genom HTML5 kan bilder och rubriker kombineras i <figure> i elementet:

Exempel

<figure>
   <img src="pic_mountain.jpg" alt="The Pulpit Rock" width="304" height="228">
   <figcaption>Fig1. - The Pulpit Pock, Norge.</figcaption>
</figure>

Prova själv

<img> Element definierar bild.<figcaption> Element definierar rubrik.

Varför använda HTML5-element?

Om man använder HTML4, kommer utvecklaren att använda sina favoritattributnamn för att ställa in stilen på sidans element:

Rubrik, topp, botten, sidfot, meny, navigering, huvud, behållare, innehåll, artikel, sidopanel, toppnavigering, ...

På detta sätt kan webbläsaren inte känna igen korrekt webbinnehåll.

Och genom HTML5-element, som t.ex. <header> <footer> <nav> <section> <article>, löses detta problem enkelt.

Enligt W3C, semantiska nätverken:

“Tillåter delning och återanvändning av data mellan applikationer, företag och grupper.”

Semantiska element i HTML5

Nedan listas de nya semantiska elementen i HTML5 i alfabetisk ordning.

Dessa länkar pekar på den fullständiga HTML-referenshandboken.

Taggar Beskrivning
<article> Definiera ett artikel.
<aside> Definiera innehåll utanför sidinnehållet.
<details> Definiera extra detaljer som användaren kan visa eller dölja.
<figcaption> Definiera titeln för <figure>-elementet.
<figure> Bestäm innehåll utanför sidinnehållet, som till exempel illustrationer, diagram, foton, kodlistor osv.
<footer> Definiera sidfoten för dokumentet eller avsnittet.
<header> Bestäm rubriken för dokumentet eller avsnittet.
<main> Bestäm huvudinnehållet i dokumentet.
<mark> Definiera viktiga eller betonade texter.
<nav> Definiera navigeringslänkar.
<section> Definiera en avsnitt i dokumentet.
<summary> Definiera den synliga titeln för <details>-elementet.
<time> Definiera datum/tid.