HTML 5 structure översikt - en hippie standard med potential? #html5

HTML 5 är på frammarsch ordentligt och är du som jag van vid den strikta XHTML syntaxen så gissar jag att du också rullar med ögonen över HTML5's luddiga och ibland snudd på obegripliga standard, men visst finns det potential?!

 

HTML5 känns väldigt influerad av Internet Explorer och Microsoft med sina lösa regler och den där hopplösa "man kan göra lite som man vill" mentaliteten, något som förmodligen var XHTML's stora fördel när det petade ner HTML4.1 från tronen och skapade lite ordning i kodträsket. Nu är vi på väg tillbaka till ett mer avslappnat och förlåtande HTML som jag är inte helt säker på att jag gillar.

 

Det som jag däremot gillar är dom nya strukturtaggarna. Dom nya taggarna ger en ny dimension till div-itis sjukan där div taggar nästlas tills man får tunnelseende. Nu går det Vid första anblicken så ser dom ganska enkla ut, men sedan så kollar man specifikationen och då blir det plötsligt inte lika tydligt:

can

Trots den förvirringen som först uppstår så finns det några riktlinjer att gå efter och jag gissar att ju mer taggarna används desto tydligare blir det, men tills dess tänkte jag beskriva taggarna och hur dom är tänkta att användas, enligt mig.

Header

header beskrivs som "a group of introductory or navigational aids", vilket inte säger speciellt mycket direkt. Många tänker direkt på HTML dokumentets head tagg, även kallad MastHead, men i HTML5 så kan det finnas många headers och det är till och med rekommenderar att varje section ska ha en header och även article kan ha det om det känns lämpligt (luddigt det här). Namnet kanske får dig tt tro att det alltid ska ligga överst i ett dokument eller sektion, men det stämmer inte alltid utan det är beroende på innehållet, dvs var introduktionen eller navigationshjälpmedel finns.

Nav

Nav taggen är tänkt för olika delar av webbplatsen som länkar till andra områden på webbplatsen, något som vanligtvis brukar ligga som huvudnavigation i MastHead eller som en sidosektion. Nav kan användas på huvudnavigering och undernavigering, men bör inte användas på annat. I footern på en webbplats ligger det ofta navigering, men där ska nav inte användas utan footer taggen är tillräcklig.

Section

Section används för att gruppera olika sektioner av relaterad information. Section är förmodligen den tagg som kommer att användas mest som ersättning för en vanlig div tagg, som inte har någon semantisk betydelse, men den ska inte användas som en slags generisk ersättare. Section ska bara användas när det är logiskt att dela upp innehållet i sektioner, ungefär som om du skulle dela upp sidan i en punktlista med dom olika delarna på webbsidan. Något som är lite intressant med section är att det är helt ok att använda H1 taggar för varje sektion utan att därför bryta mot sidans semantiska uppbyggnad.

Article

Article används för "self-contained related content" vilket kanske inte alltid är helt enkelt att avgöra. Generellt kan man säga att innehåll som du publicerar styckevis i ett system, som nyheter, bloggposter osv kan använda article. Om innehållet skulle kunna syndikeras med RSS så är det med största säkerhet lämpligt att använda article eftersom article taggen är skapat speciellt just för syndikerat innehåll.

Aside

Första tanken var att aside är en slags sidebar tagg, men som många andra taggar så har namnet en lite annorlunda betydelse. Aside är tänkt för innehåll som är skild från huvudinnehållet. Det kan till exempel vara en sidebar, ett annonsblock eller undernavigation för sidan. Pullquotes är också något som passar väl i en aside tagg.

Footer

footer associeras, precis som header taggen, med en viss position, men precis som med headern så är det innehållet som styr. Footer används för information om vem som skrivit en viss artikel, copyright information, länkar till relaterat innehåll osv. Kontakt information ska däremot inte ligga i en footer utan i adress, men adress i sin tur kan mycket väl ligga inne i en footer. Precis som med header taggen så kan det ligga flera footer taggar i ett dokument.