HTML- en CSS-cheatsheet: doorzoekbaar, printbaar, met demo's | We.Inc
Doorzoek alle gangbare HTML-tags en CSS-eigenschappen op één sheet: semantische layout, tekst, formulieren, media, selectors, units, layout en visuele stijl, met kleine live demo's en een printvriendelijke layout.
HTML- en CSS-cheatsheet
Deze sheet toont de HTML-tags en CSS-eigenschappen die op bijna elke website worden gebruikt, gegroepeerd per taak: documentopzet, semantische layout, tekst, lijsten, media, formulieren, selectors, units, layout en visuele stijl. Typ in het filter om er een te vinden, open een kleine demo om hem in actie te zien of druk op Printen voor een nette papieren versie.
Wat er in de sheet staat
Onderdeel
Items
HTML
CSS
Met een live demo
Filter op trefwoord of wissel tussen HTML en CSS, en de lijst wordt korter terwijl u typt. Items met een demo openen een kleine voorbeeldweergave in een sandbox. De printlayout verbergt de bediening en houdt de tabel van elke groep bij elkaar op de pagina.
Typ een tag, eigenschap of taak in het filtervak, bijvoorbeeld table, sticky of email.
Beperk tot HTML of CSS met de knoppen, of laat beide aan.
Druk bij een item op Demo tonen om het weergegeven te zien, en op Kopiëren om de syntax te pakken.
Druk op Printen voor een papieren of PDF-versie zonder de opmaak van de pagina.
Kies een semantisch element vóór een div. header, nav, main en footer geven schermlezers gratis landmarks.
Elk formulierveld heeft een label nodig. Placeholdertekst verdwijnt terwijl mensen typen en is geen vervanging.
Begin elk stylesheet met box-sizing: border-box op alles. Breedtes betekenen dan wat u verwacht.
Gebruik rem voor lettergroottes en afstanden die de tekstinstelling van de lezer moeten volgen, en px voor haarlijnranden.
Veelgestelde vragen
Hoeveel HTML-tags zijn er?
De HTML Living Standard definieert ruim meer dan honderd elementen, maar gewone pagina's gebruiken er een paar dozijn. Deze sheet behandelt de elementen die u op bijna elke site tegenkomt; MDN houdt de volledige naslag van elementen bij.
Wat is het verschil tussen een tag en een element?
Een tag is de markup die u typt, zoals <p> of </p>. Een element is het geheel dat de browser ervan bouwt: de starttag, de inhoud en de eindtag. Void elements zoals <img> en <br> hebben helemaal geen eindtag.
Kan ik deze cheatsheet printen?
Ja. De knop Printen opent het printvenster van uw browser met een layout die het filter, de knoppen en de demo's weglaat en de syntaxtabellen behoudt. Kies Opslaan als PDF om een digitale kopie te bewaren.
Moet ik eerst CSS leren of een framework zoals Tailwind?
Leer eerst de CSS-eigenschappen. Utility-frameworks zijn een verkorte schrijfwijze ervan, dus als u weet dat p-4 padding: 1rem betekent, wordt het framework makkelijker, en debuggen in de developer tools toont altijd de onderliggende CSS.
Hoe HTML en CSS het werk verdelen
HTML zegt wat elk stuk inhoud is: een kop, een lijst, een formulierveld, een navigatieblok. CSS zegt hoe het eruitziet en waar het staat. Door ze gescheiden te houden kan één stylesheet honderden pagina's restylen en blijft de markup leesbaar voor zoekmachines en hulptechnologie.
Twijfelt u welk element u moet gebruiken, vraag dan hoe de inhoud in een gedrukt document zou heten. Een lijst stappen is een ol, een reeks feiten is een dl of een table, een notitie in de kantlijn is een aside.
CSS-regels lezen
Een regel is een selector, gevolgd door accolades met paren van eigenschap en waarde, gescheiden door puntkomma's. Richten twee regels zich op hetzelfde element, dan wint de specifiekere selector; zijn ze gelijk, dan wint de regel die later in het stylesheet staat.
Alles samen in één kleine pagina
Semantische markup plus een paar regels CSS
Een header, hoofdinhoud met een formulier en een footer, gestyled met een handvol eigenschappen uit de sheet.
Eerste regel van elke pagina; zet standards mode aan
Root-element; lang stelt de taal van de pagina in
Metadata, titel, links naar CSS en scripts
Tekenset, viewport, beschrijving en social tags
Koppelt stylesheets, iconen en preloads
Laadt JavaScript; defer voert het uit na het parsen
Intro of bovenbalk van een pagina of sectie
Een blok met de belangrijkste navigatielinks
De unieke hoofdinhoud; één per pagina
Een thematische groep inhoud, meestal met een kop
Op zichzelf staande inhoud, zoals een bericht of productkaart
Gerelateerde maar bijkomende inhoud, zoals een zijbalk
Afsluitende info: contact, juridisch, links
Native uitklapwidget, geen script nodig
Een modaal of niet-modaal dialoogvenster
Koppen in volgorde; één h1 per pagina is de norm
Een alinea
Sterke nadruk en accent, standaard vet en cursief
Gemarkeerde tekst
Inline code en voorgeformatteerde blokken
Een langer citaat
Afkorting met de voluit geschreven vorm
Een machineleesbare datum of tijd
Regeleinde binnen tekst; thematische scheiding tussen blokken
Ongeordende en geordende lijsten
Beschrijvingslijst met paren van naam en waarde
Tabelgegevens met bijschrift, kop en body
Kopcel; scope koppelt hem aan zijn kolom of rij
Een link; voeg target en rel toe voor nieuwe tabbladen
Een afbeelding; alt, width en height worden verwacht
Art direction en terugvalformaten
Op zichzelf staande media met een bijschrift
Ingesloten video
Sluit een andere pagina in
Inline vectorafbeeldingen
Omvat invoervelden en verzendt ze
Geeft een veld een naam; erop klikken geeft het veld focus
Tekst, e-mail, getal, datum, checkbox, keuzerondje en meer
Keuzelijst
Tekstinvoer over meerdere regels
Een knop; stel type in om onbedoeld verzenden te voorkomen
Groepeert verwante velden onder een bijschrift
Ingebouwde controles vóór het verzenden
Selectors voor elementnaam, class en ID
Elke diepte versus alleen directe kinderen
Volgende sibling, of elke latere sibling
Matcht op aanwezigheid of waarde van een attribuut
Toestanden voor aanwijzer erboven en toetsenbordfocus
Kiest items op positie
Parent matchen en selectors groeperen
Gegenereerde inhoud vóór of na een element
Absolute CSS-pixel
Relatief aan de lettergrootte van de root / aan de lettergrootte van het element
Relatief aan de parent (welke dimensie hangt af van de eigenschap)
Viewport-units; dvh houdt rekening met mobiele werkbalken
Breedte van het teken 0, handig voor regellengte
Deel van de vrije ruimte in een grid
Vloeiende waarde tussen een minimum en maximum
Breedte inclusief padding en rand
Ruimte buiten en binnen de rand
Hoe de box deelneemt aan de layout
Eendimensionale rijen of kolommen
Tweedimensionale rijen en kolommen
Haalt een box uit de normale flow of zet hem erin vast
Stapelvolgorde van gepositioneerde elementen
Wat er gebeurt met inhoud die niet past
Stijlen voor een schermgrootte of voorkeur
Tekstkleur en achtergrond
Dikte, grootte, regelhoogte en familie op één regel
Rand en afgeronde hoeken
Schaduw rond de box
Transparantie van het hele element
Verplaatsen, draaien, schalen of scheeftrekken zonder de layout te beïnvloeden