Delen:
9 fouten die u niet zou moeten maken bij het bouwen van een webpagina
Het maken van een webpagina met HTML en CSS is vrij eenvoudig. Hoe een website maken: voor beginners Hoe maak ik een website: voor beginners Vandaag zal ik u 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 leiden. Lees verder . Maar het is gemakkelijk om fouten te maken en er zijn nogal wat dingen waar je misschien niet aan denkt. Meestal zullen deze kleine fouten niet veel uitmaken.
Maar op de lange termijn kunnen ze uw leven moeilijker maken. Deze negen fouten zijn gemakkelijk te maken, maar als u ze eerder dan later uitzet, ziet uw pagina er beter uit, is hij gemakkelijker te onderhouden en functioneert hij hoe u hem wilt.
1. Inline Styling
Een van de geweldige dingen over HTML en CSS is dat je elke regel tekst kunt opmaken - elk woord, echt waar je wilt. Maar dat betekent niet dat u van deze mogelijkheid moet profiteren.
Hier is een voorbeeld van een inline-stijl die u kunt gebruiken om een alinea groter te maken dan de omringende paragrafen en deze in een andere kleur te markeren:
Jouw tekst hier.
Dit geeft de alinea een CSS-stijl Leer HTML en CSS met deze stap voor stap Handleidingen Leer HTML en CSS met deze stap voor stap handleidingen Benieuwd naar HTML, CSS en JavaScript? Als je denkt dat je de gave hebt om vanaf nul te leren hoe je websites kunt maken - hier zijn een paar geweldige stap-voor-stap tutorials die het proberen waard zijn. Lees meer dat eindigt met de conclusie van de paragraaf. Het ziet er behoorlijk efficiënt uit, toch??
Er is één groot probleem mee: als u heel wat dingen op uw website wilt veranderen, moet u elke instantie van inline-styling gaan zoeken en wijzigen. Als je 100 verschillende paragrafen hebt die 120% tekstgrootte en blauw hebben, zul je alle 100 moeten vinden en ze moeten veranderen naar wat je hebt besloten is een beter formaat.
Gebruik in plaats daarvan een CSS-stylesheet. Dit is de stijl die je zou gebruiken voor de bovenstaande paragraaf:
p.important size: 120%; kleur blauw; In plaats van de inline-stijl te gebruiken, kunt u nu eenvoudig deze regel gebruiken:
Jouw tekst hier.
En je alinea zal groot en blauw zijn. En wanneer u een wijziging aanbrengt in de “belangrijk” klasse in uw CSS, ze zullen allemaal veranderen.
2. Tabellen voor lay-out
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 dit gebruik van tabellen wordt over het algemeen afgekeurd.
Net als 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 elke pagina te doorlopen en de tabellen aan te passen.
Behalve eenvoudiger onderhoud is het lezen van CSS-lay-outs meestal een stuk eenvoudiger dan het lezen van HTML-tabellen. Vooral als je uiteindelijk vele niveaus tafels in elkaar nestelt. Het is misschien niet zo eenvoudig om heen en weer te gaan tussen uw HTML-document en uw stylesheet om precies te zien wat er gebeurt, maar de inhoud van uw pagina wordt duidelijker en gemakkelijker te bewerken.
Het gebruik van tabellen hier en daar om pagina's in kolommen te splitsen is geen doodzonde. Soms is het gemakkelijker en sneller dan rommelen met CSS. Maar als u gigantische tabellen met meerdere lagen maakt, moet u overwegen om opnieuw te formatteren met CSS.
3. Verouderde HTML
Zoals elke taal, HTML verandert regelmatig. Officieel herkende tags veranderen en sommige worden verouderd. Zelfs als die tags nog steeds werken, is het het beste om ze te vermijden.
Bijvoorbeeld als u gewend bent om de. Te gebruiken tag voor vet en de tag voor cursief, je bent achter de tijd. en (voor “nadruk”) zijn nu de standaardtags.
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 verouderd label moet vervangen of als een specifieke tag nog steeds in gebruik is, raadpleegt u de officiële HTML-documentatie of voert u snel een zoekopdracht uit.
4. Inline JavaScript
Sommige webpagina's gebruiken JavaScript om extra functionaliteit JavaScript en webontwikkeling toe te voegen: Documentmodel JavaScript en webontwikkeling gebruiken: Documentmodel gebruiken In dit artikel leert u het documentskelet waarmee JavaScript werkt. Als u op de hoogte bent van dit abstracte documentobjectmodel, kunt u JavaScript schrijven dat op elke webpagina werkt. Lees verder . Het kan webpagina's interactief maken, tekst valideren terwijl het wordt ingevoerd, animaties toevoegen, antwoorden geven op gebruikersacties, enzovoort. Kortom, het kan een pagina nuttiger maken door extra gedrag aan te bieden.
Heel erg zoals CSS, kunt u inline JavaScript toevoegen aan uw HTML. Net als bij CSS wordt dit over het algemeen afgeraden. Naast het feit dat het moeilijker te onderhouden is, zijn er nog een paar andere redenen die deze waarschuwing rechtvaardigen.
Inline JavaScript kan grotere hoeveelheden bandbreedte gebruiken dan een script dat is gelinkt vanuit een ander bestand. Een proces met de naam minification comprimeert HTML en CSS voordat het naar een gebruiker wordt verzonden, waardoor 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 gezet.
Al deze dingen maken inline JavaScript meer bandbreedte-intensief.
Het is ook moeilijker om te debuggen, omdat u een JavaScript-validator voor een JavaScript-bestand kunt gebruiken ... maar het werkt niet op inlinescript. En nogmaals, het zorgt voor schonere en gemakkelijker te onderhouden HTML.
5. Meerdere H1-tags
Koerslabels zijn geweldig. Ze maken pagina's gemakkelijker te skimmen, ze kunnen u een SEO-boost geven en ze kunnen worden gebruikt om bepaalde punten te benadrukken.
Maar er zijn zes niveaus van heading-tags om een reden. Er zou eigenlijk maar één H1-tag op uw pagina moeten staan. En dat is vaak de titel van de pagina (vooral op blogs en vergelijkbare sites). U zou kunnen denken dat Google meer kans maakt om een reeks zoekwoorden in H1-tags op te nemen en uw site hoger in de zoekresultaten te plaatsen.
Maar wat het werkelijk doet, is uw pagina verwarrend en moeilijker te lezen maken. Dat zal alle SEO-voordelen teniet doen die je misschien zou zien.
Gebruik H2, H3 en de rest van de headinglabels 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 hen hebt misleid, zullen ze het weten en zullen ze niet gelukkig zijn.
6. Sla afbeelding Alts over
Elke afbeelding kan een worden gegeven “alt” attribuut dat een specifieke regel tekst weergeeft als de afbeelding niet kan worden weergegeven. Dit lijkt misschien niet zo erg, vooral met moderne browsers (zowel desktop als mobiel) die vrijwel 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 gebruikt VoiceOver maakt Apple-apparaten toegankelijker dan ooit VoiceOver maakt Apple-apparaten toegankelijker dan ooit President van de American Foundation of Blind denkt dat "Apple meer heeft gedaan voor toegankelijkheid dan welk ander bedrijf tot nu toe," - en VoiceOver speelde daarin een grote rol. Meer lezen of een andere toegankelijkheidsfunctie, dat alt-attribuut misschien alles is 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 is om uw lezers te helpen.
7. Niet-afsluitende tags
Er zijn enkele HTML-tags die je weg kunt krijgen door niet te sluiten, zoals
en
Eerst en vooral, ondanks de vooruitgang in browsertechnologie, is er een 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 aantoont.
Waar het op neer komt is dat browsers sluitingstags verwachten. Ze hebben ze niet absoluut nodig ... maar ze zullen zeker profiteren van de juiste HTML wanneer ze proberen je pagina weer te geven.
Gelukkig is het niet veel nodig om je tags te sluiten, vooral als je een goede HTML-editor gebruikt.
8. Niet inclusief een DOCTYPE
Aan het begin van HTML-documenten ziet u meestal een DOCTYPE-verklaring, zoals deze:
Het is iets dat niet vaak wordt besproken, maar het is een belangrijk element in uw 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 “eigenaardige modus.” Dit is de verdediging van de moderne browser tegen verouderde webpagina's. En het verandert de manier waarop uw pagina wordt weergegeven. Een snelle blik op de quirks-modus van Firefox laat zien dat wijzigingen in hoofdlettergevoeligheid, lettertype-eigenschappen niet in tabellen overerven, lettergroottes worden anders berekend en afbeeldingen zonder alt-attributen worden soms verkeerd 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 zijn volledige standaardenmodus heeft ingeschakeld.
En om dat te doen, hebt u een DOCTYPE nodig. (Gebruik gewoon als u niet zeker weet wat u moet gebruiken .)
9. Neglect Schema Markup
Schema-markeringen helpen zoekmachines om een beter idee te krijgen van wat er op uw pagina staat. Meer specifiek, die markup vertelt zoekmachines waar je over schrijft in elke sectie.
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 gegevens, muziek, beeldhouwwerk, reserveringen, services, geldautomaten, brouwerijen en zo ongeveer alles wat u maar kunt bedenken. Het is best verbazingwekkend.
U kunt absoluut wegkomen zonder schema-opmaak te gebruiken. Uw pagina wordt zonder deze correct weergegeven. Je lezers zullen niet eens weten dat het er is. Maar er is veel te winnen bij het opnemen van deze markup. Zoekmachines kunnen veel gedetailleerdere, nuttige informatie over uw pagina verstrekken, inclusief rich snippets.
En met de schema-opmaak tool van Google is het proces eigenlijk vrij eenvoudig.
Gebruik Best Practices voor HTML
Het maken van deze aanbevolen werkwijzen kan een tijdje duren. En soms kan het voelen alsof je veel extra tijd neemt voor iets dat je niet erg veel krijgt. Maar zorg ervoor dat uw HTML en CSS HTML en CSS leren met deze stapsgewijze zelfstudies Leer HTML en CSS met deze stapsgewijze handleidingen Benieuwd naar HTML, CSS en JavaScript? Als je denkt dat je de gave hebt om vanaf nul te leren hoe je websites kunt maken - hier zijn een paar geweldige stap-voor-stap tutorials die het proberen waard zijn. Meer lezen zijn goed ingedeeld, gemakkelijk om mee te werken en te onderhouden, dit bespaart u op de lange termijn veel tijd.
Welke andere goede gewoonten heb je gevonden bij het maken van webpagina's? Ben je het niet eens met bovenstaande praktijken? Deel uw mening in de reacties hieronder!