9 fouten die u niet mag maken bij het bouwen van een webpagina

Advertentie

Een webpagina maken met HTML en CSS is vrij eenvoudig Hoe een website te maken: voor beginnersVandaag zal ik je begeleiden bij het maken van een complete website vanaf nul. Maak je geen zorgen als dit moeilijk klinkt. Ik zal je er bij elke stap doorheen begeleiden. Lees verder . Maar het is gemakkelijk om fouten te maken en er zijn nogal wat dingen waar u misschien niet aan denkt. Meestal maken deze kleine fouten niet veel uit.

Maar op de lange termijn kunnen ze je leven moeilijker maken. Deze negen fouten zijn gemakkelijk te maken, maar als u ze eerder dan later laat voorkomen, zal uw pagina er beter uitzien, gemakkelijker te onderhouden zijn en functioneren zoals u dat wilt.

1. Inline styling

Een van de geweldige dingen van HTML en CSS is dat je elke tekstregel kunt opmaken - elk woord eigenlijk - wanneer je maar wilt. Maar dat betekent niet dat u van deze mogelijkheid moet profiteren.

Hier is een voorbeeld van een inline-stijl die u zou kunnen gebruiken om een ​​alinea groter te maken dan de omringende alinea's en deze in een andere kleur te markeren:

Jouw tekst hier.

Dit geeft de paragraaf een CSS-stijl Leer HTML en CSS met deze stapsgewijze zelfstudiesBenieuwd naar HTML, CSS en JavaScript? Als je denkt dat je een talent hebt om te leren hoe je vanaf het begin websites kunt maken, volgen hier een paar geweldige stapsgewijze zelfstudies die het proberen waard zijn. Lees verder dat eindigt met de conclusie van de paragraaf. Lijkt behoorlijk efficiënt, toch?

Er is één groot probleem mee: als u veel dingen op uw website wilt veranderen, moet u elke vorm van inline styling zoeken en wijzigen. Als je 100 verschillende alinea's hebt met een tekstgrootte van 120% en blauw, zul je ze alle 100 moeten vinden en ze moeten wijzigen in wat je ook hebt besloten, een betere indeling.

Gebruik in plaats daarvan een CSS-stylesheet. Dit is de stijl die je zou gebruiken voor de bovenstaande alinea:

p. belangrijk {maat: 120%; kleur blauw; }

In plaats van de inline-stijl te gebruiken, kunt u nu gewoon deze regel gebruiken:

Jouw tekst hier.

En je alinea zal groot en blauw zijn. En wanneer u een wijziging aanbrengt in de "belangrijke" klasse in uw CSS, zullen ze allemaal veranderen.

2. Tabellen voor layout

Vroeger gebruikten mensen regelmatig tabellen voor het opmaken van de pagina-indeling. Door een tabel te gebruiken, kunt u de elementen op uw pagina in kolommen en rijen ordenen en verschillende uitlijningen en stijlen toepassen. Zelfs eencellige tabellen zouden worden gebruikt om de inhoud correct uit te lijnen. Maar over het algemeen wordt dit gebruik van tafels afgekeurd.

Net zoals bij inline stijlen, is het gebruik van CSS in plaats van HTML-tabellen voor lay-out gemakkelijker te onderhouden. Nogmaals, als u wijzigingen wilt aanbrengen op tientallen of honderden pagina's, is het veel gemakkelijker om uw stylesheet te bewerken dan door elke pagina te gaan en de tabellen aan te passen.

Naast eenvoudiger onderhoud, is het lezen van CSS-lay-outs ook een stuk eenvoudiger dan het lezen van HTML-tabellen. Vooral als je uiteindelijk veel niveaus van tafels in elkaar nestelt. Het is misschien niet super eenvoudig om heen en weer te gaan tussen je HTML-document en je stylesheet om precies te zien wat er gebeurt, maar de inhoud van je pagina zal duidelijker en gemakkelijker te bewerken zijn.

Het hier en daar gebruiken van tabellen om pagina's in kolommen op te splitsen, is geen doodzonde. Soms is het gemakkelijker en sneller dan rommelen met CSS. Maar als u gigantische tabellen met meerdere lagen maakt, kunt u overwegen om opnieuw te formatteren met CSS.

3. Verouderde HTML

Zoals elke taal verandert HTML regelmatig. Officieel erkende tags veranderen en sommige worden verouderd. Zelfs als die tags nog steeds werken, kunt u ze het beste vermijden.

Als je bijvoorbeeld gewend bent om de tag voor vet en de tag voor cursief, je loopt achter op de tijd. en (voor "nadruk") zijn nu de standaard tags.

, , , , en anderen zijn ook verouderd.

De meeste verouderde tags zijn vervangen door CSS, dus je moet stijlen gebruiken (bij voorkeur niet inline) om hetzelfde effect te krijgen. Als u niet zeker weet hoe u een verouderde tag moet vervangen of als een specifieke tag nog steeds in gebruik is, controleer dan de officiële HTML-documentatie of voer gewoon een snelle zoekopdracht uit.

4. Inline JavaScript

Sommige webpagina's gebruiken JavaScript voeg extra functionaliteit toe JavaScript en webontwikkeling: het documentobjectmodel gebruikenDit artikel laat u kennismaken met het documentenskelet waarmee JavaScript werkt. Met een praktische kennis van dit abstracte documentobjectmodel, kunt u JavaScript schrijven dat op elke webpagina werkt. Lees verder . Het kan webpagina's interactief maken, tekst valideren terwijl deze wordt ingevoerd, animaties toevoegen, reageren op gebruikersacties, enzovoort. Kortom, het kan een pagina nuttiger maken door extra gedrag te bieden.

Net zoals CSS, kunt u inline JavaScript aan uw HTML toevoegen. Net als CSS wordt dit over het algemeen afgeraden. Behalve dat ze mogelijk moeilijker te onderhouden zijn, zijn er nog een aantal andere redenen die deze vermaning rechtvaardigen.

Inline JavaScript kan grotere hoeveelheden bandbreedte gebruiken dan een script dat vanuit een ander bestand is gekoppeld. Een proces genaamd minification comprimeert HTML en CSS voordat het naar een gebruiker wordt verzonden, waardoor er minder bandbreedte nodig is via breedband- of mobiele verbindingen. Inline JavaScript kan echter niet worden verkleind. Het wordt ook niet in de cache opgeslagen, terwijl het een apart JavaScript-bestand is kan in de cache worden opgeslagen.

Al deze dingen maken inline JavaScript meer bandbreedte-intensief.

Het is ook moeilijker om te debuggen, omdat je een JavaScript-validator kunt gebruiken voor een JavaScript-bestand... maar het werkt niet met inline script. En nogmaals, het zorgt voor schonere en gemakkelijker te onderhouden HTML.

5. Meerdere H1-tags

Koptags zijn geweldig. Ze maken het gemakkelijker om pagina's te doorzoeken, ze kunnen u een SEO-boost geven en ze kunnen worden gebruikt om bepaalde punten te benadrukken.

Maar er zijn niet voor niets zes niveaus van koptags. Er mag eigenlijk maar één H1-tag op uw pagina staan. En dat is vaak de titel van de pagina (vooral op blogs en vergelijkbare sites). U zou kunnen denken dat als u een aantal zoekwoorden in H1-tags plaatst, Google de kans groter zal maken ze op te pikken en uw site hoger in de resultaten zal rangschikken.

Maar wat het echt doet, is uw pagina verwarrender en moeilijker te lezen maken. Dat zal alle SEO-voordelen die u toch zou zien tenietdoen.

Gebruik H2, H3 en de rest van de koptags om uw pagina beter te schetsen. Het niveau van de kop moet uw lezer een idee geven van hoe belangrijk de volgende sectie is. Als je ze hebt misleid, weten ze het en zullen ze niet gelukkig zijn.

6. Sla Image Alts over

Elke afbeelding kan een 'alt'-kenmerk krijgen dat een specifieke tekstregel weergeeft als de afbeelding niet kan worden weergegeven. Dit lijkt misschien niet zo belangrijk, vooral met moderne browsers (zowel desktop als mobiel) die zo ongeveer alles kunnen weergeven.

Maar het niet toevoegen van alt-attributen is een grote fout, vooral in het tijdperk van constant mobiel browsen. Mobiele verbindingen zijn niet altijd geweldig en als een browser een afbeelding niet kan laden, heeft uw lezer geen idee wat hij daar zou moeten zien. Een alt-attribuut kan dat oplossen.

En als iemand een schermlezer VoiceOver maakt Apple-apparaten toegankelijker dan ooitPresident van de American Foundation of the Blind meent dat "Apple tot nu toe meer heeft gedaan voor toegankelijkheid dan welk ander bedrijf ook", en VoiceOver speelde daarin een grote rol. Lees verder of een andere toegankelijkheidsfunctie, dat alt-attribuut is misschien alles wat ze uit de afbeelding halen.

Natuurlijk zijn er ook potentiële SEO-voordelen. Zoekmachines kunnen korte, beschrijvende alt-attributen indexeren. Maar het grootste voordeel hier is het helpen van je lezers.

7. Tags niet sluiten

Er zijn enkele HTML-tags die u kunt weghalen door niet te sluiten, zoals

en

. Browsers weten dat wanneer u een andere alinea of ​​lijstitem start, de vorige voorbij is. Maar dat betekent niet dat u de afsluitende tags moet overslaan.

In de eerste plaats is er, ondanks de vooruitgang in browsertechnologie, zeker de mogelijkheid dat de browser uw inhoud onjuist weergeeft als u uw tags niet heeft gesloten. En het toepassen van stijlen kan enkele onvoorspelbare resultaten opleveren, zoals Stack Exchange-gebruiker Robertc demonstreert.

Het komt erop neer dat browsers sluitingstags verwachten. Ze hebben ze niet absoluut nodig... maar ze zullen er zeker baat bij hebben als ze de juiste HTML hebben wanneer ze proberen uw pagina weer te geven.

Gelukkig is er niet veel voor nodig om je tags te sluiten, vooral als je een goede HTML-editor gebruikt.

8. Exclusief een DOCTYPE

Aan het begin van HTML-documenten ziet u meestal een DOCTYPE-verklaring, zoals deze:

Er wordt niet vaak over gepraat, maar het is een belangrijk element op je pagina. De DOCTYPE-verklaring vertelt een browser welk type HTML u gebruikt. Hierdoor kan het de HTML correct weergeven.

Als u de DOCTYPE-verklaring overslaat, wordt de pagina weergegeven in de "eigenaardigheden-modus". Dit is de moderne browser verdediging tegen verouderde webpagina's. En het verandert hoe uw pagina wordt weergegeven. Een snelle blik op De eigenaardigheidsmodus van Firefox laat zien dat hoofdlettergevoeligheid verandert, lettertype-eigenschappen niet overerven in tabellen, lettergroottes anders worden berekend en afbeeldingen zonder alt-attributen soms onjuist worden weergegeven.

De meeste van deze dingen zijn relatief klein. Maar als u wilt dat uw pagina correct wordt weergegeven, moet u ervoor zorgen dat een browser de volledige standaardmodus heeft ingeschakeld.

En daarvoor heb je een DOCTYPE nodig. (Als u niet zeker weet wat u moet gebruiken, gebruik dan gewoon .)

9. Verwaarloos schema-opmaak

Schema-opmaak helpt zoekmachines om een ​​beter idee te krijgen van wat er op uw pagina staat. Meer specifiek vertelt die opmaak aan zoekmachines waar u in elke sectie over schrijft.

In een artikel kunt u bijvoorbeeld schema-opmaak gebruiken om een ​​zoekmachine de titel, auteur, datum, uitgever en andere nuttige informatie over een artikel te vertellen.

Er zijn schema's voor films, boeken, organisaties, mensen, restaurants, producten, plaatsen, acties, verschillende soorten van data, muziek, beeldhouwkunst, reserveringen, diensten, geldautomaten, brouwerijen en zo ongeveer alles wat u maar kunt bedenken. Het is best verbazingwekkend.

U kunt zeker wegkomen zonder schema-opmaak te gebruiken. Uw pagina wordt zonder deze correct weergegeven. Je lezers weten niet eens dat het er is. Maar er valt veel te winnen door deze opmaak op te nemen. Zoekmachines kunnen veel gedetailleerdere, nuttige informatie over uw pagina verstrekken, inclusief rich snippets.

En met de schema-opmaaktool van Google is het proces eigenlijk vrij eenvoudig.

Wen aan HTML Best Practices

Het kan even duren voordat deze best practices een gewoonte worden. En soms kan het voelen alsof je veel extra tijd neemt voor iets dat je niet veel oplevert. Maar zorg ervoor dat je HTML en CSS Leer HTML en CSS met deze stapsgewijze zelfstudiesBenieuwd naar HTML, CSS en JavaScript? Als je denkt dat je een talent hebt om te leren hoe je vanaf het begin websites kunt maken, volgen hier een paar geweldige stapsgewijze zelfstudies die het proberen waard zijn. Lees verder zijn goed ingedeeld, gemakkelijk in het gebruik en onderhoudbaar en zullen u op de lange termijn veel tijd besparen.

Welke andere goede gewoontes heb je nuttig gevonden bij het maken van webpagina's? Ben je het niet eens met een van de bovenstaande praktijken? Deel uw mening in de onderstaande opmerkingen!