Een kijkje in goede HTML5-semantiek
Als je de structuur van je HTML-documenten zorgvuldig plant, kun je dat help computers betekenis te geven aan uw inhoud. Een goede syntaxis is zeker belangrijk, maar biedt in feite alleen parsers, zoekmachines en ondersteunende techologieën met een betekenisloze hoeveelheid gegevens.
Als u uw front-endworkflow verbetert door aandacht te besteden aan semantiek, kunt u inhoud van hogere kwaliteit maken die meer bezoekers trekt. Semantics is de studie van betekenis, in een bredere context is dat zo een tak van logica en taalkunde.
In de wereld van webontwikkeling praten we over semantische inhoud wanneer computers de structuur van een document begrijpen, en de rollen van de elementen erin. Als we de juiste semantiek willen creëren, moeten we dat diepgaand doen begrijp de structuur van onze inhoud en de mogelijkheden van frontend-technologieën.
Dus wat zijn de tastbare voordelen? Goede semantiek betekent a meer doorzoekbare inhoud dat leidt tot een betere zoekmachine ranking. We vergroten ook de toegankelijkheid, zoals ondersteunende technologieën zoals schermlezers kunnen de betekenis van onze inhoud beter interpreteren.
Er zijn veel verschillende front-end ontwikkelingstechnieken waarmee ontwikkelaars een semantische paginastructuur kunnen realiseren. Dit bericht geeft u een korte introductie van semantische HTML-tags en het concept van de documentomtrek.
Semantische en niet-semantische HTML-tags
Het concept van semantiek is niet zo nieuw als het lijkt, het bestond al lang vóór het tijdperk van HTML5. De term semantisch web werd al in 2001 bedacht door Sir Tim Berners-Lee. Onder “semantisch web” hij bedoelde een web van gegevens dat door machines kan worden verwerkt.
Dit betekent in de eerste plaats dat afzonderlijke HTML-elementen moeten hun onderscheiden structurele rollen hebben. Volgens de definitie van W3C “een semantisch element beschrijft duidelijk de betekenis ervan voor zowel de browser als de ontwikkelaar”.
Semantische elementen vóór HTML5
Semantische elementen bestonden ook vóór HTML5, maar in de meeste gevallen wisten ontwikkelaars dat niet sommige van de tags die ze gebruikten waren eigenlijk semantisch. Denk maar aan de of de
Hun rollen zijn duidelijk voor ons en de user-agent: bevat gewoon een formulier, net zoals
De
bestelde en ongeordende lijsten, paragrafen, h1-h6 heading tags zijn alle semantische elementen die aan HTML5 voorafgingen.
Niet-semantische elementen
Niet-semantische elementen hebben geen speciale betekenis, de hiërarchische relaties tussen hen zijn slechts illusoir. De meest gebruikte voorbeelden van niet-semantische HTML-tags zijn de en de labels.
Als uw site ooit de vreselijke ziekte van heeft gepakt divitis, je weet waar ik het over heb. Yep. Divs hoeven niet per se fout te zijn, maar divitis moet worden uitgevochten als we een onderhoudbare, modulaire en zinvolle HTML-code willen schrijven.
Smashing Magazine legt mooi uit wat het echte probleem is met het buitensporige en onredelijke gebruik van de Er is geen relatie tussen de twee, net als in het geval van de Raak niet in paniek als je je nog steeds gehecht voelt HTML5 introduceerde veel nieuwe semantische elementen die eenvoudige content-organisatie mogelijk maken. Ze helpen je niet alleen om inhoud te organiseren op het niveau van het hele document (zie details in de volgende sectie), maar ook in tekstblokken, als inline-tags. Waarschijnlijk de meest populaire semantische tags op tekstniveau Zie deze lijst voor alle semantische elementen op tekstniveau die momenteel in gebruik zijn. De documentomtrek is de structuur van een HTML-document. Het laat zien hoe elementen aan elkaar gerelateerd zijn. De documentomtrek is uitsluitend gegenereerd door toewijzingselementen, zoals koppen, tabeltitels, formuliertitels en andere in eerdere versies van HTML, zoals HTML4.01 en XHTML. In HTML5 is het omtrekalgoritme verbeterd door nieuwe sectiekaders, namelijk: Er is een vijfde sectie-element in HTML5, maar het is niet nieuw, het is het Als we een goed gestructureerde documentopmaak willen maken, moeten we aandacht besteden aan de volgende regels: 1. Het buitenste snijelement is altijd de 2. Secties in HTML5 kunnen worden genest. 3. Elke sectie heeft zijn eigen kop hiërarchie. Elk van hen (zelfs de binnenste geneste sectie) kan een 4. Hoewel de documentomtrek primair wordt gedefinieerd door de 5 sectie-elementen, heeft deze ook de juiste koppen nodig voor elke sectie. 5. Het is altijd het eerste headingelement (laat het een h1 of een lager ranglabel zijn) dat de kop van de gegeven sectie definieert. De volgende heading-tags in dezelfde sectie moeten hier relatief aan zijn. (Als de eerste kop een h3 binnen een snijelement is, plaats dan geen h3.) 6. De secties gedefinieerd door de 7. Elke sectie (lichaam, sectie, artikel, opzij, nav) kan zijn eigen hebben Laten we een voorbeeld bekijken voor een semantisch documentoverzicht om duidelijker te zien hoe het werkt. Onze voorbeeldcode zal resulteren in de volgende documentstructuur: En hier is de code met de juiste semantische secties: Hier is ons logo en onze slogan. Lid 1 in eerste deel Lid 2 in eerste deel Lid 1 in tweede deel Paragraaf 2 in het tweede deel Als u het bovenstaande codefragment bekijkt, ziet u dat kopteksten en voetteksten optioneel zijn. We kunnen vrij kiezen of we ze willen gebruiken of niet, maar het is sterk aanbevolen om altijd een kop voor elke sectie op te nemen, anders zal de sectie zijn “Untitled” in de documentomtrek. Gelukkig zijn er overal op het internet veel geweldige tools waarmee we het documentoverzicht kunnen controleren, dit keer gebruiken we de Outliner-tool van html5.org. Als we ons codefragment in het formulier van de outliner invoegen en op de “Geef dit een overzicht!” knop, zullen we het volgende resultaat zien: Dit is de documentoverzicht van onze voorbeeldcode, dit is hoe zoekmachines het zien en schermlezers lezen dit voor gebruikers met een visuele beperking. Het is semantisch, goed gestructureerd en er is geen smerig beeld “Untitled” secties erin. Als u wilt kijken hoe een Untitled-sectie eruit ziet in de Outliner, verwijdert u gewoon enkele van de heading-tags in de voorbeeldcode. Semantische HTML-tags en documentcontouren vormen slechts een klein deel van de websemantiek. De inhoud van een webpagina kan nog betekenisvoller worden gemaakt met behulp van het WAI-ARIA-toegankelijkheidsprotocol en gestructureerde gegevens die kunnen worden gebruikt in combinatie met het RDFa-protocol, microdata of de JSON-LD-markup. tag die op dezelfde manier werkt, alleen op het inlineniveau.-echter, als je hoeft ze niet helemaal te dumpen. Ze zijn nog steeds de beste keuze voor het groeperen van inhoud, alleen voor stylingdoeleinden en in andere gevallen van laatste redmiddel. Tekstsemantiek in HTML5
en , maar ze bestonden ook vóór HTML5. Onder de nieuwe inline semantische elementen kunnen we bijvoorbeeld de , tag voor door mensen leesbare datum-tijden, en voor gemarkeerde tekst.Documentoverzicht in HTML5
voor secties gegroepeerd rond een specifiek thema voor complete of op zichzelf staande composities zoals een blogpost of een widget voor navigatie blokken voor aanvullende inhoud zoals zijbalken. label. De tags zijn ook nieuw, maar ze genereren geen nieuwe secties in een document, ze verdelen de inhoud binnen secties. Dit betekent dat elk snijelement (lichaam, artikel, sectie, nav en opzij) kan zijn eigen kop- en voettekst hebben.Tips voor semantisch gestructureerde inhoud
label.h1 label., en de tags behoren niet tot de hoofdlijnen van het HTML-document, maar worden meestal niet door hulptechnologieën weergegeven. tags, die de kop bepalen (zoals logo, naam van de auteur, datums, meta-info, enz.) en de voettekst (copyright, notities, links, etc.) van die sectie.Voorbeeld: een semantische omtrek
Welkom op onze website!
Titel van artikel
Ondertitel van artikel
Eerste logische gedeelte (bijvoorbeeld 'theorie')
Enkele andere subtitels in eerste deel
Tweede logisch deel (bijvoorbeeld "Oefening")
Andere aspecten van websemantiek
