Annons
Att skapa en webbsida med HTML och CSS är ganska okomplicerat Hur man skapar en webbplats: för nybörjareIdag guidar jag dig genom att skapa en komplett webbplats från grunden. Oroa dig inte om det låter svårt. Jag leder dig igenom det varje steg på vägen. Läs mer . Men det är lätt att göra misstag, och det finns ganska många saker du kanske inte tänker på. För det mesta gör dessa små misstag inte någon stor skillnad.
Men på lång sikt kan de göra ditt liv svårare. Dessa nio misstag är lätta att göra, men om du tar bort dem tidigare snarare än senare kommer din sida att se bättre ut, vara lättare att underhålla och fungera som du vill.
1. Inline Styling
En av de fantastiska sakerna med HTML och CSS är att du kan formatera valfri textrad - vilket som helst ord, verkligen - när du vill. Men det betyder inte att du bör dra nytta av denna kapacitet.
Här är ett exempel på en inline-stil som du kan använda för att göra ett stycke större än de omgivande styckena och markera det i en annan färg:
Din text här.
Detta ger stycket a CSS-stil Lär dig HTML och CSS med dessa steg för steg-tutorialsÄr du nyfiken på HTML, CSS och JavaScript? Om du tror att du har en skicklighet för att lära dig att skapa webbplatser från grunden - här är några bra steg-för-steg-tutorials som är värda att prova. Läs mer som slutar med avslutandet av stycket. Verkar ganska effektiv, eller hur?
Det finns ett stort problem med det: om du vill ändra många saker på din webbplats kommer du att behöva gå och hitta alla instanser av inline styling och ändra den. Om du har 100 olika stycken som är 120% textstorlek och blå, måste du hitta alla 100 och ändra dem till vad du har bestämt är ett bättre format.
Använd istället ett CSS-formatmall. Här är stilen du skulle använda för ovanstående stycke:
p.viktig {storlek: 120%; färgen blå; }Istället för att använda inline-stilen kan du helt enkelt använda den här raden:
Din text här.
Och ditt stycke blir stort och blått. Och när du gör en ändring i den "viktiga" klassen i din CSS kommer de alla att ändras.
2. Tabeller för layout
Folk brukade använda tabeller för att formatera sidlayout ganska regelbundet. Genom att använda en tabell kan du organisera elementen på din sida i kolumner och rader, samt tillämpa olika justeringar och stilar. Till och med enkelcellstabeller skulle användas för att få innehållet korrekt justerat. Men denna användning av tabeller är i allmänhet rynkade på.
Mycket som inline-stilar, att använda CSS istället för HTML-tabeller för layout är lättare att underhålla. Återigen, om du vill göra ändringar på dussintals eller hundratals sidor, är det mycket lättare att redigera ditt formatmall än att gå igenom varje sida och justera tabellerna.
Förutom enklare underhåll tenderar det att vara enklare att läsa CSS-layouter än att läsa HTML-tabeller. Särskilt om du hamnar på många nivåer av bord inom varandra. Det kanske inte är superlätt att gå fram och tillbaka mellan ditt HTML-dokument och ditt stilark för att se exakt vad som händer, men innehållet på din sida blir tydligare och lättare att redigera.
Att använda tabeller här och där för att dela sidor i kolumner är inte en dödlig synd. Ibland är det lättare och snabbare än att röra sig med CSS. Men om du gör gigantiska tabeller med flera nivåer bör du överväga att formatera med CSS.
3. Avskrivet HTML
Liksom alla språk ändras HTML regelbundet. Officiellt erkända taggar ändras och vissa avskrivs. Även om dessa taggar fortfarande fungerar är det bäst att undvika dem.
Om du till exempel är van vid att använda tagg för fetstil och tagg för kursiv, du står bakom tiderna. och (för “betoning”) är nu standardtaggarna.
De flesta avskrivna taggar ersattes med CSS, så du måste använda stilar (helst inte inline) för att få samma effekt. Om du inte är säker på hur du ska byta ut en uttagen tagg eller om en specifik tagg fortfarande används ska du kontrollera officiell HTML-dokumentation eller bara köra en snabb sökning.
4. Inline JavaScript
Vissa webbsidor använder JavaScript för lägg till ytterligare funktionalitet JavaScript och webbutveckling: Använda dokumentobjektmodellenDen här artikeln kommer att presentera dokumentskelettet som JavaScript fungerar med. Med kunskap om detta abstrakta dokumentobjektmodell kan du skriva JavaScript som fungerar på vilken webbsida som helst. Läs mer . Det kan göra webbsidor interaktiva, validera text när den matas in, lägga till animationer, ge svar på användarens handlingar osv. Kort sagt, det kan göra en sida mer användbar genom att tillhandahålla extra beteende.
Liksom CSS kan du lägga till inline JavaScript till din HTML. Liksom CSS är detta generellt avskräckt. Förutom att vara potentiellt svårare att underhålla finns det några andra skäl som motiverar denna förmaning.
Inline JavaScript kan använda större mängder bandbredd än ett skript länkat från en annan fil. En process som kallas minifiering komprimerar HTML och CSS innan den skickas till en användare, vilket kräver mindre bandbredd över bredbands- eller mobilanslutningar. Inline JavaScript kan dock inte förminskas. Den kommer inte att cachelagras, medan en separat JavaScript-fil kan vara cache.
Alla dessa saker gör inline JavaScript mer bandbreddintensivt.
Det är också svårare att felsöka, eftersom du kan använda en JavaScript-validerare för en JavaScript-fil... men det fungerar inte på inline script. Och återigen gör det renare och lättare underhållen HTML.
5. Flera H1-taggar
Rubriktaggar är bra. De gör sidorna lättare att skumma, de kan ge dig en SEO-boost och de kan användas för att betona vissa punkter.
Men det finns sex nivåer av rubriktaggar av en anledning. Det borde verkligen bara finnas en H1-tagg på din sida. Och det är ofta sidans titel (särskilt på bloggar och liknande webbplatser). Du kanske tror att om du sätter en massa nyckelord i H1-taggar gör Google mer benägna att plocka upp dem och ranka din webbplats högre i resultaten.
Men vad den verkligen gör är att göra din sida mer förvirrande och svårare att läsa. Vilket negerar alla SEO-fördelar du kan se ändå.
Använd H2, H3 och resten av rubriktaggarna för att bättre beskriva din sida. Nivån på rubriken ska ge din läsare en uppfattning om hur viktigt det här avsnittet är. Om du har vilselett dem vet de det och de kommer inte att vara lyckliga.
6. Hoppa över bildalter
Varje bild kan få ett "alt" -attribut som visar en specifik textrad om bilden inte kan visas. Detta kanske inte verkar som en stor sak, särskilt med moderna webbläsare (både stationär och mobil) som kan visa nästan vad som helst.
Men att inte lägga till altattribut är ett stort misstag, speciellt i en ålder av konstant surfning på mobilen. Mobilanslutningar är inte alltid bra, och om en webbläsare inte kan ladda en bild, har din läsare ingen aning om vad de borde se där. Ett altattribut kan fixa det.
Och om någon använder en skärmläsare VoiceOver gör Apple-enheter mer tillgängliga än någonsinPresident för American Foundation of the Blind menar att "Apple har gjort mer för tillgänglighet än något annat företag hittills," - och VoiceOver spelade en stor roll i det. Läs mer eller annan tillgänglighetsfunktion, det att attributet kan vara allt de får ut ur bilden.
Naturligtvis finns det potentiella SEO-fördelar också. Sökmotorer kan indexera korta, beskrivande altattribut. Men den största fördelen här är att hjälpa dina läsare.
7. Stänger inte taggar
Det finns några HTML-taggar som du kan komma undan med att inte stänga, som
och
Först och främst, trots framstegen inom webbläsartekniken, finns det definitivt en möjlighet att webbläsaren visar ditt innehåll felaktigt om du inte har stängt dina taggar. Och att tillämpa stilar kan ge några oförutsägbara resultat, som Stack Exchange-användare robertc demonstrerar.
Vad det kommer till är att webbläsare förväntar sig att stänga taggar. De behöver inte dem absolut... men de kommer definitivt att ha rätt HTML när de försöker visa din sida.
Lyckligtvis krävs det inte mycket för att stänga dina taggar, särskilt om du använder en bra HTML-redigerare.
8. Inklusive en DOCTYPE
I början av HTML-dokument ser du vanligtvis en DOCTYPE-deklaration, som den här:
Det är något som inte pratas om ofta, men det är ett viktigt inslag på din sida. DOCTYPE-deklarationen berättar för en webbläsare vilken typ av HTML du använder. Detta gör att den kan återge HTML korrekt.
Om du hoppar över DOCTYPE-deklarationen kommer sidan att visas i "quirks-läge." Detta är den moderna webbläsarens försvar mot föråldrade webbsidor. Och det ändrar hur din sida visas. En snabb titt på Firefox's quirks-läge visar att skiftlägeskänslighet ändras, teckensnittegenskaper inte ärver i tabeller, teckenstorlekar beräknas annorlunda och bilder utan altattribut visas ibland felaktigt.
De flesta av dessa saker är relativt små. Men om du vill att din sida ska visas korrekt bör du se till att en webbläsare har dess fulla standardläge aktiverat.
Och för att göra det behöver du en DOCTYPE. (Om du inte är säker på vad du ska använda, använd bara .)
9. Försummar schema Markup
Schema-markering hjälper sökmotorer att få en bättre bild av vad som finns på din sida. Mer specifikt berättar den markeringen sökmotorerna vad du skriver om i varje avsnitt.
I en artikel kan du till exempel använda schemamarkering för att berätta för en sökmotor titel, författare, datum, utgivare och annan användbar information om en artikel.
Det finns scheman för filmer, böcker, organisationer, människor, restauranger, produkter, platser, handlingar, olika typer av data, musik, skulptur, reservationer, tjänster, bankomater, bryggerier och nästan allt annat du kan tänka på. Det är ganska fantastiskt.
Du kan definitivt komma undan utan att använda schemamarkering. Din sida kommer att visas korrekt utan den. Dina läsare vet inte ens att det är där. Men det finns mycket att vinna på att inkludera denna markering. Sökmotorer kommer att kunna ge mycket mer detaljerad, användbar information om din sida, inklusive rika utdrag.
Och med Googles schemamarkeringsverktyg är processen faktiskt ganska enkel.
Vänja dig till HTML bästa metoder
Att göra dessa bästa metoder till en vana kan ta ett tag. Och ibland kan det kännas som att du tar mycket extra tid för något som inte får dig så mycket. Men se till att din HTML och CSS Lär dig HTML och CSS med dessa steg för steg-tutorialsÄr du nyfiken på HTML, CSS och JavaScript? Om du tror att du har en skicklighet för att lära dig att skapa webbplatser från grunden - här är några bra steg-för-steg-tutorials som är värda att prova. Läs mer är väl utformade, enkla att arbeta med och underhållsbara kommer att spara mycket tid på lång sikt.
Vilka andra goda vanor har du tyckt vara användbara när du skapar webbsidor? Håller du inte med någon av ovanstående metoder? Dela dina tankar i kommentarerna nedan!
Dann är en innehållsstrategi och marknadskonsult som hjälper företag att skapa efterfrågan och leder. Han bloggar också om strategi och innehållsmarknadsföring på dannalbright.com.