Dela in i sektioner
Den traditionella sidlayouten består av ett sidhuvud, en sidfot, ett navigeringsfält och en plats för sidans innehåll. Så här delar du upp innehållet i egna isolerade områden.
Med hjälp av ett särskilt sektionselement, kan man precisera mer exakt vilka delar av strukturen som exempelvis tillhör sidhuvudet. Detta gör det i sin tur möjligt att med CSS formge och placera ut delarna på olika sätt.
Sektionselementet
Blockelementet <div> (division, divisor) används för att dela upp innehållet i <body> i olika sektioner eller områden. Elementet får innehålla andra blockelement, vilket innebär att du t.ex. kan innesluta hela navigeringsfältet i en <div> för att beskriva det som ett av sidlayoutens områden.
Eftersom <div> används flera gånger, ger man varje område en egen identitet med attributet id. ID-namnet används sedan i formatmallen för att skilja de olika områdena åt. Med olika CSS-egenskaper kan man sedan beskriva hur sektionerna ska placeras och se ut för övrigt.
OBS! Reglerna för ID-namn togs upp på sidan Länka till avsnitt.
Så här kan det se ut när olika områden i innehållet blir avgränsade med <div>. De element som tillhör navigeringsfältet har t.ex. placeras i en sektion med namnet "nav".
<body> <div id="sidhuvud"><h1>Företaget AB</h1></div> <div id="nav"> <p> <a href="index.htm">Startsida</a> <a href="produkt.htm">Våra produkter</a> <a href="kontakta.htm">Kontakta</a></p> </div>
Elementet <div> är blockelementens motsvarighet till fraselementens <span> och har i sig ingen inverkan på hur sektionerna presenteras i webbläsaren.
Sektioners naturliga flöde
Hela sektioner på en webbsida räknas, tillsammans med sitt innehåll, som egna blockelement. Blockelementens naturliga betende och flöde är att de placeras ut nedanför varandra i den ordning de är skrivna i strukturen.