Best practices inom HTML (och generell webbutveckling)
Hej,
är ganska ofta man ser folk som till exempel använder tabeller för design eller onödigt långa doctypes. I denna tråden tänkte jag ta upp lite best practices inom HTML och generell webbutveckling som är bra att följa. Om du är ny till webbutveckling kanske detta inte direkt är något för dig, då rekommenderar jag istället Webboken.
Sluta använd W3Schools som referens
Snälla... Sluta rekommendera W3Schools till andra, det är helt enkelt inte en bra webbplats.
http://www.wordpressguru.se/sluta-anvanda-w3schools-som-refer...
http://w3fools.com/
Om du vill ha några andra sidor att länka till finns det i den första länken ovan. Två sidor som jag tycker är väldigt bra och bör uppmuntras är:
http://sigurdhsson.org/webboken/v2/ och https://developer.mozilla.org/
Använd doctypen för HTML 5
Det finns ingen anledning att inte använda doctypen till HTML 5. Den är speciellt framtagen för att få webbläsare (även äldre) att rendera sidan i strict mode. Den är bra mycket kortare än äldre doctypes och enklare att komma ihåg.
<!doctype html>
Använd alltid UTF-8 som teckenkodning
Den mest använda teckenkodningen är UTF-8 och borde användas i alla fall. Spara dina filer som UTF-8 (utan BOM, Byte Order Mark). Spara även databaser i någon av UTF-8 Collationerna (utf8_general_ci t.ex. där ci står för case insensitive). Använd även en meta tagg i din head för att makera filen som UTF-8:
<meta charset="utf-8" />
Använd INTE tabeller för design
Tabeller är till för att presentera data, inte för att skapa en design för en hemsida. Det var vanligt förr i tiden att använda tables för design men det är helt enkelt inte rätt längre. Använd istället HTML element som är gjort för det, t.ex.. div. Man ser ofta att folk använder tabeller för att skapa formulär där text och input ligger på samma rad, men det är enkelt, om inte enklare, att göra det utan tabeller. Brukar ofta se folk som gör tabeller för formulär, men det finns enklare, snabbare och finare sätt att göra det: http://jsfiddle.net/pDfcn/1/
Separera presentation, design och logik
Du bör inte använda inline CSS (style="") eller Javascript (onclick=""). Använd istället en extern stilmall för att styla alla element. Det blir enklare att ändra sidan och håller presentation och design isär. Det finns självklart undantag för detta, t.ex. om sidan är dynamiskt generad (dvs. om användarna kan välja en egen färg t.ex.), men försök att hålla dig till externa stilmallar. För Javascript kan du istället skapa ett event i en extern Javascript fil som exekverar när du t.ex. trycker på ett element istället för att använda t.ex. onclick="". Använder du jQuery blir detta ännu enklare att göra.
Lägg dina Javascript filer i botten
Tänk på att lägga dina Javascript i bottnen av sidan (precis innan </body>). Varför? För att när din webbläsare behöver ladda ner ett Javascript stannar laddningen av resten av sidan och får din hemsida att framstå som seg.
Använd feature detection, inte navigator detection
Testa helst inte vilken klient som används för att avgöra vilka JS-kodsnuttar som ska köras. Testa istället om klienten har stöd för funktionen/egenskapen.
Undvik detta:
if (navigator.appName == 'Microsoft Internet Explorer') {
// kod för IE
}
else {
// kod för andra webbläsare
}
Försök istället använda detta:
if (window.localStorage) {
// kod som körs om webbläsaren stöder localStorage
}
else {
// kod som körs om den inte gör det
}
http://www.modernizr.com/ gör även detta mycket enklare.
Det är en skillnad mellan id och class
Ett id får endast användas en gång på en sida och bör endast användas på element såsom headern på din sida. Klasser är snabbare i CSS och bör således användas oftare. Id brukar å andra sidan användas flitigt i Javascript.
Använd alltid små bokstäver
Finns inte mycket att säga här förutom att du bör använda små bokstäver. Det är tom. ett krav att taggar ska använda små bokstäver i XHTML 1.0.
Använd H1-H6 elementen
Sökmotorer använder H1-H6 elementen för att kunna leta upp det mest relevanta innehållet. H1 bör till exempel användas till sidans titel i headern (dvs. endast en gång). H2 till sid rubriker och H3 till underrubriken till exempel.
Lär dig känna många olika element
Det finns många element som folk oftast inte känner till eller inte använder. Här finns en lista av HTML5 elementen; http://www.w3.org/TR/2010/WD-html-markup-20101019/elements.ht....
Allmänt är det bra att vara välbekant med taggar, även de mindre vanliga. <fieldset>/<legend>, <address>, <dt> m fl bidrar alla till att hjälpa webbläsare att tolka sidan. För 5–10 år sedan var detta något som "fundamentalister" förespråkade men få lyssnade på, i och med att i stort sett all access skedde med desktop-browsers, men med smartphones så har den mer semantiska stilen återkommit, och den lär ofrånkomligen behöva bli viktigare och viktigare.
Genom att använda rätt taggar så möjliggör man även alternativa visningssätt, så som verktyg för synskadade, små enheter, textbaserade läsare, webcrawlers, bakåtkompatibilitet, mm.
Ett element som oftast brukar glömmas är label elementet. Det är bra att använda när du skapar forms då man enkelt kan klicka på texten i labelen för att lägga fokus på respektive input.
Exempel på hur en label relaterar till en input
<form action="" method="">
<label for="username">Username</label>
<input type="text" id="username" />
</form>
Använd oordnade listor för menyer
En meny är en lista av valmöjligheter inte sant? Detta är det mest semantiska elementet att använda. Självklart måste du modifiera listan för att få den att se ut som du vill. Listor har som default en ganska stor padding och en list-style som kanske inte passar för menyer.
Använd alt attributet på bilder
En img tag kräver att du har ett alt attribut. Den attributen är till för att kort berätta vad som är på bilden, för blinda människor till exempel. Detta gör det även enklare för sökmotorer att indexera bilderna.
Använd ej som padding
För det första brukar inte flera på rad fungera, precis som flera vanliga mellanslag inte fungerar. Sedan brukar man se många som använder för att få texten att åka in en bit. Använd istället CSS attributet padding eller text-indent.
Jag kommer att lägga till saker jag stöter på efterhand som är bra att veta och viktiga att kunna som en webbutvecklare. Jag hoppas verkligen att vi kan hålla denna tråden i toppen på forumet för att nå ut till så många användare som möjligt. Kom gärna med förslag på saker som kanske behöver andras eller som behövs läggas till!
Om din lärare säger till dig att använda t.ex. tabeller för design tycker jag du ska berätta för denna att hon eller han lever kvar i forntiden. Be hon eller han att ta en titt på en riktig hemsida som är hyfsat ny och läsa igenom tex. Webboken. Finns inget värre att se än när elever tror att de lär sig något modernt när de egentligen lär sig något man använde för 10 år sedan.
