Välkommen till Webbdesignguidens HTML 5-guide!
Är du helt ny på HTML? Då kan du hoppa över informationen om nyheterna i HTML 5 och börja med att läsa grunderna under ”Kom igång med HTML 5”.
Introduktion till HTML 5
Vad är HTML 5?
HTML 5 är det kodspråk man skapar hemsidor i, och är uppföljaren till HTML-version 4.01. HTML 5 är fortfarande under utveckling, men det går utmärkt att redan nu göra hemsidor i HTML 5 då moderna webbläsare redan stödjer många av språkets viktigaste funktioner. Ett mål med HTML 5 är att det ska gå att göra mer saker med HTML-taggar som bara går att göra via script idag. HTML 5 ska även funka på samma sätt oavsett plattform, sköta felrapportering bättre samt klara sig bättre utan externa plugins såsom Flash.
Ny, enkel Doctype
En Doctype är en instruktion som talar om för webbläsaren vilken version av HTML som du använder. I tidigare versioner av HTML har Doctypes varit många, långa och svårbegripliga. I HTML 5 finns bara en Doctype och skrivs ut:
<!DOCTYPE html>
Doctypen placeras precis i början av ett HTML-dokument, innan <html>-taggen.
Nya taggar för struktur
I HTML 5 introduceras flera nya taggar för att förbättra struktureringen och läsbarheten av kod. Tidigare har man använt <div>-taggen för att strukturera upp en hemsida i olika delar och sektioner, men eftersom “div” är ett ganska intetsägande namn har man introducerat nya, semantiska taggar som gör det enklare att förstå strukturen på en sida och som förbättrar kodens läsbarhet för både människor och datorer.
Här följer en genomgång av de vanligaste nya taggarna för struktur i HTML 5.
<header>
Header står för toppen av någonting, t.ex. en hemsida, sektion eller en artikel. Ofta har man en rubrik-tagg (t.ex. <h1> eller <h2>) inuti <header>-taggen. Förutom en rubrik kan man även ha en kort sammanfattning eller inledning av en text eller artikel inuti <header>, oftast efter rubriken. Annat man kan ha inuti <header> är exempelvis sidans meny (<nav>-taggen), en innehållsförteckning eller författarens namn. Det går att ha flera <header>-taggar på samma sida, t.ex. en <header> för toppen på själva hemsidan där loggan sitter, samt en <header> inuti en artikel med rubriken och författarens namn.
<footer>
<footer> är mycket lik <header> med skillnaden att taggen avser sidfoten/slutnoterna på en artikel eller själva hemsidan.
<nav>
Nav är en förkortning för navigation, och taggen används för en sektion på en sida som länkar till andra sidor, vilket man ofta brukar kalla en meny. Menyer finns oftast någonstans högst uppe på en hemsida, eller till höger eller vänster om innehållet på en sida. Det går att ha flera <nav>-taggar på en sida.
<article>
<article> är en tagg som används runt en text som är en fristående information och som skulle göra sig väl även på ställen utanför hemsidan den befinner sig på. Detta kan t.ex. vara en beskrivande informationstext om en tjänst eller vara, en bloggpost, en blogg-kommentar eller ett foruminlägg. Oftast inleds en <article>-sektion med en rubrik.
<article> kan användas flera gånger på samma sida.
<aside>
<aside> används för att definiera innehåll som hör till en sektion eller artikel, men som inte är fokuset för artikeln eller sektionen. Ett exempel för användande av <aside> är en informationsruta med information som är relaterad innehållet till en artikel, t.ex. en informationsruta om Colosseum inuti en bloggpost om ett besök i Rom.
Man kan också använda <aside> utanför en artikel eller informationstext. I detta fall ska innehållet inuti <aside> vara relaterat till sidan som taggen befinner sig på. Exempel är en sektion med länkar till andra hemsidor som handlar om liknande ämnen (även kallat “blogroll”), en lista med kategorier eller en annons relaterad till innehållet.
<figure> och <figcaption>
Bilder i tidningar och böcker brukar ha en förklarande bildtext under sig. I informationsartiklar och texter ser detta bra ut och ökar läsbarheten. För webben har det inte funnits något snyggt sätt att replikera detta tidigare. HTML 5 introducerar <figure> och <figcaption> för att åstadkomma just detta.
<figure>
<img src=”webbdesignguiden-logga.jpg” alt=”Webbdesignguiden”>
<figcaption>En otroligt bra hemsida</figcaption>
</figure>
<div> finns fortfarande kvar
<div> finns kvar i HTML 5, men denna tagg ska bara användas när det inte finns någon mer semantiskt korrekt tagg tillgänglig, såsom exempelvis <article>. I praktiken kommer man antagligen använda <div> främst som behållare/grupperare för andra, mer semantiskt korrekta taggar. Det är t.ex. vanligt att man väljer att omsluta sin hemsida med en div-tagg som sitter längst upp efter <body>-taggen, för att kunna göra ändringar på t.ex. bredden på hemsidan. Detta är i högsta grad ett godkänt sätt att använda dig av <div>-taggen.
<div> ska ses som en “sista utväg”, och ska bara användas om det inte finns någon annan tagg som passar bättre.
Nya taggar för multimedia
I HTML 5 introduceras nya taggar för multimedia som kraftigt underlättar användande av video och ljud på hemsidor.
<video>
Framtiden för video på webben är <video>-taggen i HTML 5. Tidigare har lösningar med externa plugins som Flash varit det enda sättet att kunna visa video på nätet och på hemsidor. Med <video> kan filmer visas i webbläsaren utan externa plugins.
Det är svårt att prata om video på webben utan att nämna YouTube. Google (som äger YouTube) vet att HTML 5 är framtiden och det finns en testversion av YouTube som bygger på HTML 5 och <video>. Denna kommer med tiden att bli standardversionen när fler börjar använda moderna och uppdaterade webbläsare.
Såhär kan koden se ut:
<video width=”320″ height=”240″ controls>
<source src=”exempelfilm.mp4″ type=”video/mp4″>
</video>
”Controls”-attributet lägger till kontroller för exempelvis play, pause och volym.
<audio>
Även ljud har tidigare oftast spelats upp med hjälp av Flash, men detta löses i HTML 5 med hjälp av <audio>-taggen. Koden är lik den för video:
<audio controls>
<source src=”horse.mp3″ type=”audio/mpeg”>
</audio>
Kom igång med HTML 5
Hemsidor består av HTML-koder, och som egentligen heter HTML-taggar. Dessa taggar är inte så många och är ganska enkla att förstå.
En HTML-tagg inleds med < och avslutas med >, exempel:
<html>
Den absoluta grunden i ett HTML-dokument ser ut såhär:
<!DOCTYPE html>
<html>
<head>
<title>Titel här</title>
</head>
<body>
Innehåll här
</body>
</html>
Förklaring av taggarna:
- Doctype-deklarationen berättar för webbläsaren vilken version av HTML du använder, och måste vara allra högst upp i dokumentet.
- HTML-taggen respresenterar roten i ett HTML-dokument och är en behållare för övriga HTML-taggar.
- Head-taggen kan innehålla exempelvis script, CSS-kod för formatering och annat som inte hör till själva innehållet.
- Title-taggen ger din hemsida en titel i webbläsarens verktygsfält och ett namn om någon lägger hemsidan i favoriter, samt ger sidan en titel i sökmotorers sökresultat.
- Body-taggen rymmer allt synligt innehåll på sidan såsom text, bilder och länkar.
Dessa taggar (ibland felaktigt kallat HTML-koder) ovan är de som alla HTML-dokument måste innehålla. När det kommer till att börja fylla ditt dokument med information, bilder och annat innehåll så behöver du ytterligare taggar.
<!DOCTYPE html>
<html>
<head>
<title>Min sida om min favorit-musik</title>
</head>
<body>
<h1>Välkommen till min sida om min favorit-musik!</h1>
<p>Jag är stort fan av musik och har många favoritband.</p>
<img src=”band.jpg” alt=”Mitt favoritband”>
<p>Om du vill gå in på mitt favoritbands hemsida kan du klicka här:</p>
<a href=”http://www.mittfavoritbandshemsida.se”>Länk</a>
</body>
</html>
Förklaring av taggarna:
- H1-taggen står för Header 1, alltså första/översta rubriken på en sida.
- P-taggen står för paragraf och används runt textstycken.
- Img-taggen står för image (bild). Om den bild du vill infoga ligger i samma mapp som ditt HTML-dokument så kan du helt enkelt skriva bildens namn och filändelse som i exemplet. ”Src” står för source. ”Alt” är främst för sökmotorerna som inte kan se bilder, och ska beskriva vad bilden föreställer. ”Alt” är också bra om besökaren av någon anledning inte kan se bilden, exempelvis p.g.a. en långsam uppkoppling.
- A-taggen infogar en länk. Texten mellan den inledande och avslutande taggen är den text som visas som den klickbara länken. ”Href” specifierar vart länken ska gå. Glöm inte http://
Nu känner du till de viktigaste HTML-taggarna. För att kunna formatera ditt innehåll och få till en snygg struktur och design på din hemsida behöver du lära dig lite CSS. CSS används tillsammans med HTML 5 och sköter formateringen, strukturen och designen på din hemsida.
Du finner våran guide till CSS 3 här!
Färdig hemsidemall
Här finner du en komplett hemsidemall skapad med HTML 5. Mallen använder flera av de nya HTML 5-taggarna som nav, article, aside, header och footer. Den är en bra startpunkt att utgå ifrån för att lära sig mer om HTML 5 och CSS 3. Du är fri att använda mallen som du vill. Du kan ändra, teckensnitt, färger, marginaler, lägga till bilder m.m. för att skräddarsy mallen och skapa din egen hemsida utifrån den.
Mallen består av ett HTML-dokument och ett CSS-dokument inuti en zip-fil. Ladda ner mallen här.
3 svar på ”HTML 5-guiden”
Hej, jag intresserad att lära mig hur man skapar och bygger hemsidor. Jag läste igenom HTML beskrivningen och undrar ifall du menar att man ska lägga ihop alla HTML taggar för att sedan kunna få en hemsida? Eller använder man sig utav taggarna när man väl har skapat en hemsida?
Hej Lina!
Du måste ha taggarna redan från början innan du har skapat sidan. Taggarna gör att det blir en hemsida.
Om du vill koda på egen hand, så använd notepad++ och se till att spara ditt ”dokument” till en fil som kallas exempel.html, ändelsen ”.html” gör att du får en sida. Första sida eller den sida du startar med ska kallas för ”index.html” och den ska du ha på din server.
Finns det någon färdig HTML-kod för en ”sliding header?