Två attribut som gäller för i stort sett alla HTML-taggar är attributen: id och class.

ID attributet: används för unik identifiering av ett element på en enstaka webbsida, vilket betyder att samma ID-värde får enbart finnas för 1 specifikt element på en hel webbsida!

Medan class attributet kan finnas på flera element på samma webbsida.

Båda attributen används för att identifiera, och välja (eng. select) taggar från t ex. CSS-kodning eller JavaScript kod.

ID-referens ger även Lokala ankar-länkar

ID attributet kan även användas för att specificera specifika s.k. ”lokala ankar-länkar” till en sidas innehåll. T ex. om du har en artikel på din sida med 5 olika stycken, och du vill kunna länka till var och ett av de specifika styckena, då kan man ange ett ID attribut till HX taggarna om varje stycke har en headline dvs. eller bara till Paragraf taggarna själva. Mer om detta kommer att gås igenom i ett inlägg om HTML länkar som jag kommer skriva lite längre fram! Se nedan exempelbild.

Praktiskt exempel

Som ett praktiskt exempel kan ni ju föreställa er om ni har en webbsida med 15 st. paragrafer, och ni vill lägga på speciella stilar för paragraf #10 av de 15 som finns på sidan, hur hade ni då kunnat ”sikta in stilarna på just den taggen”? Jo, antingen hade ni gett paragraf #10 id attributvärde så att den kan hittas från CSS/JavaScript via ID:t, eller så hade man gett paragraf #10 ett class attributvärde.

Enda skillnaden är att om ni sen skulle komma på att samma stilar hade sett snyggt ut för även paragraf #2, #5 och #8, så hade ett ID attribut inte kunnat anges på flera olika element på samma sida! Däremot hade ett class attribut kunnat anges på flera element på samma sida(!), och därmed hade alla elementen med samma class attributvärde, delat samma stilar!

Användning av flertalet Klasser/ID:n för ett och samma HTML-element

Denna praktik kan vara användbar om man har många olika separata klasser som var och en håller delar av stilmalls kod som man vill använda tillsammans för ett och samma element, utan att ange en ny klass där stilarna från t ex. 2 olika klasser skrivits om på nytt för att kunna finnas sammansatta, istället kan man ange multipla klasser/id:n genom att separera vart och ett med ett simpelt mellanrum som attributvärde.

Se exempel nedan:

<div class="klass1 klass2 klass3 klass4"></div> <- denna div får stilarna från klass1, klass2, klass3 och klass4.

<div id="id_1 id_2 id_3 id_4"></div> <- denna div får stilarna från id_1, id_2, id_3 och id_4.

Ett lite mer praktiskt exempel hade kunnat vara:
<div class="fontArial colorGreen fontSize13px normalPadding"></div> 

Ovan div och allt den innehåller får stilar från klass: fontArial, colorGreen, fontSize13px och normalPadding.

Sammanfattning

Så sammanfattat- Vad är då poängen med ID jämfört med Klasser?
Jo, ID använder man om man är säker på att referensen endast behöver/kommer att göras endast en gång! Klasser är till för motsatsen -> När du vet säkert att samma stilar eller samma typ av referens kan komma att behöva återanvändas på fler ställen på samma webbsida!

Så nu har ni fått en ”Crash Course” i även Klasser och ID:n ;) Enjoy :) Ni kommer att ha stor användning av kunskapen om dessa framöver!