De HTML Essentials Cheat Sheet: Tags, attributen en meer

Het bouwen van webpagina's begint met HTML. Ze verfraaien en interactief maken komt later. Maar om te beginnen met het maken van functionele statische websites, heb je kennis van HTML nodig. (Wilt u een snelle introductie tot deze opmaaktaal? Lees onze HTML-Veelgestelde vragen.)

Als onderdeel van het leren van de taal is er een lange lijst met elementen die u aan uw HTML-vocabulaire moet toevoegen. En deze taak kan in eerste instantie ontmoedigend lijken, daarom hebben we de volgende spiekbrief bedacht. Het geeft je een gemakkelijke manier om HTML-elementen te ontdekken/begrijpen/oproepen wanneer je ze nodig hebt.

De spiekbrief bevat tags en attributen voor het structureren van webpagina's, het opmaken van tekst, het toevoegen van formulieren, afbeeldingen, lijsten, links en tabellen. Het bevat ook tags die zijn geïntroduceerd in HTML5 en HTML-codes voor veelgebruikte speciale tekens.

GRATIS DOWNLOAD: Deze spiekbrief is beschikbaar als een downloadbare pdf van onze distributiepartner, TradePub. U moet een kort formulier invullen om het alleen voor de eerste keer te openen. Downloaden

De HTML Essentials Cheatsheet.

De HTML Essentials Cheatsheet

... ... ... ... ...

...

Snelkoppeling	Actie
Basistags
...	De eerste en laatste tag van een HTML-document. Alle andere tags liggen tussen deze openings- en sluitingstags.
...	Specificeert de verzameling metagegevens voor het document.
	Beschrijft de titel van de pagina en wordt weergegeven in de titelbalk van de browser.
...	Bevat alle inhoud die op de webpagina wordt weergegeven.
Documentinformatie
Vermeldt de basis-URL en alle relatieve links naar het document.
Voor extra informatie over de pagina zoals auteur, publicatiedatum, etc.
Links naar externe elementen zoals stylesheets.
	Bevat informatie over documentstijlen zoals CSS (Cascading Style Sheets).
	Bevat links naar externe scripts.
Tekstopmaak
... OF ...	Maakt tekst vet.
...	Tekst cursief en vet gemaakt.
...	Tekst cursief, maar niet vet.
...	Doorgestreepte tekst.
...	Noemt een auteur van een citaat.
...	Labelt een verwijderd gedeelte van een tekst.
...	Toont een sectie die in de inhoud is ingevoegd.
...	Voor het weergeven van offertes. Vaak gebruikt met de label.
...	Voor kortere offertes.
...	Voor afkortingen en volledige vormen.
...	Specificeert contactgegevens.
...	Voor definities.
...	Voor codefragmenten.
...	Voor het schrijven van abonnementen
...	Voor het schrijven van superscripts.
...	Voor het verkleinen van de tekstgrootte en het markeren van overbodige informatie in HTML5.
Documentstructuur
...	Verschillende niveaus van koppen. H1 is de grootste en H6 is de kleinste.
...	Voor het opdelen van inhoud in blokken.
...	Bevat inline-elementen, zoals een afbeelding, pictogram, emoticon, zonder de opmaak van de pagina te verpesten.
...	Bevat platte tekst.
	Creëert een nieuwe regel.
	Tekent een horizontale balk om het einde van de sectie weer te geven.
Lijsten
...	Voor geordende lijst van items.
...	Voor ongeordende lijst met items.
...	Voor afzonderlijke items in een lijst.
...	Lijst met items met definities.
...	De definitie van een enkele term in lijn met de inhoud van de hoofdtekst.
...	De beschrijving voor de gedefinieerde term.
Links
...	Ankertag voor hyperlinks.
...	Tag om te linken naar e-mailadressen.
...	Ankertag voor het weergeven van contactnummers.
...	Ankertag om te linken naar een ander deel van dezelfde pagina.
...	Navigeert naar een div-gedeelte van de webpagina. (Variatie van de bovenstaande tag)
Afbeeldingen
	Voor het weergeven van afbeeldingsbestanden.
Attributen voor de label
src="url"	Link naar het bronpad van de afbeelding.
alt="tekst"	De tekst die wordt weergegeven wanneer een muis over de afbeelding wordt gehouden.
hoogte=" "	Afbeeldingshoogte in pixels of percentages.
breedte=" "	Afbeeldingsbreedte in pixels of percentages.
uitlijnen=" "	Relatieve uitlijning van de afbeelding op de pagina.
grens=" "	Randdikte van de afbeelding.
	Link naar een aanklikbare kaart.
	Naam van de kaartafbeelding.
Het afbeeldingsgebied van een afbeeldingskaart.
Attributen voor de label
vorm=" "	Vorm van het afbeeldingsgebied.
coördinaten =” ”	Coördinaten van het kaartbeeldgebied.
Formulieren
...	De bovenliggende tag voor een HTML-formulier.
Attributen voor de label
actie = "url"	De URL waar formuliergegevens worden ingediend.
methode=" "	Specificeert het protocol voor het indienen van formulieren (POST of GET).
enctype=" "	Het gegevenscoderingsschema voor POST-inzendingen.
automatisch aanvullen	Geeft aan of automatisch aanvullen van formulieren is in- of uitgeschakeld.
niet valideren	Geeft aan of het formulier moet worden gevalideerd voordat het wordt verzonden.
accept-charsets	Specificeert tekencodering voor formulierinzendingen.
doelwit	Toont waar de reactie op het indienen van het formulier wordt weergegeven.
...	Groepeert gerelateerde elementen in de vorm/
...	Specificeert wat de gebruiker in elk formulierveld moet invoeren.
...	Een bijschrift voor het fieldset-element.
Specificeert welk type invoer van de gebruiker moet worden overgenomen.
Attributen voor de label
typ =””	Bepaalt het type invoer (tekst, datums, wachtwoord).
naam=""	Specificeert de naam van het invoerveld.
waarde=""	Specificeert de waarde in het invoerveld.
maat=""	Stelt het aantal tekens voor het invoerveld in.
maxlengte=""	Stelt de limiet van toegestane invoertekens in.
verplicht	Maakt een invoerveld verplicht.
breedte=""	Stelt de breedte van het invoerveld in pixels in.
hoogte=""	Stelt de hoogte van het invoerveld in pixels in.
tijdelijke aanduiding=""	Beschrijft de verwachte veldwaarde.
patroon=""	Specificeert een reguliere expressie die kan worden gebruikt om patronen in de tekst van de gebruiker te zoeken.
min =””	De minimaal toegestane waarde voor een invoerelement.
max=""	De maximaal toegestane waarde voor een invoerelement.
gehandicapt	Schakelt het invoerelement uit.
...	Voor het vastleggen van langere gegevensreeksen van de gebruiker.
...	Specificeert een lijst met opties waaruit de gebruiker kan kiezen.
Attributen voor de label
naam=""	Specificeert de naam voor een vervolgkeuzelijst.
maat=""	Aantal opties gegeven aan de gebruiker.
meerdere	Stelt in of de gebruiker meerdere opties uit de lijst kan kiezen.
verplicht	Geeft aan of het kiezen van een optie(s) nodig is voor het indienen van formulieren.
autofocus	Specificeert dat een vervolgkeuzelijst automatisch in beeld komt nadat een pagina is geladen.
...	Definieert items in een vervolgkeuzelijst.
waarde=""	Toont de tekst voor een bepaalde optie.
geselecteerd	Stelt de standaardoptie in die wordt weergegeven.
...	Tag voor het maken van een knop voor het indienen van formulieren.
Objecten en iFrames
	Beschrijft het ingesloten bestandstype.
Attributen voor de
hoogte=""	De hoogte van het voorwerp.
breedte=""	De breedte van het object.
typ =””	Het type media dat het object bevat.
	Een inline frame voor het inbedden van externe informatie.
naam=""	De naam van het iFrame.
src=""	De bron-URL voor de inhoud binnen het frame.
srcdoc=""	De HTML-inhoud binnen het frame.
hoogte=""	De hoogte van het iFrame.
breedte=" "	De breedte van het iFrame.
Voegt extra parameters toe om het iFrame aan te passen.
...	Sluit een externe applicatie of plug-in in.
Attributen voor de
hoogte=" "	Stelt de hoogte van de insluiting in.
breedte=" "	Stelt de breedte van de insluiting in.
typ =””	Het type of formaat van de insluiting.
src=""	Het bronpad van het ingesloten bestand.
Tafels
...	Definieert alle inhoud voor een tabel.
Een beschrijving van de tafel.
Kopteksten voor elke kolom in de tabel.
Definieert de hoofdtekstgegevens voor de tabel.
Beschrijft de inhoud voor de voettekst van de tabel.
Inhoud voor een enkele rij.
	...	De gegevens in één kopitem.
	...	Inhoud binnen één tabelcel.
Groepeert kolommen voor opmaak.
Een enkele kolom met informatie.
HTML5 nieuwe tags
...	Specificeert de koptekst van de webpagina.
	Specificeert de voettekst van de webpagina.
...	Markeert de hoofdinhoud van de webpagina.
...	Specificeert een artikel.
	Specificeert zijbalkinhoud van een pagina.
...	Specificeert een bepaalde sectie op de webpagina.
...	Voor het beschrijven van extra informatie.
...	Gebruikt als kop voor de bovenstaande tag. Is altijd zichtbaar voor de gebruiker.
...	Creëert een dialoogvenster.
...	Gebruikt voor het opnemen van grafieken en figuren.
	beschrijft een element.
...	Markeert een specifiek deel van de tekst.
	Set navigatielinks op een webpagina.
...	Een bepaald item uit een lijst of een menu.
...	Meet gegevens binnen een bepaald bereik.
...	Plaatst een voortgangsbalk en houdt de voortgang bij.
...	Geeft tekst weer die geen Ruby-annotaties ondersteunt.
...	Geeft typografische karakterdetails in Oost-Azië weer.
...	Een Ruby-annotatie voor Oost-Aziatische typografie.
...	Identificeert tijd en datum.
Een regeleinde binnen de inhoud.
¹HTML5-tekenobjecten
" OF "	Aanhalingstekens
< OF <	Kleiner dan teken (
> OF &gt ;	Groter dan teken (>)
OF	Vaste ruimte
© OR &kopieer ;	symbool van auteursrecht
™ OF &ucirc ;	handelsmerk symbool
@ OF &Uuml ;	"at"-symbool (@)
& OF &	Ampersand-symbool (&)
• OF &ouml ;	kleine kogel
¹Negeer de spatie vóór de puntkomma tijdens het typen van HTML-tekens.

Bouw een website voor praktische ervaring

Als je het eenmaal hebt begrepen de basis van HTML-code en een praktische kennis van CSS en JavaScript hebben, probeer eens een website te bouwen Een website maken: voor beginnersVandaag begeleid ik je door het proces van het maken van een complete website vanaf het begin. Maak je geen zorgen als dit moeilijk klinkt. Ik zal je er bij elke stap doorheen leiden. Lees verder . Bewaar ook zeker onze Cheatsheet voor CSS3-eigenschappen De essentiële CSS3-eigenschappen CheatsheetBeheers essentiële CSS-syntaxis met onze cheatsheet voor CSS3-eigenschappen. Lees verder en JavaScript-spiekbriefje Het ultieme JavaScript-spiekbriefjeKrijg een snelle opfriscursus over JavaScript-elementen met deze spiekbrief. Lees verder voor toekomstig gebruik!