Koppen zijn gebruikelijk op de meeste webpagina's. In feite heeft vrijwel elk tekstdocument de neiging om minstens één kop te hebben, zodat u de titel weet van wat u leest. Deze koppen zijn gecodeerd met behulp van de HTML-headingelementen - h1, h2, h3, h4, h5 en h6.
Op sommige sites kunt u merken dat de koppen zijn gecodeerd zonder deze elementen te gebruiken. In plaats daarvan kunnen koppen alinea's gebruiken waaraan specifieke klassenattributen zijn toegevoegd, of divisies met klasse-elementen. De reden dat ik vaak over deze onjuiste praktijk hoor, is dat de ontwerper "niet houdt van de manier waarop koppen eruit zien". Kopjes worden standaard vetgedrukt weergegeven en hebben een groter formaat, met name de elementen h1 en h2, die een veel grotere lettergrootte hebben 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 kun je de kop er uit laten zien zoals jij dat wilt! U kunt de lettergrootte wijzigen, de vetgedrukte tekst 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 DIV's en styling
Zoekmachines zoals koptags
Dit is de beste reden om koppen te gebruiken en ze in de juiste volgorde te gebruiken (bijv. H1, dan h2, dan h3, etc.). Zoekmachines geven de hoogste weging aan de tekst die is opgenomen in headingtags, omdat er een semantische waarde is voor die tekst. 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 # 2 nadruk, enzovoort.
U hoeft niet te onthouden welke klassen u gebruikte om uw koppen te definiëren
Wanneer u weet dat al uw webpagina's een H1 hebben die vet, 2em en geel is, kunt u dat eenmaal in uw stylesheet definiëren en klaar zijn. 6 maanden later, wanneer je een nieuwe pagina toevoegt, voeg je gewoon een H1-tag toe aan de bovenkant van je pagina, hoef je niet terug te gaan naar andere pagina's om te achterhalen welk stijl-ID of welke klasse je hebt gebruikt om de hoofdpagina te definiëren kop en sub-hoofden.
Ze bieden een krachtig pagina-overzicht
Contouren maken tekst leesbaarder. Daarom leerden de meeste Amerikaanse scholen studenten om een schets te schrijven voordat ze de krant schrijven. Wanneer u heading-tags in een outline-indeling gebruikt, heeft uw tekst een duidelijke structuur die zeer snel duidelijk wordt. Bovendien zijn er hulpprogramma's die het overzicht van de pagina kunnen herzien om een synopsis te bieden, en deze zijn afhankelijk van koptags voor de overzichtsstructuur.
Uw pagina zal zin krijgen, 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 bevatten die een DIV-tag niet zou bevatten.
Het is nuttig voor schermlezers en toegankelijkheid van websites
Correct gebruik van rubrieken creëert een logische structuur voor een document. Dit is wat schermlezers zullen gebruiken om een site te "lezen" voor een gebruiker met een visuele beperking, waardoor uw site toegankelijk is voor mensen met een handicap.
Stijl de tekst en het lettertype van uw koppen
De gemakkelijkste manier om weg te gaan van het 'grote, krachtige en lelijke' probleem van koerslabels, is door de tekst op de gewenste manier op te maken. Als u aan een nieuwe website werkt, kunt u het beste eerst de alinea-, h1-, h2- en h3-stijlen schrijven. Blijf bij de lettertypefamilie en de grootte / het gewicht. Dit kan bijvoorbeeld een voorlopige stylesheet voor een nieuwe site zijn (dit zijn slechts enkele voorbeeldstijlen die kunnen worden gebruikt):
U kunt de lettertypen van uw kop wijzigen of de tekststijl of zelfs de tekstkleur wijzigen. Al deze zullen uw "lelijke" kop veranderen in iets levendiger en in overeenstemming met uw ontwerp.
Grenzen kunnen de koppen aankleden
Grenzen zijn een geweldige manier om uw koppen te verbeteren en zijn eenvoudig toe te voegen. Maar vergeet niet om te experimenteren met de randen - je hebt geen rand nodig aan elke kant van je kop. En je kunt meer gebruiken dan alleen saaie randen.
Ik heb een boven- en onderrand toegevoegd aan mijn voorbeeldkop om interessante visuele stijlen te introduceren. U kunt randen toevoegen op elke manier die u wilde om de gewenste ontwerpstijl te bereiken.
Voeg achtergrondafbeeldingen toe aan uw koppen voor nog meer Pizazz
Veel websites hebben een koptekstgedeelte bovenaan de pagina met een kop - meestal de sitetitel 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 dan niet toevoegen aan de kopstijlen?
De truc van deze kop is dat ik weet dat mijn afbeelding 90 pixels lang is. Dus voegde ik padding toe aan de onderkant van de kop van 90px (opvulling: 0,5 0 90px 0p;). Je kunt spelen met de marges, lijnhoogte en opvulling om de tekst van de kop precies weer te geven waar je hem wilt hebben.
Een ding om te onthouden bij het gebruik van afbeeldingen is dat als u een responsieve website heeft (wat u zou moeten doen) met een lay-out die verandert op basis van schermafmetingen en apparaten, uw kop niet altijd even groot zal zijn. Als u wilt dat uw kop een exacte grootte heeft, kan dit problemen veroorzaken. Het is een van de redenen waarom ik achtergrondafbeeldingen meestal in een kop vermijd, zo cool als ze soms kunnen lijken.
Beeldvervanging in koppen
Dit is een andere populaire techniek voor webontwerpers, omdat u hiermee een grafische kop kunt maken en de tekst van de koptag kunt vervangen door die afbeelding.Dit is waarlijk een verouderde praktijk van webontwerpers, die toegang hadden tot heel weinig lettertypen en meer exotische lettertypen wilden gebruiken in hun werk. De opkomst van weblettertypen heeft de manier veranderd waarop ontwerpers sites benaderen. Koppen kunnen nu worden ingesteld in een grote verscheidenheid aan lettertypen en afbeeldingen waarvan de ingesloten lettertypen niet langer nodig zijn. Als zodanig zult u alleen CSS-afbeeldingen vinden die worden vervangen door koppen op oudere sites die nog niet zijn bijgewerkt naar modernere werkwijzen.
Bewerkt door Jeremy Girard op 9/6/17
