Hur man använder semantiska taggar för HTML5 och CSS3 programmering - dummies

Eftersom webbutvecklare började använda flytande layouttekniker skapade de nästan alltid div dividerat nav, sidhuvud och sidfot. Utvecklarna av HTML5 bestämde sig för att skapa nya element med dessa namn. Ta en titt på följande kod för att se de semantiska taggarna i åtgärd.

semantisk header {border-bottom: 5px dubbel svart;} nav {float: left; bredd: 20%; rensa: vänster; minhöjd: 400px; gräns-höger: 1px solid svart;} avsnitt {float: left; bredd: 75%; padding-left: 1em;} artikel {float: left; bredd: 75%; padding-left: 1em;} footer {clear: both; border-top: 5px dubbel svart; text-align: center;}

Detta är min rubrik







Navigering

länka en
länk b
länk c
länk d
länk e


Avsnitt 1
Avdelningskropp …

Avsnitt 2
Kroppsdel ​​…

Artikel
Artikel kropp …

Footer
Andy Harris 

andy @ aharrisbooks. netto

Som du kan se finns det ett antal nya semantiska märkningstaggar i HTML5:

• header: Detta är inte detsamma som h1-h6-taggarna. Den betecknar en bit av sidan som innehåller en rubrik för sidan. Ofta fyller sidhuvudet sidbredd och kommer att ha någon form av bannerbild. Det innehåller ofta h1-innehåll.

• nav: Den här taggen indikerar någon form av navigationssektion. Den har ingen speciell stil, men används ofta som antingen en horisontell eller vertikal meny för sidnavigering.

• avsnitt: En sektion används för att ange en generisk del av sidan. Du kan ha flera sektioner på samma sida.

• artikel: En artikel är som en sektion, men den är avsedd att användas med externa resurser. Många sidor byggs automatiskt av programvara, och när dessa sidor integrerar innehåll från andra källor är det avsett att använda artikeln för att integrera detta innehåll.

• footer: En sidfot är avsedd att visa sidfoten längst ner på en sida. Vanligtvis täcker en sidfot på undersidan av en sida, även om detta inte är standardbeteendet.

Observera att inget av dessa element har någon specifik formatering. Det är upp till dig att tillhandahålla formatering via CSS-kod. Var och en av elementen kan formateras direkt som ett HTML-element (eftersom det är vad det är). Alla webbläsare med senaste versionen stöder de semantiska märkningstaggarna, men om du vill stödja äldre webbläsare (speciellt IE före version 8) behöver du fortfarande använda divs.