Wanneer het HTML5 SECTION-element gebruiken?

click fraud protection

De nieuwe HTML5 sectie element kan enigszins verwarrend zijn. Als je eerder HTML-documenten hebt gemaakt dan HTML5, is de kans groot dat je het element al gebruikt om structurele indelingen binnen je pagina's te maken en de pagina's daarmee op te maken. Dus het lijkt misschien normaal om gewoon je bestaande te vervangen DIV elementen met sectie elementen. Maar dit is technisch onjuist.

Het 'sectie'-element is een semantisch element

De SECTIE element is een semantisch element; het geeft betekenis aan zowel gebruikersagenten als mensen over wat de bijgevoegde inhoud is - in het bijzonder een gedeelte van het document.

Dit lijkt misschien een heel algemene beschrijving, en dat is ook zo. Er zijn andere HTML5-elementen die zorgen voor meer semantische onderscheidingen voor uw inhoud die u eerst moet gebruiken voordat u de sectie element:

  • Artikel
  • terzijde
  • navigatie

Wanneer het 'sectie'-element gebruiken?

Gebruik de artikel element wanneer de inhoud een onafhankelijk onderdeel van de site is dat op zichzelf kan staan ​​en kan worden gesyndiceerd als een artikel of blogpost. Gebruik de

instagram viewer
terzijde element wanneer de inhoud tangentieel gerelateerd is aan de inhoud van de pagina of de site zelf, zoals zijbalken, annotaties, voetnoten of bijbehorende site-informatie. Gebruik de nav element voor inhoud die sitenavigatie ondersteunt.

De sectie element is een generiek semantisch element. Gebruik het wanneer geen van de andere semantische containerelementen geschikt is. Het combineert delen van uw document in afzonderlijke eenheden die u op de een of andere manier als verwant kunt omschrijven. Als je de elementen in de sectie niet in een of twee zinnen kunt beschrijven, moet je het element waarschijnlijk niet gebruiken.

In plaats daarvan moet u de gebruiken DIV element. De DIV element in HTML5 is een niet-semantisch containerelement. Als de inhoud die u probeert te combineren geen semantische betekenis heeft, maar u deze toch moet combineren voor styling, dan DIV element is het juiste element om te gebruiken.

Hoe het 'sectie'-element werkt

Een gedeelte van uw document kan worden weergegeven als de buitenste container voor artikelen en terzijde elementen. Het kan ook inhoud bevatten die geen deel uitmaakt van een artikel of terzijde. EEN sectie element is ook te vinden in een artikel, nav, of terzijde. U kunt zelfs secties nesten om aan te geven dat een groep inhoud een sectie is van een andere groep inhoud die een sectie is van een artikel of de pagina als geheel.

De sectie element maakt items binnen een omtrek van het document. En als zodanig zou je altijd een header-element moeten hebben (H1 door H6) als onderdeel van de sectie. Als je geen titel voor de sectie kunt bedenken, DIV element is waarschijnlijk beter geschikt.

Als u niet wilt dat de sectietitel op de pagina verschijnt, kunt u deze altijd maskeren met CSS.

Wanneer het 'sectie'-element niet gebruiken?

Er is één doel waarvoor u de sectie element: alleen voor stijl.

Met andere woorden, als de enige reden waarom je een element op die plaats plaatst, is om te hechten CSS-stijl eigenschappen, moet u geen a. gebruiken sectie element. Vind een semantisch element of gebruik de DIV element in plaats daarvan.

Uiteindelijk maakt het misschien niet uit

Een moeilijkheid bij het schrijven van semantische HTML is dat wat semantisch is voor de browser, voor jou volslagen onzin kan zijn. Als u denkt dat u het gebruik van de kunt rechtvaardigen sectie element in uw documenten, dan moet u het gebruiken. De meeste user agents geven er niet om en zullen de pagina weergeven zoals je zou verwachten, of je nu een stijl DIV of een sectie.

Voor ontwerpers die graag semantisch correct zijn, gebruikt de sectie element op een semantisch geldige manier belangrijk is. Voor ontwerpers die gewoon willen dat hun pagina's werken, is dat niet zo belangrijk. Het schrijven van semantisch geldige HTML is een goede gewoonte en houdt de pagina's toekomstbestendiger. Maar uiteindelijk is het aan jou.

instagram story viewer