Dela med sig:
9 misstag du borde inte göra när du bygger en webbsida
Skapa en webbsida med HTML och CSS är ganska enkelt. Hur man gör en hemsida: För nybörjare. Hur man gör en hemsida: För nybörjare idag ska jag styra dig genom processen att göra en komplett webbplats från början. Oroa dig inte om det här låter svårt. Jag leder dig igenom det hela steget. Läs mer . Men det är lätt att göra misstag, och det finns en hel del saker du kanske inte tänker på. För det mesta kommer dessa små misstag inte att göra stor skillnad.
Men i längden kan de göra ditt liv svårare. Dessa nio misstag är lätta att göra, men om du leder ut dem tidigare snarare än senare kommer din sida att se bättre ut, vara lättare att underhålla och fungera hur du vill att den ska.
1. Inline Styling
En av de stora sakerna om HTML och CSS är att du kan formatera vilken textrad som helst - vilket enskilt ord som helst - närhelst du vill. Men det betyder inte att du ska utnyttja denna förmåga.
Här är ett exempel på en inline-stil som du kan använda för att göra en punkt större än de omgivande styckena och markera den i en annan färg:
Din text här.
Detta ger stycket en CSS-stil Lär HTML och CSS med dessa steg för steg-handledning Lär HTML och CSS med dessa steg för steg-handledning Nyfiken om HTML, CSS och JavaScript? Om du tycker att du har en förmåga att lära dig hur man skapar webbplatser från början - här är några bra steg-för-steg-tutorials värda att försöka. Läs mer som slutar med avslutningen av stycket. Verkar ganska effektiv, rätt?
Det finns ett stort problem med det: om du vill byta mycket på din webbplats, måste du 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 än bestämt är ett bättre format.
Använd istället ett CSS-stilark. Här är den stil du skulle använda för ovanstående stycke:
p.important size: 120%; färgen blå; Nu, istället för att använda inline-stilen, kan du helt enkelt använda den här raden:
Din text här.
Och din paragraf blir stor och blå. Och när du gör en förändring till “Viktig” klass i din CSS, kommer de alla att förändras.
2. Tabeller för layout
Folk brukade använda tabeller för att formatera sidlayout ganska regelbundet. Genom att använda ett bord kan du organisera elementen på din sida i kolumner och rader, samt tillämpa olika anpassningar och stilar. Även enkeldata tabeller skulle användas för att få innehållet rätt inriktat. Men denna användning av tabeller är generellt frowned på.
På samma sätt som inline-stilar, är det enklare att använda CSS istället för HTML-tabeller för layout. Återigen, om du vill göra ändringar på tiotals eller hundratals sidor är det mycket lättare att redigera ditt stilark än att gå igenom varje sida och justera tabellerna.
Förutom enklare underhåll tenderar läsning av CSS-layouter att vara ganska lättare än att läsa HTML-tabeller. Särskilt om du hamnar i flera nivåer av bord inom varandra. Det kan inte vara mycket enkelt 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 kommer att bli tydligare och lättare att redigera.
Att använda tabeller här och där för att dela upp sidor i kolumner är inte en dödlig synd. Ibland är det enklare och snabbare än att krossa med CSS. Men om du gör gigantiska, flervärda tabeller, bör du överväga att omforma med CSS.
3. Utskriven HTML
Precis som något språk ändras HTML regelbundet. Officiellt erkända taggar ändras, och vissa blir avskedade. Även om dessa taggar fortfarande fungerar, är det bäst att undvika dem.
Till exempel, om du är van att använda tagg för fet och den tag för kursiv, du är bakom tiderna. och (för “betoning”) är nu standardkoderna.
De flesta avlägsna taggarna 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 byter ut en utmatad tagg eller om en specifik tagg fortfarande används, kolla in den officiella HTML-dokumentationen eller kör bara en snabbsökning.
4. Inline JavaScript
Vissa webbsidor använder JavaScript för att lägga till ytterligare funktionalitet JavaScript och webbutveckling: Använda dokumentobjektmodellen JavaScript och webbutveckling: Använda dokumentobjektmodellen Den här artikeln kommer att presentera dig för det dokumentskelett som JavaScript fungerar med. Med en fungerande kunskap om denna abstrakta dokumentobjektmodell kan du skriva JavaScript som fungerar på vilken webbsida som helst. Läs mer . Det kan göra webbsidor interaktiva, validera text som det skrivs in, lägga till animeringar, ge svar på användaråtgärder, och så vidare. Kortfattat kan det göra en sida mer användbar genom att ge tilläggsbeteende.
Mycket som CSS, kan du lägga till inline JavaScript till din HTML. Också som CSS, är detta generellt avskräckt. Förutom att det är potentiellt svårare att upprätthålla, finns det ett par andra skäl som motiverar denna förmaning.
Inline JavaScript kan använda större mängder bandbredd än ett skript länkt 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 bredband eller mobila anslutningar. Inline JavaScript kan emellertid inte minimeras. Det kommer inte heller att cachas, medan en separat JavaScript-fil kan cachas.
Alla dessa saker gör inline JavaScript mer bandbredd intensiv.
Det är också svårare att felsöka, eftersom du kan använda en JavaScript-validator för en JavaScript-fil ... men det fungerar inte på inline-skript. Och igen gör det renare och lättare att behålla HTML.
5. Flera H1-etiketter
Rubrikkoder är bra. De gör sidorna enklare 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 egentligen bara finnas en H1-tagg på din sida. Och det är ofta titeln på sidan (särskilt på bloggar och liknande webbplatser). Du kanske tror att att lägga en massa nyckelord i H1-taggar gör att Google är mer benägna att hämta dem och ranka din webbplats högre i resultaten.
Men vad det egentligen gör är att din sida blir mer förvirrande och svårare att läsa. Vilket kommer att negera eventuella SEO-fördelar du kanske ser ä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 följande avsnitt är. Om du har vilselat dem, kommer de att känna till det, och de kommer inte vara lyckliga.
6. Hoppa över bildalter
Varje bild kan ges en “alt” attribut som visar en viss textrad om bilden inte kan visas. Det här verkar inte som en stor sak, särskilt med moderna webbläsare (både skrivbord och mobil) som kan visa nästan allting.
Men att inte lägga till alt attribut är ett stort misstag, speciellt i en tid av konstant mobil browsing. Mobila anslutningar är inte alltid bra, och om en webbläsare inte kan ladda en bild lämnar din läsare ingen aning om vad de ska se där. Ett alt attribut kan fixa det.
Och om någon använder en skärmläsare VoiceOver gör Apples enheter mer tillgängliga än någonsin VoiceOver gör Apples enheter mer tillgängliga än någonsin President of the American Foundation of the Blind räknar med 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, att alt attributet kan vara allt de kommer ut ur bilden.
Naturligtvis finns det potentiella SEO-fördelar också. Sökmotorer kan indexera korta, beskrivande alt attribut. Men den största fördelen här är att hjälpa dina läsare.
7. Avsluta inte etiketter
Det finns några HTML-taggar som du kan komma undan med att inte stänga, som
och
Först och främst, trots utvecklingen i 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 tillämpning av 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 absolut dem ... men de kommer definitivt att dra nytta av att ha rätt HTML när de försöker visa din sida.
Lyckligtvis tar det inte mycket för att stänga dina taggar, speciellt om du använder en bra HTML-editor.
8. Inte inkluderande en DOCTYPE
I början av HTML-dokument ser du vanligtvis en DOCTYPE-deklaration, som den här:
Det är något som inte pratar om ofta, men det är ett viktigt element i din sida. DOCTYPE-deklarationen berättar en webbläsare vilken typ av HTML du använder. Detta gör att den kan göra HTML korrekt.
Om du hoppa ö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-quirks-läget visar att fallfelighetsförändringar, teckensnittegenskaper inte ärver i tabeller, teckensnittstorlekar beräknas annorlunda och bilder utan alt attribut 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 sitt fullständiga 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örsumma Schema Markup
Schema markup hjälper sökmotorerna att få en bättre uppfattning om vad som finns på din sida. Mer specifikt berättar den markeringen sökmotorer 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 titeln, författaren, datumet, utgivaren och annan användbar information om en artikel.
Det finns scheman för filmer, böcker, organisationer, människor, restauranger, produkter, platser, åtgärder, olika typer av data, musik, skulptur, reservationer, tjänster, bankomater, bryggerier och nästan allt annat du kan tänka dig. Det är ganska fantastiskt.
Du kan definitivt komma undan utan att använda schema markup. 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 med att inkludera denna markering. Sökmotorerna kommer att kunna ge mycket mer detaljerad, användbar information om din sida, inklusive rika utdrag.
Och med Googles schemaläggningsverktyg är processen faktiskt ganska lätt.
Bli van vid HTML Best Practices
Att göra dessa bästa metoder kan vana en stund. Och ibland kan det känna att du tar mycket extra tid för något som inte får dig väldigt mycket. Men se till att din HTML och CSS Lär dig HTML och CSS med dessa steg för steg-handledning Lär dig HTML och CSS med dessa steg för steg-handledningar Nyfiken om HTML, CSS och JavaScript? Om du tycker att du har en förmåga att lära dig hur man skapar webbplatser från början - här är några bra steg-för-steg-tutorials värda att försöka. Läs mer är välutrustade, lätta att arbeta med och underhållsbar sparar mycket tid på lång sikt.
Vilka andra goda vanor har du visat sig vara användbar när du skapar webbsidor? Håller du med om någon av ovanstående metoder? Dela dina tankar i kommentarerna nedan!