9 Fejl, du ikke bør foretage, når du bygger en webside

Reklame

Oprettelse af en webside med HTML og CSS er temmelig ligetil Sådan oprettes et websted: For begyndereI dag vil jeg guide dig gennem processen med at oprette et komplet websted fra bunden. Bare rolig, hvis dette lyder svært. Jeg vil guide dig gennem det hvert skridt på vejen. Læs mere . Men det er let at lave fejl, og der er ganske mange ting, du måske ikke tænker på. Det meste af tiden gør disse små fejl ikke meget af en forskel.

Men i det lange løb kan de gøre dit liv vanskeligere. Disse ni fejl er lette at lave, men hvis du tager dem af tidligere snarere end senere, vil din side se bedre ud, være lettere at vedligeholde og fungere, hvordan du vil have den.

1. Inline Styling

En af de store ting ved HTML og CSS er, at du kan formatere en hvilken som helst tekstlinje - ethvert enkelt ord, virkelig - når du vil. Men det betyder ikke, at du skal drage fordel af denne kapacitet.

Her er et eksempel på en inline-stil, som du muligvis kan bruge til at gøre et afsnit større end de omkringliggende afsnit og fremhæve det i en anden farve:

Din tekst her.

Dette giver afsnittet a CSS-stil Lær HTML og CSS med disse trinvise tutorialsEr du nysgerrig efter HTML, CSS og JavaScript? Hvis du tror, ​​at du har en evne til at lære at oprette websteder fra bunden - her er et par gode trin-for-trin-tutorials værd at prøve. Læs mere det slutter med afslutningen af ​​dette afsnit. Virker ret effektiv, ikke?

Der er et stort problem med det: hvis du vil ændre en masse ting på hele dit websted, bliver du nødt til at gå og finde alle forekomster af inline-styling og ændre det. Hvis du har 100 forskellige afsnit, der er 120% tekststørrelse og blå, bliver du nødt til at finde alle 100 og ændre dem til, hvad du har besluttet, er et bedre format.

Brug i stedet et CSS-stilark. Her er den stil, du vil bruge til ovenstående afsnit:

p.vigtigt {størrelse: 120%; farve: blå; }

I stedet for at bruge inline-stilen, kan du blot bruge denne linje:

Din tekst her.

Og dit afsnit vil være stort og blåt. Og når du foretager en ændring af den "vigtige" klasse i din CSS, ændres de alle.

2. Tabeller til layout

Folk plejede at bruge tabeller til formatering af sidelayout temmelig regelmæssigt. Ved at bruge en tabel kan du organisere elementerne på din side i kolonner og rækker samt anvende forskellige justeringer og stilarter. Selv enkeltcelleborde ville blive brugt til at få indholdet korrekt justeret. Men denne brug af borde er generelt ridsende.

Meget som inline-stilarter er det lettere at vedligeholde at bruge CSS i stedet for HTML-tabeller til layout. Igen, hvis du vil foretage ændringer på snesevis eller hundreder af sider, er det meget lettere at redigere dit stilark end at gå gennem hver side og finpudse tabellerne.

Ud over lettere vedligeholdelse er det en smule lettere at læse CSS-layouts end at læse HTML-tabeller. Især hvis du ender med at indlejre mange niveauer af borde i hinanden. Det er måske ikke super let at gå frem og tilbage mellem dit HTML-dokument og dit typografiark for at se nøjagtigt, hvad der sker, men indholdet på din side vil være klarere og lettere at redigere.

At bruge tabeller her og der til at opdele sider i kolonner er ikke en dødelig synd. Nogle gange er det lettere og hurtigere end at kommunikere med CSS. Men hvis du laver gigantiske tabeller med flere niveauer, skal du overveje at formatere med CSS.

3. Udskrivet HTML

Som ethvert sprog ændres HTML regelmæssigt. Officielt anerkendte tags ændres, og nogle bliver forældede. Selv hvis disse tags stadig fungerer, er det bedst at undgå dem.

For eksempel, hvis du er vant til at bruge tag til fed og tag til kursiv, du står bag tiderne. og (til “vægt”) er nu standard tags.

, , , , og andre udskrives også.

De fleste forældede tags blev erstattet med CSS, så du bliver nødt til at bruge stilarter (helst ikke inline) for at få den samme effekt. Hvis du ikke er sikker på, hvordan du udskifter et forældet tag, eller hvis der stadig er et specifikt tag, skal du kontrollere officiel HTML-dokumentation eller bare køre en hurtig søgning.

4. Inline JavaScript

Nogle websider bruger JavaScript til tilføje yderligere funktionalitet JavaScript og webudvikling: Brug af dokumentobjektmodellenDenne artikel introducerer dig til dokumentskelet, som JavaScript fungerer sammen med. Når du har kendskab til denne abstrakte dokumentobjektmodel, kan du skrive JavaScript, der fungerer på enhver webside. Læs mere . Det kan gøre websider interaktive, validere tekst, når den indtastes, tilføje animationer, give svar på brugerhandlinger og så videre. Kort sagt kan det gøre en side mere nyttig ved at tilføje tilføjet adfærd.

Ligesom CSS, kan du tilføje inline JavaScript til din HTML. Ligesom CSS frarådes dette generelt. Ud over at være potentielt sværere at vedligeholde er der et par andre grunde, der berettiger denne formaning.

Inline JavaScript kan bruge større mængder båndbredde end et script, der er linket fra en anden fil. En proces kaldet minifikation komprimerer HTML og CSS, før den sendes til en bruger, hvilket kræver mindre båndbredde over bredbånd eller mobilforbindelser. Inline JavaScript kan imidlertid ikke minimeres. Det vil heller ikke blive cache, mens en separat JavaScript-fil kan være cachelagret.

Alle disse ting gør inline JavaScript mere båndbreddeintensivt.

Det er også sværere at fejlsøge, da du kan bruge en JavaScript-validator til en JavaScript-fil… men den fungerer ikke på inline script. Og igen gør det det muligt for renere og lettere vedligeholdt HTML.

5. Flere H1-tags

Overskrifttags er gode. De gør sider lettere at skumme, de kan give dig en SEO-boost, og de kan bruges til at understrege visse punkter.

Men der er seks niveauer af overskrifttags af en grund. Der skal virkelig kun være et H1-tag på din side. Og det er ofte sidens titel (især på blogs og lignende websteder). Du kan måske tro, at hvis du lægger en masse søgeord i H1-tags, gør Google mere tilbøjelige til at hente dem og rangere dit websted højere i resultaterne.

Men hvad det virkelig gør er at gøre din side mere forvirrende og sværere at læse. Hvilket bortfalder de SEO-fordele, du måske vil se alligevel.

Brug H2, H3 og resten af ​​overskrifttags for at skitsere din side bedre. Niveauet på overskriften skal give din læser en idé om, hvor vigtigt det følgende afsnit er. Hvis du har vildledt dem, ved de det, og de vil ikke være glade.

6. Spring over billedalter

Hvert billede kan få en "alt" -attribut, der viser en bestemt tekstlinie, hvis billedet ikke kan vises. Dette ser måske ikke ud som en big deal, især med moderne browsere (både desktop og mobil), der kan vise næsten alt.

Men at ikke tilføje alt attributter er en stor fejltagelse, især i en alder af konstant mobil browsing. Mobilforbindelser er ikke altid store, og hvis en browser ikke kan indlæse et billede, har din læser ingen idé om, hvad de skal se der. En alt-attribut kan løse det.

Og hvis nogen bruger en skærmlæser VoiceOver gør Apple-enheder mere tilgængelige end nogensindePræsident for American Foundation of the Blind regner med, at "Apple har gjort mere for tilgængelighed end noget andet firma til dato," - og VoiceOver spillede en stor rolle i det. Læs mere eller anden tilgængelighedsfunktion, kan denne attribut muligvis være alt, hvad de kommer ud af billedet.

Der er selvfølgelig også potentielle SEO fordele. Søgemaskiner kan indeksere korte, beskrivende altattributter. Men den største fordel her er at hjælpe dine læsere.

7. Lukker ikke tags

Der er nogle HTML-tags, som du kan slippe af sted med ikke at lukke, som

og

. Browsere ved, at når du starter et andet afsnit eller en liste, er den forrige slut. Men det betyder ikke, at du skal springe ud på de afsluttende tags.

Først og fremmest er der til trods for fremskridt inden for browserteknologi bestemt en mulighed for, at browseren viser dit indhold forkert, hvis du ikke lukker dine tags. Og anvendelse af stilarter kan give nogle uforudsigelige resultater som Stack Exchange-bruger robertc demonstrerer.

Hvad det kommer ned til, er, at browsere forventer at lukke tags. De har ikke absolut brug for dem... men de vil bestemt drage fordel af at have den rigtige HTML, når de prøver at få vist din side.

Heldigvis kræver det ikke meget at lukke dine tags, især hvis du bruger en god HTML-editor.

8. Ikke inkluderet en DOCTYPE

I begyndelsen af ​​HTML-dokumenter ser du normalt en DOCTYPE-erklæring som denne:

Det er noget, der ikke bliver talt om ofte, men det er et vigtigt element på din side. DOCTYPE-erklæringen fortæller en browser, hvilken type HTML du bruger. Dette gør det muligt at gengive HTML korrekt.

Hvis du springer over DOCTYPE-erklæringen, gengives siden i "quirks-tilstand." Dette er den moderne browsers forsvar mod forældede websider. Og det ændrer, hvordan din side vises. Et hurtigt kig på Firefox's quirks-tilstand viser, at sagsfølsomhed ændres, fontegenskaber ikke arver i tabeller, skrifttypestørrelser beregnes forskelligt, og billeder uden altattributter vises undertiden forkert.

De fleste af disse ting er relativt små. Men hvis du ønsker, at din side skal vises korrekt, skal du sikre dig, at en browser har dens fulde standardtilstand aktiveret.

Og for at gøre det, har du brug for en DOKTYPE. (Hvis du ikke er sikker på, hvad du skal bruge, skal du bare bruge .)

9. Forsømmelse af skema-markering

Skema-markering hjælper søgemaskiner med at få en bedre idé om, hvad der er på din side. Mere specifikt fortæller denne markering søgemaskiner, hvad du skriver om i hvert afsnit.

I en artikel kan du for eksempel bruge skema-markering til at fortælle en søgemaskine titlen, forfatteren, datoen, udgiveren og andre nyttige oplysninger om en artikel.

Der er skemaer til film, bøger, organisationer, mennesker, restauranter, produkter, steder, handlinger, forskellige typer af data, musik, skulptur, reservationer, tjenester, pengeautomater, bryggerier og næsten alt andet, du kan tænke på. Det er ret forbløffende.

Du kan helt sikkert slippe af sted uden at bruge skema-markering. Din side vises korrekt uden den. Dine læsere ved ikke engang, at det er der. Men der er meget at tjene på at inkludere denne markup. Søgemaskiner vil være i stand til at give meget mere detaljerede, nyttige oplysninger om din side, inklusive rige uddrag.

Og med Googles schema-markeringsværktøj er processen faktisk ret nem.

Bliv vant til HTML bedste praksis

Det kan tage et stykke tid at gøre disse bedste praksis til en vane. Og nogle gange kan det føles som om du tager en masse ekstra tid til noget, der ikke får dig meget. Men sørg for, at din HTML og CSS Lær HTML og CSS med disse trinvise tutorialsEr du nysgerrig efter HTML, CSS og JavaScript? Hvis du tror, ​​at du har en evne til at lære at oprette websteder fra bunden - her er et par gode trin-for-trin-tutorials værd at prøve. Læs mere er veludformede, lette at arbejde med og vedligeholdelsesbesparende sparer dig meget tid på lang sigt.

Hvilke andre gode vaner har du fundet at være nyttige, når du opretter websider? Er du uenig i nogen af ​​ovennævnte fremgangsmåder? Del dine tanker i kommentarerne herunder!