Div-tagget er ét af de vigtigste tags, som du får brug for, når du skal bygge en hjemmeside. Div-tagget bruger du til at opdele din side i forskellige sektioner, så du kan style hver sektion for sig. Lige som hvis du skal til en fest, hvor den skal have hele armen med hårfarve, makeup og neglelak, og neglelakken ikke skal ende i håret. Div-tagget kaldes også for content division element.
Div-tagget kommer du til at bruge meget, når du bygger en ny hjemmeside op. Det er nemlig det tag, som deler hjemmesiden op i sektioner, så du kan style hver sektion af siden forskelligt. Div står for division, og man skriver tagget sådan her:
Div-tagget skriver du i inde i body-elementet i dit html-dokument:
Bagefter kan du style sektionen på din side med CSS eller få den til at udføre forskellige handlinger med JavaScript.
Div-tagget i sig selv ændrer altså ikke noget synligt på din hjemmeside. Ændringerne kommer først, når du kombinerer det med CSS’ style-element eller med JavaScripts script-element.
Det kan lyde abstrakt, men det er faktisk slet ikke så kompliceret:
Hårfarven skal kun i håret
Div-tagget fungerer på samme måde, som når du skal til en forårsfest, hvor du virkelig trænger til at der skal farver på, så vinterhud, grå hår og triste negle forsvinder.
Du beslutter dig altså for at farve dit hår, tage øjenmakeup på, læbestift og neglelak.
Sandsynligvis vil du starte med hårfarven (det ville jeg selv gøre). Den skal helst kun i dit hår – og ikke i dit ansigt, på din krop eller dine fødder. Håret er altså den sektion på dig, som skal styles med hårfarve.
Div-tag som hårfarve
Lige som håret kan siges at være en sektion, på samme måde kan du lave en sektion omkring din overskrift, så du adskiller den fra resten af hjemmesiden. Det gør du ved at sætte div-tagget omkring den:
Med div-tagget fortæller du altså browseren, at du gerne vil have mulighed for at give din overskrift en anden farve, font osv. end resten af hjemmesiden.
På samme måde kan du sætte div-tagget omkring forskellige sektioner i din brødtekst – lige som når du lægger neglelak på dine fingernegle eller smører læbestift på dine læber.
Øjenskyggen & div
Du kan også sætte div-tags inde i hinanden som en barbushka-dukke – eller som når du lægger makeup på dine øje (hvis du da nogensinde gør det – ellers håber jeg, at billedet alligevel fungerer for dig):
Først skal vi have defineret, at dine øjne er en sektion for sig på dig:
Dine øjne består også af forskellige sektioner i forhold til, hvordan du skal lægge øjenmake-up:
På dine øjenlåg og måske også rundt om øjnene kan du lægge noget primer og derefter øjenskygge i forskellige farver, i bunden af øjenlågene kan du lægge en eyeliner, på øjenvipperne mascara. Samtidig er det vigtigt, at du ikke får noget af alt det her ind i øjnene – men det ser vi bort fra lige nu, for det gør operationen lidt mere kompliceret.
Hvis vi skal skrive det med div-tags, så kan det for eksempel være sådan her:
Class-atributten
Man kan lave grupper med div-tagget ved at kombinere det med class-attributten. Og hvad betyder det så?
Det betyder, at du kan lave en gruppe med noget indhold, som du vil bruge flere gange på din hjemmeside.
Et billede på det kan være, hvis du skal have neglelak på alle dine negle, både på venstre hånd og højre hånd og venstre fod og højre fod. Det er i alt 20 negle, og man kunne lave en div-class, der lød sådan her:
På den måde kan du genbruge din class mange gange på din hjemmeside.
ID-attributten
Hvis du har et element, som du kun bruger et sted på din hjemmeside og gerne vil style det på en bestemt måde, så kan du her kombinere dit div-tag med en ID-attribut. Det kan for eksempel være titlen på din hjemmeside, som jo kun optræder ét sted.
Et billede på det kunne være, at du kun har en mund at smøre din læbestift på. Det kunne se sådan her ud:
ID-elementet bliver rigtig interessant, når vi arbejder med JacaScript. Det vender jeg tilbage til i et andet blogindlæg.