Oavsett om du är nybörjare eller expert på Hyper Text Markup Language (HTML) är det viktigt att följa vissa bästa metoder för att hålla dina HTML-dokument konsekventa och organiserade. Med så många element, attribut, egenskaper, värden med mera finns det mycket att lära sig.
Här är 10 HTML-bästa metoder att tänka på när du arbetar med ditt nästa projekt.
1. Använd korrekt dokumentstruktur
HTML-dokument fungerar fortfarande utan element som <html>, <head> och <body>. Sidorna kommer dock inte att återges korrekt i alla webbläsare, så det är viktigt att vara konsekvent och använda rätt dokumentstruktur.
Exempel:
2. Deklarera rätt doctype
När du skapar ett HTML-dokument är det första du måste deklarera doctype. Detta kommer att tala om för webbläsaren vilka standarder du använder för att återge din markering korrekt. Doctype placeras före <html>-taggen högst upp på sidan. Om du är osäker på vilken deklaration du ska använda finns information på W3.org om hur du väljer rätt doctype.
3. Stäng alltid taggar
För att undvika att stöta på valideringsfel ska du alltid komma ihåg att ha en avslutande tagg för varje tagg som du skapar.
4. Använd inte inline-stilar
Det kan tyckas vara en enkel väg att placera stilar i linje med koden i stället för att skapa ett externt stilark. Inline styles är dock inte en bra kodningspraxis eftersom det gör det svårare att uppdatera och underhålla en webbplats. Håll istället stilarna separerade från HTML-markeringen.
5. Använd alt-attribut med bilder
Det är inte nödvändigt att ha ett alt-attribut med bilder, vilket gör det lätt att ignorera det. Det är dock viktigt att ha ett meningsfullt alt-attribut av validerings- och tillgänglighetsskäl. Alt-attributet ger kontext till skärmläsare så det bör vara beskrivande för vad bilden innehåller.
6. Validera ofta
Istället för att vänta tills du är klar med ditt HTML-dokument, validera din kod flera gånger medan du arbetar. På så sätt kan du spara tid i slutändan genom att identifiera fel tidigt, särskilt om ditt dokument är långvarigt. En populär HTML-valideringstjänst att använda är W3C:s markup validation service.
7. Placera externa formatmallar inom <head>-taggens <head>-taggens
Även om externa formatmallar kan placeras var som helst i HTML-dokumentet är det bästa tillvägagångssättet att placera dem inom <head>-taggens <head>-taggens. Detta gör att din sida laddas snabbare.
8. Använd meningsfulla taggar
Varje del av din webbsida bör byggas upp med hjälp av den HTML5-tagg som är mest lämplig för innehållet. Det är bäst att undvika överdriven användning av generiska taggar, till exempel <div>, när det kan finnas en mer beskrivande tagg för uppgiften, till exempel <section>, <article> och så vidare.
9. Använd markeringar med små bokstäver
Dina HTML-markeringar kan skrivas med små bokstäver eller stora bokstäver och webbsidan kommer att återges korrekt. Det är dock bäst att hålla taggnamn med små bokstäver eftersom det är lättare att läsa och underhålla.
10. Minska antalet element på en sida
HTML-dokument kan bli komplicerade, särskilt för webbsidor med mycket innehåll. För att minska storleken på dina sidor kan du leta efter möjligheter att optimera koden ytterligare när du är klar med markeringen.
Vill du lära dig mer om bästa praxis för HTML? Kolla in dessa andra artiklar:
- HTML Best Practices
- Front-end Code Standards & Best Practices
- Skriv din bästa kod
Vill du inte göra det själv eller behöver du hjälp?
TBH Creative jobbar alltid för att hålla sig uppdaterad om bästa praxis inom webbutveckling.