Koppen zijn gebruikelijk op de meeste webpagina's. In feite heeft vrijwel elk tekstdocument de neiging om ten minste één kop te hebben, zodat u de titel weet van wat u leest. Deze koppen zijn gecodeerd met de HTML kopelementen — h1, h2, h3, h4, h5 en h6.
Op sommige sites kan het zijn dat koppen gecodeerd zijn zonder deze elementen te gebruiken. In plaats daarvan kunnen koppen alinea's gebruiken waaraan specifieke klassekenmerken zijn toegevoegd, of onderverdelingen met klasse-elementen. De reden dat we vaak over deze onjuiste praktijk horen, is dat de ontwerper "niet houdt van de manier waarop koppen eruitzien". Standaard worden koppen vetgedrukt weergegeven en zijn ze groter van formaat, vooral de h1- en h2-elementen die in een veel grotere lettergrootte worden weergegeven dan de rest van de tekst van een pagina. Houd er rekening mee dat dit alleen het standaard uiterlijk van deze elementen is! Met CSS, u kunt de kop er uit laten zien zoals u wilt! U kunt de lettergrootte wijzigen, vetgedrukt verwijderen en nog veel meer. Koppen zijn de juiste manier om de koppen van een pagina te coderen. Hier zijn enkele redenen waarom.
Waarom koptags gebruiken in plaats van divisies
Dit is de beste reden om koppen te gebruiken en ze in de juiste volgorde te gebruiken (bijv. h1, dan h2, dan h3, enz.). Zoekmachines geef de hoogste weging aan tekst die is opgenomen in koptags omdat er een semantische waarde aan die tekst is. Met andere woorden, door uw paginatitel H1 te labelen, vertelt u de spider van de zoekmachine dat dat de #1 focus van de pagina is. H2-koppen hebben de nadruk op #2, enzovoort.
U hoeft niet te onthouden welke klassen u hebt gebruikt om uw koppen te definiëren
Als je weet dat al je webpagina's een H1 zullen hebben die vet, 2em en geel is, dan kun je dat één keer in je stylesheet definiëren en klaar zijn. 6 maanden later, wanneer je een andere pagina toevoegt, voeg je gewoon een H1-tag toe aan de bovenkant van je pagina, je hebt geen om terug te gaan naar andere pagina's om erachter te komen welke stijl-ID of klasse u hebt gebruikt om de hoofdkop en subkoppen te definiëren.
Zorg voor een sterk paginaoverzicht
Contouren maken tekst beter leesbaar. Dat is de reden waarom de meeste Amerikaanse scholen studenten leerden een schets te schrijven voordat ze het papier schrijven. Wanneer je koptags in een overzichtsformaat gebruikt, heeft je tekst een duidelijke structuur die heel snel duidelijk wordt. Bovendien zijn er tools die het paginaoverzicht kunnen bekijken om een samenvatting te geven, en deze zijn afhankelijk van koptags voor de overzichtsstructuur.
Uw pagina zal zinvol zijn, zelfs als de stijlen zijn uitgeschakeld
Niet iedereen kan stylesheets bekijken of gebruiken (en dit komt terug op #1 - zoekmachines bekijken de inhoud (tekst) van uw pagina, niet de stylesheets). Als u koptags gebruikt, maakt u uw pagina's toegankelijker omdat de koppen informatie bieden die DIV-tag zou niet.
Het is handig voor schermlezers en toegankelijkheid van websites
Correct gebruik van koppen creëert een logische structuur voor een document. Dit is wat schermlezers gebruiken om een site te "lezen" aan een gebruiker met een visuele beperking, waardoor uw site toegankelijk wordt voor mensen met een handicap.
Stijl de tekst en het lettertype van uw koppen
De gemakkelijkste manier om af te stappen van het "grote, vette en lelijke" probleem van koptags, is door de tekst op te maken zoals u wilt dat ze eruitzien. Als u aan een nieuwe website werkt, is het zelfs het beste om de alinea-, h1-, h2- en h3-stijlen als eerste te schrijven. Blijf bij alleen de lettertypefamilie en grootte/gewicht. Dit kan bijvoorbeeld een voorlopige stylesheet zijn voor een nieuwe site (dit zijn slechts enkele voorbeeldstijlen die kunnen worden gebruikt):
U kunt de lettertypen van uw kop of verander de tekststijl of zelfs de tekstkleur. Al deze dingen zullen uw "lelijke" kop veranderen in iets levendiger en in overeenstemming met uw ontwerp.
Grenzen kunnen koppen aankleden
Randen zijn een geweldige manier om uw koppen te verbeteren en zijn eenvoudig toe te voegen. Maar vergeet niet te experimenteren met de randen - u hebt geen rand aan elke kant van uw kop nodig. En je kunt meer gebruiken dan alleen saaie randen.
We hebben een boven- en onderrand toegevoegd aan onze voorbeeldkop om enkele interessante visuele stijlen te introduceren. U kunt randen toevoegen op elke manier die u wilt om de gewenste ontwerpstijl te bereiken.
Voeg achtergrondafbeeldingen toe aan uw koppen voor nog meer pit
Veel websites hebben een koptekst boven aan de pagina met een kop, meestal de titel van de site en een afbeelding. De meeste ontwerpers beschouwen dit als twee afzonderlijke elementen, maar dat hoeft niet. Als de afbeelding er alleen is om de kop te versieren, waarom zou u deze dan niet toevoegen aan de kopstijlen?
De truc van deze kop is dat we weten dat onze afbeelding 90 pixels hoog is. Dus hebben we opvulling toegevoegd aan de onderkant van de kop van 90px (opvulling: 0,5 0 90px 0p ;). Je kunt spelen met de marges, regelhoogte en opvulling om de tekst van de kop precies daar weer te geven waar je hem wilt hebben.
Een ding om te onthouden bij het gebruik van afbeeldingen is dat als je een responsieve website (wat u zou moeten doen) met een lay-out die verandert op basis van schermformaten en apparaten, zal uw kop niet altijd dezelfde grootte hebben. Als u een exacte grootte van uw kop nodig heeft, kan dit problemen veroorzaken. Het is een van de redenen waarom we over het algemeen achtergrondafbeeldingen in een kop vermijden, hoe cool ze er soms ook uitzien.
Afbeelding vervangen in koppen
Dit is een andere populaire techniek voor webontwerpers, omdat je hiermee een grafische kop kunt maken en de tekst van de koptekst kunt vervangen door die afbeelding. Dit is naar waarheid een ouderwetse praktijk van webontwerpers, die toegang hadden tot heel weinig lettertypen en meer exotische lettertypen in hun werk wilden gebruiken. De opkomst van weblettertypen heeft de manier waarop ontwerpers sites benaderen echt veranderd. Koppen kunnen nu worden ingesteld in een breed scala aan lettertypen en afbeeldingen waarin deze lettertypen zijn ingesloten, zijn niet langer nodig. Als zodanig vindt u alleen CSS-afbeeldingen ter vervanging van koppen op oudere sites die nog niet zijn bijgewerkt naar modernere praktijken.
Bewerkt door Jeremy Girard