Nya element i HTML5

Betoningen på nya element i HTML5, som ni ser användas i detta dokument, är att de är semantiska. Det innebär att de ska användas utifrån vad de betyder. En mycket kort förklaring av några nya element följer här. Tidigare skapade man dem ofta med en div-tagg med ex. attributet id="header". Nu har de blivit egna taggar:

header
Nu en egen tagg, som kan användas flera gånger i ett dokument, som en inledning på ett avsnitt.
article
Ett avsnitt i ett HTML-dokument som man kan lyfta ut och som är begripligt när det står på egna ben.
section
Ett element som kan användas för att mnarkera ett större sammanhang, t.ex. flera article, på en webbsida. Det kan t.ex. vara en sidospalt, med olika delar.
OBS! Om man enbart behöver omsluta något för att kunna formatera med CSS, då är det inte section utan div man ska använda.
HTML5doctor rekommenderar att avsnittet bör kunna sammanfatta genom en h1
footer
Fungerar ungefär som header. Används när man vill sammanfatta något i samband med ett avsnitt, ex. en article, en section eller en hel sida.

Koppla en css-fil

Du kopplar en css-fil till ett html-dokument genom elementet link i head-taggen. Så här:

<link href="filnamn.css" rel="stylesheet">
                

CSS "prickar" något i HTML - och vi kan bestämma designen

Huvudfunktionen för CSS är att välja ut - med en selektor - vad som ska påverkas i HTML-dokumentet. Några exempel på vad man kan välja att påverka:

Typselektorer
Motsvarar ett element i html-dokumentet, t.ex. body, h1, article...
I Css anger man enbart elementet: ex body {...}
Klass-selektor
För att välja ut en speciell del av HTML, t.ex. ett p av många, kan man ge just det stycket attributet class. På det sättet kan man ange vilka egenskaper man vill för just det stycket. Ex <p class="test">
I CSS anger en punkt att man syftar på en klass. Ex. .test {...}
Attributtet class kan användas många gånger på en sida
ID-selektor
Fungerar som class, med skillnaden att det bara får användas en gång per sida. Tänk på ID-handling, den är unik. används t.ex. när man vill lägga in hela sidan i en "behållare": <div id="container">
I css anger man id med en "fyrkant", #. Ex. #container {...}
Attributselektor
Man kan välja att "pricka" ett element utifrån dess attribut. Ett praktiskt exempel är om man vill formatera länkar som går ut till Internet på ett annat sätt:
a[href=^http://] {...}

Här talar vi om att alla länkar som börjar med den exakta frasen "http://" ska formateras.

Du hittar selektorerna här, och kan sortera bland dem på olika sätt.