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.

Krijg kleurenschema's gegenereerd op basis van stockfoto's met ColorPalettes.net

Krijg kleurenschema's gegenereerd op basis van stockfoto's met ColorPalettes.net

Pro fotografie heeft de beste kleuren omdat ze recht uit het leven worden getrokken. Maar het kleurenschema van een foto vertaalt zich niet zonder moeite in een interface .Dat is waar ColorPalettes.net kan helpen. Het is een gratis kleurenresource die paletten organiseert op basis van stockfoto's

(Technische en ontwerptips)

Wil je MacOS Touch Bar van een iPad uitproberen?  Hier is hoe.

Wil je MacOS Touch Bar van een iPad uitproberen? Hier is hoe.

Wil je de Touch Bar uitproberen zonder een nieuwe MacBook Pro op te halen? Je hebt geluk. Er is daar een iPad-hack beschikbaar waarmee je de Touch Bar kunt uitproberen.Je hebt 2 dingen nodig:iPad met Xcode geïnstalleerd, enMac bijgewerkt om macOS Sierra build versie 10.12.1.16B2657 uit te voerenZodra je beide apparaten klaar hebt, ga je naar de Github-pagina van de Touch Bar Demo-app en download je de app naar je Mac.

(Technische en ontwerptips)