Vilka nya element finns i HTML5?

Som du kanske läst i vår artikel om HTML5 och semantik så gör ett korrekt användande av HTML5 din webbsida mer semantisk. För att åstadkomma detta finns ett antal nya HTML-element som tillkommit till HTML5-standarden. I den här artikeln går vi genom de nya element som tillkommit och hur de fungerar.

Semantiska och strukturella HTML5 element

article

Innehållet skall representera en artikel och innehållet i en article-tagg ska klara av att vara fristående från resten av webbsidan, exempelvis som innehåll i en RSS-feed eller dylikt. Ett typiskt innehåll i denna tagg kan vara en bloggpost, en nyhetsartikel eller användarinskickat innehåll.

aside

En aside-tagg ska representera innehåll som är relaterat till annat innehåll, exempelvis en article, men som ändå kan konsumeras allena, exempelvis ett citat taget ur en artikel. Ofta ser du aside-innehåll i exempelvis sidebars.

bdi

En bdi-tagg kan användas när du behöver markera upp text kräver ett annat textflöde, exempelvis visa arabisk text mitt i ett textflöde av engelsk eller svensk text. Så en bdi-tagg i vänster-till-höger innehåll indikerar att just i denna tagg flödar texten höger-till-vänster

command

Är till för att specificera en kommando-knapp som en användare kan använda. command måste finnas i ett menu-element för att visas. Tänk på command som radiogroups eller checkboxes. Stöds inte idag i någon modern webbläsare.

data

data-taggen är till för att kunna lägga till information till innehållet som maskiner eller annan mjukvara kan läsa. Ett exempel kan vara att för en användare är det enklare att läsa ordning som "först", "tvåa" och "trea" medans mjukvara hellre konsumerar positionerna 1, 2 och 3. Detta kan du enkelt åstadkomma med <data value="1">först</data>

details

details fungerar bäst ihop med summary Details låter dig gömma delar i en expanderbar beskrivning. Kombinerat med summary så kan man toggla mellan att bara visa det som finns i summary och hela innehållet i details-elementet

figcaption

figcaption används för caption i ett figure-element. Man kan se på figcaption som undertexten till de element du visar i ditt figure-element

figure

Skall användas tillsammans med figcaption och bör innehålla diagram, illustrationer, foton och kodexempel (eller annat). Detta element ska kunna stå för sig självt och inte förstöra kontexten vari det visas om det tas bort.

footer

Footer innehåller oftast information om den som skrivit dokumentet, copyright information, länkar till användarvillkor, integritets policy och dylikt. Footer kan förekomma på flera ställen i ett dokument, men kan inte innehålla en header-tagg och ej heller finnas i en header-tagg

Kontaktinformation i en footer-tagg ska vara taggad med address-taggen

header

Så här ser kan ett header-element se ut:

<header>
  <hgroup>
    <h1>Viktig rubrik</h1>
    <h2>En nästan lika viktig rubrik</h2>
  </hgroup>
</header>

Tanken med header är att samla informationen som är en sidas sidhuvud, det vill säga företagsnamn, logotyp eller annan grafik, titel på sidan. header kan användas både för sidhuvud, men kan även användas i andra kontexter i ett dokument, du kan exempelvis välja att samla information om en article i ett header-element. Det får finnas fler header-element på en sida.

hgroup

Tagg som används för att i en header-tagg samla flera headings i en grupp.

mark

Taggen används för att markera delar i ditt innehåll, men som du inte vill sätta någon semantisk betydelse på. Jämför denna tagg med hur du använder en gul penna när du markerar saker i en text du läser. Du skulle exempelvis kunna använda mark för att markera upp text som är träffar på det användaren söker på på din sida och sedan stylea dessa taggar i din css på ett sätt som ökar användarupplevelsen.

meter

Taggen meter är till för att representera värden som kan mätas på en skala. Den tar en massa attribut, value, min, max, low, high och optimum. Nedan kan du se ett exempel på hur man kan använda meter-taggen:

<p>Ditt betyg är: <meter min="0" max="5">3 av 5</meter></p>

nav

Representerar navigationen i ett HTML-dokument. I ett nav-element kan man ha länkar till andra delar av sin webbsida eller länkar som länkar inom dokumentet. Du behöver inte gruppera alla länkar i ett nav-element, det är främst avsett för sidans huvudnavigering. Exempelvis listor med länkar i sidfoten passar kanske bättre i ett footer-element.

<nav>
  <h2>Navigering</h2>
  <ul>
    <li><a href="/">Start</a></li>
    <li><a href="/om/">Om oss</a></li>
    <li><a href="/kontakt/">Kontakta oss</a></li>
  </ul>
</nav>

ruby

Ett ruby-element tillåter en eller flera fraser av innehåll att bli markerade med ruby-annotering. Ruby annotering är korta texter som oftast används för att beskriva och guida uttalet av exempelvis östasiatiska tecken.

rp

Används för att visa paranteser runt ett rt-element för webbläsare som inte stöder ruby-annoteringar. Klienter som stöder rp döljer dessa via display:none. Se exempel nedan:

<ruby>漢<rp> (</rp><rt>かん</rt><rp>) </rp>字<rp> (</rp><rt>じ</rt><rp>) </rp></ruby>

rt

En behållare för ruby-text inuti ett ruby-element. rt-innehåll blir den lilla annoteringen som renderas ovanför horisontell text eller till höger om vertikal text.

section

Representerar en sektion i ett dokument. En sektion är en gruppering som kan ha en egen header, eventuellt en footer. Ett typiskt exempel kan vara en förstasida på web webbplats som är indelad i sektioner för introduktion, kontaktinformation och nyheter, alla dessa delar kan markeras upp som section-taggar.

summary

summary fungerar bäst ihop med details Details låter dig gömma delar i en expanderbar beskrivning. Kombinerat med summary så kan man toggla mellan att bara visa det som finns i summary och hela innehållet i details-elementet.

time

Representerar ett precist tidslag. Ska presentera tid och datum på ett sätt som är lätt att läsa för en maskin. Innehållet i taggen ska vara läsbart och passa kontexten, med attributet datetime, kan man specificera tid och datum mer specifikt och maskinläsbart.

<time datetime="2010-02-28T00:00:00">28<sup>th</sup> February</time>

wbr

wbr används för att specificera var texten eventuellt skulle kunna radbrytas. Kan användas i exempelvis väldigt långa sammansatta ord för att ge webbläsaren en hint om var det går bra att lägga in en radbrytning. Utan denna tagg kan design och text bli konstig. Antingen så bryts ordet på "fel" ställe eller så kanske det inte radbryts alls och pushar designen ut lika långt som ordet är.

flagg<wbr>stångs<wbr>rese<wbr>montör

HTML5 element för media

audio

Med HTML5 så försvinner behovet av att använda Flash och andra plugins för att lägga till ljud i sin webbsida. audio-taggen tillåter en webbredaktör att embedda ljud i sin webbsida enkelt. De viktiga attributen är src, sökvägen till filen, autoplay, om filen ska spelas upp automatisk, loop, om den ska spelas om och om igen samt controls, om du vill visa kontroller, dvs play, stop och paus. I vår HTML5 kurs får du lära dig mer om hur man använder sig av ljud och HTML5.

<audio src="sound.mp3" autoplay loop controls></audio>

embed

embed-elementet är till för att bädda in externa applikationer eller interaktivt innehåll. de viktiga attributen är src, type, width och height

source

Används för att specificera multipla mediaresurser i en audio- eller video-tagg. Tillåter dig som webbredaktör att specificera rätt mediaresurser för olika typer av webbläsare, beroende på vad de stöder för tekniker för video och audio.

<audio autoplay loop controls>
  <source src="sound.mp3" type="audio/mpeg">
  <source src="sound.wma" type="audio/x-ms-wma">
</audio>

track

Med track-taggen kan du på ett enkelt sätt lägga till undertexter, bildtext, beskrivningar för screen readers och även kapitelindelning för video- och audio-tagger

video

video-taggen fungerar på samma sätt som audio-taggen.

Med HTML5 så försvinner behovet av att använda Flash och andra plugins för att lägga till video i sin webbsida. video-taggen tillåter en webbredaktör att embedda film och video i sin webbsida enkelt. De viktiga attributen är src, sökvägen till filen, autoplay, om filen ska spelas upp automatisk, loop, om den ska spelas om och om igen samt controls, om du vill visa kontroller, dvs play, stop och paus. I vår HTML5 kurs får du lära dig mer om hur man använder sig av video och HTML5. Allt innehåll som du lägger i en video-tagg är så kallat fallback-innehåll för webbläsare som inte stöder video-taggen.

Canvas element i HTML5

canvas

canvas-taggen är en tagg som kan användas för rita grafik på med hjälp av JavaScript. canvas kan användas för att rita ut grafer, göra animeringar, editera foton och mycket annat. Läs gärna vårt avsnitt Canvas, rita i webbläsaren med JavaScript i vår HTML5 skola där vi går genom hur du kommer igång med canvas, html5 och javascript.

Nya formulärelement i HTML5

datalist

datalist-taggen är till för att hjälpa till att skapa fält med så kallad "autocomplete"-funktionalitet. Om en användare börjar skriva i ett textfält så kommer en lista med fält som matchar det användaren skriver. Användaren kan då välja ett av fälten och det fylls då i text-fältet. Man knyter ett input-fält till en datalist via list-attributet. Varje enskilt val i en datalist beskrivs med en option-tagg

keygen

keygen-taggen är till för att generera nyckel-material och skicka den publika nyckeln i ett HTML-formulär. Tanken är att detta i kombination med annan information ska kunna bygga upp en certifikat-request och att resultatet ska bli ett signerat certifikat.

output

output-taggen är en efterlängtad tagg. Den skall användas för att presentera utkomsten av formulär. Den gör det enklare att semantiskt beskriva kalkylatorer av olika slag och andra script som skriver ut output på sidan.

Borttagna element från HTML5-standarden

  • acronym
  • applet
  • basefont
  • big
  • center
  • dir
  • font
  • frame
  • frameset
  • noframes
  • strike
  • tt

Dela

Köp HTML och CSS-boken

html5 och css3 bok

Lär dig HTML5 och CSS3. Den sjunde upplagan av HTML och CSS-boken täcker in HTML5, XHTML och CSS. Boken börjar från grunden och innehåller allt du behöver veta för att skriva webbsidor.

Köp den nu

Ställ en fråga

Bli en expert på HTML5 och CSS3

Få gratis tips i brevlådan om hur du bygger en bättre webbsida.