30 HTML Best Practices voor beginners

Het moeilijkste aspect van het werken met Nettuts + is het rekening houden met zoveel verschillende vaardigheidsniveaus. Als we te veel geavanceerde tutorials plaatsen, zal ons beginnerspubliek daar niet van profiteren. Hetzelfde geldt voor het tegenovergestelde. We doen ons best, maar voelen je altijd vrij om binnen te komen als je het gevoel hebt dat je wordt verwaarloosd. Deze site is voor jou, dus zeg het maar! Met dat gezegd, is de tutorial van vandaag specifiek voor diegenen die net duiken in webontwikkeling. Als je een jaar ervaring of minder hebt, hopelijk helpen sommige van de hier genoemde tips je om beter en sneller te worden!

U kunt ook enkele HTML-builders op Envato Market bekijken, zoals de populaire VSBuilder, waarmee u de HTML en CSS voor het automatisch bouwen van uw websites kunt genereren door opties te kiezen in een eenvoudige interface.

Of u kunt uw website helemaal opnieuw laten bouwen door een professionele ontwikkelaar van Envato Studio, die alle praktische tips voor HTML kent en volgt.

Leer CSS: de complete gids

We hebben een complete handleiding samengesteld om u te helpen bij het leren van CSS, of u nu net begint met de basis of als u meer geavanceerde CSS wilt verkennen.

Laten we, zonder verder uitstel, 30 best practices bekijken om te observeren bij het maken van uw markup.

1: sluit altijd uw tags

Vroeger was het niet ongewoon om dingen als deze te zien:

Een beetje tekst hier. 
Een nieuwe tekst hier. 
Je snapt het idee.

Merk op hoe het omhullende UL / OL-label werd weggelaten. Bovendien hebben velen ervoor gekozen om de afsluitende LI-tags ook te laten. Volgens de huidige normen is dit gewoon een slechte gewoonte en moet 100% worden vermeden. Sluit altijd uw tags altijd. Anders zult u bij elke beurt problemen met de validatie en problemen ondervinden.

Beter

 Een beetje tekst hier. 
 Een nieuwe tekst hier. 
 Je snapt het idee.

2: Verklaren het juiste DocType

Toen ik jonger was, nam ik nogal wat deel aan CSS-fora. Wanneer een gebruiker een probleem had, voordat ze naar hun situatie zouden kijken, moesten ze eerst twee dingen doen:

Valideer het CSS-bestand. Los eventuele noodzakelijke fouten op.
Voeg een doctype toe.

"Het DOCTYPE gaat vóór de HTML-openingstag aan de bovenkant van de pagina en vertelt de browser of de pagina HTML, XHTML of een combinatie van beide bevat, zodat het de opmaak correct kan interpreteren."

De meesten van ons kiezen tussen vier verschillende doctypes bij het maken van nieuwe websites.

http://www.w3.org/TR/html4/strict.dtd ">
http://www.w3.org/TR/html4/loose.dtd ">
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd ">

Er is momenteel een groot debat gaande over de juiste keuze hier. Op een gegeven moment werd het als de beste methode beschouwd om de XHTML Strict-versie te gebruiken. Na enig onderzoek werd echter duidelijk dat de meeste browsers teruggaan naar normale HTML bij het interpreteren ervan. Om die reden hebben velen ervoor gekozen in plaats daarvan HTML 4.01 Strict te gebruiken. Het komt erop neer dat elk van deze u in toom zal houden. Doe wat onderzoek en make-up je eigen geest.

3: Gebruik nooit inline stijlen

Wanneer u hard aan uw markup werkt, kan het soms verleidelijk zijn om de makkelijke route te nemen en een beetje styling binnen te sluipen.

Ik ga deze tekst rood maken zodat deze echt opvalt en ervoor zorgt dat mensen opmerken!

Natuurlijk, het ziet er onschuldig genoeg uit. Dit wijst echter op een fout in uw codeermethoden.

Wanneer je je opmaak maakt, denk dan niet eens aan de styling. U begint pas met het toevoegen van stijlen als de pagina volledig is gecodeerd.

Het is als het oversteken van de streams in Ghostbusters. Het is gewoon geen goed idee.
-Chris Coyier (verwijzend naar iets dat totaal niets met elkaar te maken heeft.)

Voltooi in plaats daarvan uw markup en verwijs vervolgens naar die P-tag van uw externe stylesheet.

Beter

#someElement> p kleur: rood;

4: plaats alle externe CSS-bestanden binnen de head-tag

Technisch gezien kunt u stylesheets plaatsen waar u maar wilt. In de HTML-specificatie wordt echter aanbevolen dat ze in de HEAD-tag van het document worden geplaatst. Het belangrijkste voordeel is dat uw pagina's schijnbaar sneller worden geladen.

Tijdens het onderzoeken van de prestaties bij Yahoo !, ontdekten we dat het verplaatsen van stylesheets naar het document HEAD ervoor zorgt dat pagina's sneller worden geladen. Dit komt omdat het plaatsen van stylesheets in de HEAD de pagina in staat stelt om progressief te renderen.
- ySlow Team

 Mijn favorieten soorten maïs

5: Overweeg Javascript-bestanden onderaan te plaatsen

Denk eraan - het primaire doel is om de pagina zo snel mogelijk voor de gebruiker te laten laden. Bij het laden van een script kan de browser niet doorgaan totdat het volledige bestand is geladen. De gebruiker zal dus langer moeten wachten voordat hij enige vooruitgang merkt.

Als u JS-bestanden hebt waarvan het enige doel is om functionaliteit toe te voegen, bijvoorbeeld nadat u op een knop hebt geklikt, kunt u doorgaan en deze bestanden onderaan plaatsen, net voor de afsluitende body-tag. Dit is absoluut een best practice.

Beter

En nu ken je mijn favoriete soorten maïs.

6: Gebruik nooit inline Javascript. Het is geen 1996!

Een andere gangbare praktijk jaren geleden was om JS-commando's direct in tags te plaatsen. Dit was heel gebruikelijk met eenvoudige afbeeldingengalerijen. In wezen is een attribuut toegevoegd aan de tag. De waarde zou dan gelijk zijn aan een of andere JS-procedure. Onnodig te zeggen dat u dit nooit zou moeten doen. Stuur deze code in plaats daarvan over naar een extern JS-bestand en gebruik "addEventListener / attachEvent" om te "luisteren" naar uw gewenste evenement. Of gebruik de "klik" -methode als u een framework zoals jQuery gebruikt.

$ ('a # moreCornInfoLink'). klik (functie () alert ('Wilt u meer informatie over maïs?';);

7: Valideer continu

Ik heb onlangs geblogd over hoe het idee van validatie volledig is miskend door degenen die het doel ervan niet helemaal begrijpen. Zoals ik in het artikel vermeld, "validatie zou voor u moeten werken, niet tegen."

Echter, vooral wanneer ik voor het eerst aan de slag ga, raad ik u ten zeerste aan de Web Developer Toolbar te downloaden en de opties "Valideer HTML" en "Valideer CSS" continu te gebruiken. Hoewel CSS een enigszins eenvoudig te leren taal is, kan het je ook doen scheuren. Zoals je vaak zult zien, is het je sjofele markup die het vreemde witruimteprobleem op de pagina veroorzaakt. Valideren, valideren, valideren.

8: Download Firebug

Ik kan dit niet genoeg aanbevelen. Firebug is zonder twijfel de beste plug-in die je ooit zult gebruiken bij het maken van websites. Het biedt niet alleen een ongelooflijke Javascript-foutopsporing, maar u leert ook hoe u kunt bepalen welke elementen die extra opvulling erven waarvan u zich niet bewust was. Download het!

9: Gebruik Firebug!

Uit mijn ervaringen profiteren veel gebruikers slechts ongeveer 20% van de mogelijkheden van Firebug. Je doet jezelf echt als een slechte dienst. Neem een paar uur en doorzoek het web voor elke waardige tutorial die je over het onderwerp kunt vinden.

Middelen

Overzicht van Firebug
Debug Javascript With Firebug - videozelfstudie

10: Bewaar uw tagnamen in kleine letters

Technisch gezien kun je wegkomen met het kapitaliseren van je tagnamen.

 Hier is een interessant feit over maïs.

Dat gezegd hebbende, doe dat alsjeblieft niet. Het heeft geen nut en doet pijn aan mijn ogen - om nog maar te zwijgen van het feit dat het me doet denken aan de html-functie van Microsoft Word!

Beter

 Hier is een interessant feit over maïs.

11: Gebruik H1 - H6-tags

Toegegeven, dit is iets waar ik de neiging om te verslappen. Het is het beste om alle zes deze tags te gebruiken. Als ik eerlijk ben, implementeer ik meestal alleen de top vier; maar ik ben eraan bezig! :) Forceer uzelf voor semantische en SEO-redenen om die P-tag te vervangen door een H6 wanneer dat van toepassing is.

Dit is een heel belangrijk graancomponent! 
 Klein, maar nog steeds aanzienlijk graanfeitje komt hier.

12: Als u een blog bouwt, sla de H1 op voor de titel van het artikel

Vanochtend vroeg ik op Twitter aan onze volgers of ze vonden dat het het slimst was om de H1-tag als logo te plaatsen, of om het in plaats daarvan als de titel van het artikel te gebruiken. Ongeveer 80% van de geretourneerde tweets was voorstander van de laatste methode.

Zoals met alles, bepaal wat het beste is voor uw eigen website. Als u echter een blog maakt, raad ik u aan uw H1-tags op te slaan voor de titel van uw artikel. Voor SEO-doeleinden is dit een betere oefening - naar mijn mening.

13: ySlow downloaden

Vooral in de laatste paar jaar heeft het Yahoo-team echt geweldig werk verricht in ons vakgebied. Nog niet zo lang geleden brachten ze een extensie uit voor Firebug genaamd ySlow. Wanneer geactiveerd, zal het de gegeven website analyseren en een "rapportkaart" van soorten retourneren die de gebieden beschrijft waar uw site verbeterd moet worden. Het kan een beetje hard zijn, maar het is allemaal voor het algemeen belang. ik raad het ten sterkste aan.

14: Navigatie omwikkelen met een ongeordende lijst

Elke website heeft een bepaald navigatiegedeelte. Hoewel je zeker weg kunt komen met het formatteren zoals het is:

  Home Over Contact

Ik zou u willen aanmoedigen om deze methode niet te gebruiken, om semantische redenen. Jouw taak is om de best mogelijke code te schrijven waar je toe in staat bent.

Waarom zouden we een lijst met navigatielinks stijlen met iets anders dan een ongeordende LIJST?

Het UL-label is bedoeld om een lijst met items te bevatten.

Beter

 Huis
 Wat betreft
 Contact

15: Leer hoe u IE kunt targeten

Je zult ongetwijfeld merken dat je op een of ander moment in IE schreeuwt. Het is eigenlijk een hechtingservaring voor de gemeenschap geworden. Als ik op Twitter lees hoe een van mijn vrienden de krachten van IE trotseert, glimlach ik gewoon en denk ik: "Ik weet hoe je je voelt, vriend."

De eerste stap is, nadat u uw primaire CSS-bestand hebt voltooid, om een uniek "ie.css" -bestand te maken. U kunt het alleen voor IE doorverwijzen met behulp van de volgende code.

Deze code zegt: "Als de browser van de gebruiker Internet Explorer 6 of lager is, importeer dit stijlblad dan anders niets." Als u ook IE7 wilt compenseren, vervangt u eenvoudig "lt" door "lte" (kleiner dan of gelijk aan).

16: Kies een Geweldige code-editor

Of je nu op Windows of op een Mac zit, er zijn tal van fantastische code-editors die fantastisch voor je zullen werken. Persoonlijk heb ik een Mac en een pc naast elkaar die ik de hele dag door gebruik. Als gevolg daarvan heb ik een redelijk goede kennis ontwikkeld van wat er beschikbaar is. Hier zijn mijn belangrijkste keuzes / aanbevelingen in volgorde:

Mac Lovers

koda
Espresso
TextMate
Aptana
DreamWeaver CS4

PC Lovers

InType
E-Text Editor
blocnote++
Aptana
Dreamweaver CS4

17: Nadat de website is voltooid, comprimeren!

Door uw CSS- en Javascript-bestanden te omzeilen, kunt u de grootte van elk bestand met ongeveer 25% verminderen. Doe alsjeblieft niet de moeite om dit te doen terwijl je nog in ontwikkeling bent. Zodra de site echter min of meer compleet is, gebruikt u enkele online compressieprogramma's om uzelf wat bandbreedte te besparen..

Javascript-compressieservices

Javascript-compressor
JS Compressor

CSS Compressie Services

CSS-optimizer
CSS-compressor
Schone CSS

18: Knippen, knippen, knippen

Terugkijkend op mijn eerste website, moet ik een ERNSTIG geval van divitis hebben gehad. Je natuurlijke instinct is om elke paragraaf veilig te omwikkelen met een div, en dan omwikkeld met een extra div voor goede maatregel. Zoals je snel zult leren, is dit zeer inefficiënt.

Nadat u uw markeringen hebt voltooid, gaat u er nog twee keer overheen en zoekt u naar manieren om het aantal elementen op de pagina te verminderen. Heeft die UL echt zijn eigen wikkel-div nodig? ik denk het niet.

Net zoals de sleutel tot schrijven is "knippen, knippen, knippen", geldt hetzelfde voor uw markup.

19: Alle afbeeldingen vereisen "Alt" -attributen

Het is gemakkelijk om de noodzaak voor alt-attributen binnen afbeeldingslabels te negeren. Toch is het voor toegankelijkheids- en validatie-redenen heel belangrijk dat u een extra moment neemt om deze secties in te vullen.

Slecht

Beter

20: Laat opblijven

Ik betwijfel ten zeerste dat ik de enige ben die op een bepaald moment tijdens het leren opkeek en zich realiseerde dat ik tot diep in de nacht in een pikdonkere kamer was. Als je jezelf in een vergelijkbare situatie bevindt, kun je er zeker van zijn dat je het juiste veld hebt gekozen.

De verbluffende "AHHA" -momenten, althans voor mij, vinden altijd laat in de nacht plaats. Dit was het geval toen ik voor het eerst begon te begrijpen wat Javascript-sluitingen precies waren. Het is een geweldig gevoel dat je moet ervaren, als je dat nog niet hebt gedaan.

21: bron bekijken

Wat is een betere manier om HTML te leren dan om je helden te kopiëren? In eerste instantie zijn we allemaal kopieerapparaten! Daarna begin je langzaam je eigen stijlen / methoden te ontwikkelen. Bezoek dus de websites van mensen die u respecteert. Hoe hebben ze deze en die sectie gecodeerd? Leer en kopieer van hen. We hebben het allemaal gedaan, en jij ook. (Steel het ontwerp niet, leer gewoon van de codeerstijl.)

Heb je een goed Javascript-effect dat je zou willen leren kennen? Waarschijnlijk gebruikt hij een plug-in om het effect te bereiken. Bekijk de bron en zoek in de HEAD-tag naar de naam van het script. Dan google en implementeer het in uw eigen site! Yay.

22: Style ALL Elements

Deze beste werkwijze geldt vooral bij het ontwerpen voor klanten. Alleen omdat je geen blockquote gebruikt, wil nog niet zeggen dat de klant dat niet doet. Gebruik nooit bestelde lijsten? Dat betekent niet dat hij dat niet zal doen! Doe jezelf een service en maak een speciale pagina specifiek om te pronken met de styling van elk element: ul, ol, p, h1-h6, blockquotes, etc.

23: gebruik Twitter

De laatste tijd kan ik de tv niet inschakelen zonder een verwijzing naar Twitter te horen; het is echt nogal onaangenaam geworden. Ik heb geen zin om naar Larry King te luisteren om zijn Twitter-account te adverteren - waarvan we allemaal weten dat hij niet handmatig wordt bijgewerkt. Yay voor assistenten! Ook hoeveel moeders hebben zich aangemeld voor accounts na goedkeuring door Oprah? We kunnen alleen maar verlangen naar de dag dat slechts weinigen van ons op de hoogte waren van de service en het potentieel voor "waterkoeler".

Aanvankelijk was het idee achter Twitter om te posten "wat je aan het doen was". Hoewel dit nog in beperkte mate geldt, is het in onze branche veel meer een netwerkhulpmiddel geworden. Als een web-ontwikkelaar die ik bewonder een artikel plaatst dat hij interessant vond, kun je maar beter geloven dat ik het ook ga bekijken - en dat zou jij ook moeten doen! Dit is de reden waarom sites zoals Digg snel steeds nerveuzer worden.

Als u zich zojuist hebt aangemeld, vergeet dan niet om ons te volgen: NETTUTS.

24: Leer Photoshop

Een recente commentator op Nettuts + viel ons aan omdat hij een paar aanbevelingen van Psdtuts + plaatste. Hij voerde aan dat Photoshop-tutorials geen zaken doen op een blog over webontwikkeling. Ik ben niet zeker van hem, maar Photoshop is bijna 24/7 open op mijn computer.

In feite kan Photoshop heel goed het belangrijkste gereedschap worden dat je hebt. Zodra je HTML en CSS hebt geleerd, zou ik je persoonlijk aanraden om zoveel mogelijk Photoshop-technieken te leren.

Ga naar het gedeelte Video's bij Psdtuts+
Vork meer dan $ 25 om je aan te melden voor een lidmaatschap van één maand voor Lynda.com. Bekijk elke video die je kunt vinden.
Geniet van de serie "You Suck at Photoshop".
Neem een paar uur de tijd om zoveel mogelijk PS-sneltoetsen te onthouden.

25: leer elke HTML-tag

Er zijn letterlijk tientallen HTML-tags die je niet elke dag tegenkomt. Dat betekent echter niet dat je ze niet moet leren! Bent u bekend met de "abbr" -tag? Hoe zit het met "citeren"? Deze twee verdienen alleen een plek in je gereedschapskist. Leer ze allemaal!

Trouwens, voor het geval u niet bekend bent met de twee hierboven genoemde:

abbr doet vrijwel wat je zou verwachten. Het verwijst naar een afkorting. "Blvd" kan ingepakt worden in een tag omdat het een afkorting is voor "boulevard".
citeren wordt gebruikt om naar de titel van sommige werken te verwijzen. Als u bijvoorbeeld naar dit artikel verwijst op uw eigen blog, kunt u '30 HTML Best Practices for Beginners' in een label. Merk op dat het niet moet worden gebruikt om naar de auteur van een citaat te verwijzen. Dit is een veel voorkomende misvatting.

26: Neem deel aan de gemeenschap

Net zoals sites als die van ons een grote bijdrage leveren aan de kennis van een webontwikkelaar, zou u dat ook moeten doen! Eindelijk uitgevonden hoe je je elementen correct kunt laten zweven? Maak een blogpost om anderen te leren hoe. Er zullen altijd mensen zijn met minder ervaring dan jij. Je draagt niet alleen bij aan de gemeenschap, maar je leert jezelf ook. Ooit opgevallen hoe je iets echt niet begrijpt totdat je wordt gedwongen het te onderwijzen?

27: Gebruik een CSS Reset

Dit is een ander gebied waarover gedebatteerd is. CSS resets: om al dan niet te gebruiken; dat is de vraag. Als ik mijn eigen persoonlijke advies zou aanbieden, raad ik je 100% aan om je eigen resetbestand te maken. Begin met het downloaden van een populaire, zoals die van Eric Meyer, en begin langzaam, naarmate je meer leert, deze in je eigen te veranderen. Als u dit niet doet, begrijpt u niet echt waarom uw lijstitems dat extra beetje padding ontvangen wanneer u het nergens in uw CSS-bestand hebt opgegeven. Bespaar jezelf de woede en reset alles! Deze zou je op weg moeten helpen.

html, body, div, span, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, adres, big, citeren, code, img, ins, kbd, q, s, samp, small, strike, strong, dl, dt, dd, ol, ul, li, fieldset, vorm, label, legenda, tabel, bijschrift, tbody, tfoot, thead, tr, th, td margin: 0; opvulling: 0; rand: 0; overzicht: 0; tekengrootte: 100%; vertical-align: basislijn; achtergrond: transparant;  body line-height: 1;  ol, ul lijststijl: geen;  blockquote, q quotes: none;  blockquote: before, blockquote: after, q: before, q: after content: "; content: none; table border-collapse: collapse; border-spacing: 0;

28: Line 'em Up!

Over het algemeen moet je ernaar streven om je elementen zo goed mogelijk in lijn te brengen. Bekijk je favoriete ontwerpen. Is het je opgevallen hoe elke kop, elk pictogram, elke alinea en elk logo op een andere plek op de pagina staat? Dit niet doen is een van de grootste tekenen van een beginner. Zie het op deze manier: als ik vraag waarom je een element op die plek hebt geplaatst, zou je me een exacte reden moeten kunnen geven.

29: snij een PSD

Oké, je hebt dus een goed begrip van HTML, CSS en Photoshop. De volgende stap is om uw eerste PSD om te zetten in een werkende website. Maak je geen zorgen; het is niet zo moeilijk als je zou denken. Ik kan geen betere manier bedenken om je vaardigheden op de proef te stellen. Als je hulp nodig hebt, bekijk dan deze diepgaande videozelfstudies die je precies laten zien hoe je de klus kunt klaren.

Snijd en dobbel die PSD
Van PSD naar HTML / CSS

30: Gebruik geen kader ... Toch

Kaders, of ze nu voor Javascript of CSS zijn, zijn fantastisch; maar gebruik ze alsjeblieft niet als je voor het eerst begint. Hoewel kan worden aangevoerd dat jQuery en Javascript gelijktijdig kunnen worden geleerd, kan hetzelfde niet worden gedaan voor CSS. Ik heb persoonlijk het 960 CSS Framework gepromoot en het vaak gebruikt. Dat gezegd hebbende, als je nog steeds bezig bent met het leren van CSS - wat het eerste jaar betekent - maak je jezelf alleen maar meer verward als je er een gebruikt.

CSS-frameworks zijn voor ervaren ontwikkelaars die zichzelf een beetje tijd willen besparen. Ze zijn niet voor beginners.

Volg ons op Twitter, of abonneer je op de NETTUTS RSS-feed voor meer dagelijkse webontwikkelingen, tuts en artikelen.

Code