Jan
Layout utan tabeller
Kategorier: (X)HTML SemantikAtt använda tabeller (eller tables) för layout på en hemsida är mindre bra. Man kan till och med säga att det är helt uppåt väggarna fel. Vissa har lärt sig att det nya är att man bör använda divvar istället för tabeller. Därför byter de ut alla tabellernas celler mot div-element rakt av. Om användandet av tabeller för layout var helt uppåt väggarna fel, så är användandet av div-element istället för tabell-celler åtminstone tre fjärdedelars väg uppåt väggarna fel.Vad handlar det då om? Om man inte får använda tabeller för layout, och inte heller div-element, vad ska man då använda? Vad har man tabeller till?
Att använda div-element för layout är helt rätt. Det bör man göra. Vad man däremot inte bör göra är att innesluta varenda liten sak på sidan i div-element, eller för den delen byta ut alla tabellernas celler mot div-element.
Allt handlar om att använda rätt HTML-element för rätt sorts innehåll. På engelska brukar detta kallas att skriva "semantically correct" HTML, eller "semantiskt korrekt" HTML på svenska. Personligen tycker jag att förklaringen att använd rätt HTML-element för rätt innehåll är enklare och tydligare. Utan att gå djupare in på semantik och vad det är ska vi istället koncentrera oss på koden. Ett enkelt exempel är en navigeringsmeny på en sida. Du kanske gör den på detta sätt:
<div>
<a href="index.htm">Hem</a><br />
<a href="information.htm">Information</a><br />
<a href="kontakt.htm">Kontakt</a><br />
</div>
Denna kod må validera enligt alla tänkbara standarder, men den är inte semantiskt korrekt. Vad ska man då göra för att det ska bli rätt? Man måste tänka efter vad innehållet betyder, inte bara när man läser det, utan hur man ska beskriva den betydelsen med kod. Vad är en meny? Jo en lista med länkar. Därför bör man då också använda ett listelement för att beskriva innehållet:
<ul>
<li><a href="index.html">Hem</a></li>
<li><a href="information.html">Information</a></li>
<li><a href="kontakt.html">Kontakt</a></li>
</ul>
HTML-element ska användas till att beskriva innehållet i så stor utsträckning som möjligt för andra än de som kan läsa och förstå innehållet. Det kanske låter lite luddigt, men är egentligen logiskt.Vi som människor kan läsa innehållet utan problem och förstå innebörden av det. En snabb blick på första exemplet av listan med länkar och vi inser att det är en meny det är frågan om. Men om till exempel en webbläsare, en sökmotor eller en skärmläsare som blinda använder ska försöka tolka innehållet för att indexera det eller presentera det rätt blir det desto svårare. Semantiskt korrekt HTML ger innehållet betydelse utan att man behöver förstå innehållet. Ett annat exempel är rubriker och header-elementet. Ponera följande stycke:
<span class="rubrik">Rödluvan och vargen</span>
<p>Den här boken är en barnbok [mer text]</p>
För en sökmotor innehåller span-taggen och p-taggen text i olika former, men ingen är viktigare än någon annan. Om man däremot använder header-taggen som den är tänkt:
<h1>Rödluvan och vargen</h1>
<p>Den här boken är en barnbok [mer text]</p>
kommer en sökmotor att automatiskt förstå att innehållet i header-elementet är viktigt och kommer lägga större relevans vid detta när någon söker på "Rödluvan och vargen" än om det varit en enkel span-tagg.
Vad är det då man ska använda divvar till? Enligt w3c:
DIV [och SPAN]-element erbjuder ett generellt sätt att skapa struktur i ett dokument
Detta tolkar iallafall jag som att en DIV bör användas för att dela in en sida i olika logiska delar. Till exempel på följande sätt:
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
Eller vid "mindre" tillfällen när man märker att det vore logiskt och förklarande att ha en DIV eller SPAN för att kunna gruppera/förklara innehållet för någon/något som inte kan läsa och tolka det.
Tabeller då? Med några få undantag bör dessa endast användas till tabulär data. Det vill säga information som består av kolumner och rader. Det finns givetvis tillfällen när det är väldigt svårt att få till en bra lösning utseendemässigt med enbart semantiskt korrekt HTML, och man kanske blir tvungen att använda tabeller till annat än tabulär data.
Att försöka skriva semantiskt korrekt kod ställer självklart högre krav på att man ska kunna HTML som språk och förstå vad de olika elementen innebär. Det ställer också lite högre krav på att den som skapar sidan tänker efter: Vad är betydelsen av det innehåll jag skriver just nu?
Förhoppningsvis har jag lyckats förklara iallafall litegrann hur det är tänkt att man ska använda HTML-element för att märka upp innehåll och varför man inte bara ska byta ut tabeller mot divvar rakt av och tro att allt är perfekt.
TYCKTE DU OM ARTIKELN?
KOMMENTARER
- #1. Skriven av Ulf Wigren den 16 Mar 2009
-
mycket bra! Tack, det var speciellt användbart för mig att man ska använda h1-taggen osv, jag gör hemsidor i Freeway för mac helt utan html men har ändå möjlighet att skapa stilmallar så nu ska jag används h-taggar mer.
- #2. Skriven av Jimmy den 28 Oct 2009
-
Hej! Väldigt bra skrivet, att jag läste igenom detta var ett stort steg i min tabell-avvänjning
:)
