Hvordan du bruker semantiske etiketter for HTML5 og CSS3 programmering - dummies

Siden webutviklere begynte å bruke flytende layoutteknikker, skapte de nesten alltid divs som heter nav, header og footer. Utviklerne av HTML5 bestemte seg for å lage nye elementer med disse navnene. Ta en titt på følgende kode for å se de semantiske kodene i aksjon.

semantisk header {border-bottom: 5px double black;} nav {float: left; bredde: 20%; fjern: venstre; Min høyde: 400px; border-right: 1px solid black;} seksjon {float: left; bredde: 75%; padding-left: 1em;} artikkel {float: left; bredde: 75%; padding-left: 1em;} footer {clear: both; border-top: 5px dobbel svart; text-align: center;}

Dette er min overskrift







Navigasjon

lenke en
lenke b
lenke c
lenke d
lenke e


Seksjon 1
Seksjonens kropp …

Seksjon 2
Seksjonens kropp …

Artikkel
Artikkelliches …

Footer
Andy Harris 

andy @ aharrisbooks. netto

Som du ser, finnes det en rekke nye semantiske merketiketter i HTML5:

• header: Dette er ikke det samme som h1-h6-kodene. Det betyr en del av siden som vil inneholde en overskrift for siden. Ofte vil overskriften fylle opp sidebredden, og vil ha en slags bannerbilde. Den inneholder ofte h1 innhold.

• nav: Denne taggen indikerer en slags navigasjonsseksjon. Den har ingen egen stil, men den brukes ofte som enten en horisontal eller vertikal meny for navigering på stedet.

• seksjon: En seksjon brukes til å spesifisere en generisk del av siden. Du kan ha flere seksjoner på samme side.

• artikkel: En artikkel er som en seksjon, men den er ment for bruk med eksterne ressurser. Mange sider er bygget automatisk av programvare, og når disse sidene integrerer innhold fra andre kilder, er det ment å bruke artikkeltaggen for å integrere dette innholdet.

• footer: En bunntekst er ment å vise bunntekstinnholdet nederst på en side. Vanligvis omfatter en bunntekst bunnen av en side, selv om dette ikke er standardoppførelsen.

Merk at ingen av disse elementene har noen spesifikk formatering. Det er opp til deg å gi formatering via CSS-koden. Hver av elementene kan formateres direkte som et HTML-element (fordi det er hva det er). Alle nettlesere med siste versjon støtter de semantiske merketikettene, men hvis du vil støtte eldre nettlesere (spesielt IE før versjon 8), må du fortsatt bruke divs.