nl.hideout-lastation.com
Paradijs Voor Ontwerpers En Ontwikkelaars


Een kijkje in goede HTML5-semantiek

Als u de structuur van uw HTML-documenten zorgvuldig plant, kunt u computers helpen betekenis te krijgen voor 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. Semantiek is de studie van betekenis, in een bredere context is het een tak van logica en linguïstiek .

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 de structuur van onze inhoud en de mogelijkheden van frontend-technologieën grondig begrijpen .

Dus wat zijn de tastbare voordelen? Een goede semantiek betekent een meer doorzoekbare inhoud die leidt tot een betere positie in de zoekmachine . We vergroten ook de toegankelijkheid, omdat ondersteunende technologieën zoals schermlezers de betekenis van onze inhoud beter kunnen 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 de semantiek is niet zo nieuw als het lijkt, het bestond al ruim voor het tijdperk van HTML5. De term semantisch web werd al in 2001 bedacht door Sir Tim Berners-Lee. Onder 'semantisch web' bedoelde hij een web van gegevens dat door machines kan worden verwerkt.

Dit betekent in de eerste plaats dat afzonderlijke HTML-elementen hun onderscheiden structurele rollen moeten hebben . Volgens de definitie van W3C "beschrijft een semantisch element 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 niet dat sommige van de tags die ze gebruikten, eigenlijk semantisch waren . Denk maar aan de

of de -tags.

Hun rollen zijn duidelijk voor ons en de user-agent:

bevat gewoon een formulier, net zoals bevat een afbeelding. Niemand zal ooit een tafel of een kop binnen en neerzetten tag (of laten we het hopen).

De

element en de bijbehorende tags, zoals tabelrijen, tabelcellen, enzovoort, zijn ook semantische tags die bestonden vóór HTML5, maar vanwege de op tabellen gebaseerde lay-out die vele jaren intensief werd gebruikt, hebben de meeste ontwikkelaars deze niet gebruikt in de HTML-indeling. semantische manier. Dit leidde tot een web dat logische structuur opofferde voor lay-out .

Bestelde en niet- geordende lijsten, alinea's, h1-h6 koptags zijn alle semantische elementen die voorafgingen aan HTML5.

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 -tags.

Als uw site ooit de vreselijke ziekte van divitis heeft gepakt, weet u waar ik het over heb. Yep. Divs hoeven niet per se fout te zijn, maar divitis moet worden gevochten 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
label. De essentie is dat als we een div in een div opnemen, het lijkt alsof de buitenste div het ouderelement van de innerlijke is, terwijl dit in werkelijkheid niet het geval is .

Er is geen relatie tussen beide, net als bij de tag die op dezelfde manier werkt, alleen op het inlineniveau.

Raak niet in paniek als je je nog steeds gehecht voelt

-s en -s, want 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

HTML5 heeft veel nieuwe semantische elementen geïntroduceerd die eenvoudige contentorganisatie mogelijk maken. Ze helpen je niet alleen om inhoud te organiseren op het niveau van het hele document (zie details in het volgende gedeelte), maar ook in tekstblokken, als inline-tags.

Waarschijnlijk de meest populaire semantische tags op tekstniveau 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 .

Zie deze lijst voor alle semantische elementen op tekstniveau die momenteel in gebruik zijn.

Documentoverzicht in HTML5

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 outlining-algoritme verbeterd door nieuwe segmenteerelementen, namelijk:

  • voor secties gegroepeerd rond een specifiek thema
  • voor complete of op zichzelf staande composities zoals een blogpost of een widget
  • voor navigatieblokken
  • voor aanvullende inhoud zoals zijbalken .

Er is een vijfde sectie-element in HTML5, maar het is niet nieuw, het is het label. De

en
tags zijn ook nieuw, maar ze genereren geen nieuwe secties in een document, ze verdelen de inhoud binnen secties. Dit betekent dat elk snijelement (body, artikel, sectie, nav en opzij) een eigen kop- en voettekst kan hebben .

Tips voor semantisch gestructureerde inhoud

Als we een goed gestructureerde documentopmaak willen maken, moeten we aandacht besteden aan de volgende regels:

1. Het buitenste snijelement is altijd de label.

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 h1 tag hebben.

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 rangmarkering 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 scheidingselement is, plaats dan geen h3.)

6. De secties gedefinieerd door de

, en de tags behoren niet tot de hoofdlijnen van het HTML-document, maar worden meestal niet door hulptechnologieën weergegeven.

7. Elke sectie (lichaam, sectie, artikel, opzij, nav) kan zijn eigen hebben

en
tags, die de kop bepalen (zoals logo, naam van de auteur, datums, meta-info, etc.) en de voettekst (copyright, notities, links, etc.) van die sectie.

Voorbeeld: een semantische omtrek

Laten we een voorbeeld bekijken voor een semantische documentomtrek om duidelijker te zien hoe het werkt. Onze voorbeeldcode zal resulteren in de volgende documentstructuur:

En hier is de code met de juiste semantische sectie:

Welkom op onze website!

Hier is ons logo en onze slogan.

Titel van artikel

Ondertitel van artikel

Eerste logisch deel (bijv. "Theorie")

Lid 1 in eerste deel

Enkele andere onderverdeling in eerste deel

Lid 2 in eerste deel

Tweede logisch deel (bijv. "Oefening")

Lid 1 in tweede deel

Lid 2 in tweede deel

Auteur Bio

Paragraaf in de voettekst van het artikel

  • auteursrechten
  • Social Media Links

Als u het bovenstaande codefragment bekijkt, ziet u dat kop- en voetteksten optioneel zijn. We kunnen vrij kiezen of we ze willen gebruiken of niet, maar we raden u ten zeerste aan altijd een koptekst op te nemen voor elke sectie, anders sectie zal "Untitled" zijn in de documentomtrek.

Gelukkig zijn er overal op het internet veel handige 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 knop "Outline this!" Klikken, zien we het volgende resultaat:

Dit is het 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 bevat geen smerige secties "Zonder titel".

Als u wilt kijken hoe een Untitled-sectie eruit ziet in de Outliner, verwijdert u gewoon enkele van de heading-tags in de voorbeeldcode.

Andere aspecten van websemantiek

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.

8 dingen die u moet weten over Android M

8 dingen die u moet weten over Android M

Android M, de volgende generatie Android is aangekondigd (zij het geen woord over wat M nog zal zijn). Google presenteerde onlangs de Developer Preview van de nieuwste versie van zijn geavanceerde mobiele besturingssysteem in Google I / O 2015. Deze nieuwe versie van Android probeert de fundamenten te verbeteren met grote veranderingen en veel bugfixing

(Technische en ontwerptips)

Creëer zelf-gehoste dribbelportfolio met Dribbbox

Creëer zelf-gehoste dribbelportfolio met Dribbbox

Dribbble is een populaire website om in de ontwerpwereld je WIP-projecten, ontwerpen, mockups en zelfs freebies te delen. Als tegenprestatie krijg je feedback en kritiek van collega-ontwerpers, wat goed is om je ontwerp naar een hoger niveau te tillen.Als u wilt personaliseren hoe u uw portfolio weergeeft, kunt u de shots onder uw eigen domein weergeven

(Technische en ontwerptips)