När en ny sida ska byggas är det frestande att börja med innehållet och lägga till dokumentstrukturen senare. En enkel HTML-mall räcker ofta som start, men rätt grund beror på om sidan är statisk, flerspråkig eller en del av en app.
En liten HTML-grund gör det lättare att bygga vidare
- DOCTYPE, lang och UTF-8 ger webbläsaren och hjälpmedel viktig information om dokumentet.
- Viewport och sidtitel är bra grunddelar för en vanlig webbsida.
- Metadata och skript ska läggas till efter sidans behov, inte av gammal vana.
- Välj en minimal mall för en enskild sida och ett större startpaket när projektet kräver verktyg och återanvändbara resurser.
En HTML boilerplate ska ge struktur, inte extra bagage
En HTML boilerplate är en återanvändbar grundstruktur för ett HTML-dokument. Den berättar för webbläsaren hur sidan börjar, vilket språk den använder och var sidans metadata respektive synliga innehåll hör hemma.
För en enkel sida räcker den här mallen långt. Byt språkkod och titel, fyll på med innehåll och lägg till funktioner först när de behövs.
Sidans titel
Sidans huvudrubrik
Börja med sidans viktigaste innehåll.
Det korta dokumentet innehåller redan flera olika sorters beslut. HTML-elementen skapar strukturen, medan attribut som lang och name anger information om sidan.
Fyra grunddelar förebygger vanliga startfel
En tom sida kan se rätt ut på skärmen trots att viktig information saknas i koden. De här delarna hjälper dig att undvika några av de vanligaste missarna redan från början.
</code>anger att dokumentet ska tolkas enligt modern HTML. MDN beskriver den som den korta deklaration som bör stå först.lang="sv-SE"talar om att sidans huvudspråk är svenska. Ändra värdet om huvudspråket är ett annat.anger teckenkodningen. Den gör att exempelvis å, ä och ö visas korrekt när dokumentet sparats och skickas med samma kodning.- Viewport-taggen hjälper sidan att anpassa sin layout till enhetens skärmbredd. Den ger dock inte responsiv design av sig själv; CSS behöver fortfarande hantera layouten.
Enligt MDN:s introduktion till HTML-syntax är doctype, rot-elementet, dokumentets metadata och body grunddelar i ett HTML-dokument. I praktiken betyder det att en korrekt stomme inte behöver vara lång, men den behöver vara avsiktlig.
Välj mall efter projektets storlek
Här går det lätt att lägga till mer än sidan behöver. Jag tycker att en liten, läsbar mall är bäst för en fristående sida, medan ett större startpaket passar bättre när projektet faktiskt använder dess verktyg och resurser.
| Situation | Trolig följd | Gör så här |
|---|---|---|
| En enkel landningssida eller prototyp | Ett stort paket kan lägga till filer och inställningar som inte används. | Börja med en minimal HTML-fil och lägg till CSS eller JavaScript efter behov. |
| En webbplats med gemensamma stilar och återkommande komponenter | Enbart HTML-stommen löser inte projektets bygg- och återanvändningsbehov. | Välj ett startpaket som passar den faktiska verktygskedjan. |
| En sida på flera språk | Ett felaktigt språk-attribut kan ge fel uttal i skärmläsare. | Ange sidans huvudspråk på |
Exempelvis är HTML5 Boilerplate ett större front-end-startpaket med bland annat startmall, CSS och serverkonfigurationer. Det är användbart när projektet behöver sådana delar, men för en ensam HTML-sida blir de ofta överflödiga.
Språkattributet ska följa sidans huvudspråk
En svensk webbplats kan ändå innehålla engelska produktnamn eller citat, men det betyder inte att hela dokumentet ska märkas som engelskspråkigt. Välj språk efter innehållet som dominerar sidan, inte efter enstaka ord.
Om en sida främst är på svenska passar lang="sv-SE". Om ett helt avsnitt är på engelska kan språket anges direkt på det avsnittets element, exempelvis . MDN:s riktlinjer för HTML-exempel rekommenderar att dokumentets språk anges på rot-elementet, vilket också hjälper hjälpmedel att tolka texten.
En vanlig miss är att kopiera lang="en-US" från en engelsk mall och sedan glömma ändra den. Sidan kan fortfarande se korrekt ut, men språkdeklarationen beskriver då inte längre innehållet.
Lägg till metadata och skript först när sidan behöver dem
Head-elementet blir snabbt en samlingsplats för kod som klistrats in utan tydlig funktion. Börja med teckenkodning, viewport, titel och en beskrivning; komplettera sedan med sådant som faktiskt används, till exempel ikon eller formatmall.
En CSS-fil kan länkas från med ett -element. För JavaScript beror placeringen på hur koden ska köras: ett externt skript med defer körs efter att HTML-dokumentet har lästs in, medan ett skript av typen module har modulernas egna regler för inläsning och beroenden.
Om sidans innehåll inte behöver JavaScript finns det ingen anledning att lägga in en tom skripttagg. Färre oanvända delar gör startfilen enklare att förstå, särskilt när du kommer tillbaka till den efter ett tag.
En bra grund gör nästa ändring enklare
När den första sidan väl visas i webbläsaren kommer nästa fråga ofta snabbt: behövs en stil, ett formulär eller ett skript? Lägg till en del i taget och kontrollera att den fyller en tydlig funktion.
Den bästa HTML-grunden är därför den minsta som fortfarande beskriver sidan korrekt. Börja med dokumentets språk och struktur; låt projektets faktiska behov avgöra resten.