WEB ontwikkeling & design BLOG

WEB ontwikkeling & design BLOG

Waarom ?

Deze blog biedt een platform om informatie te delen over HTML & CSS, JavaScript, PHP, (My)SQL, ... .
Niet alleen voor de cursisten en lesgevers uit de afdeling WEB ontwikkeling & design van het SCVO-ENCORA, Grote Steenweg 226 te Berchem - Antwerpen, maar met en door iedereen die geïnteresseerd is in de ontwikkeling van het internet

Article versus Section

HTML & CSSGeplaatst door Micky 16 jun, 2016 15:10:37

Een groot deel van de vragen die opduiken op forums, StackOverflow ,Twitter , e.d., in verband met HTML5, gaan over het gebruik van “<article>” of “<section>"

Heel vaak is het antwoord "geen van beiden, gebruik <div>".

Deze twee HTML5 tags, article of section, zijn niet zo gemakkelijk om te gebruiken omdat ze ons dwingen om na te denken over wat we aan het schrijven zijn en de manier waarop we onze inhoudgaan presenteren.

We moet nadenken op een manier die we nog niet eerder hadden bij het opmaken van een HTML-pagina. En terwijl dit een goede zaak, het vereist wel inspanning.

<div>

Als je gewoon een deel van je site wil stijlen, zonder dat de ingesloten elementen een structurele link met elkaar hebben, gebruik dan <div> .

<section>

Een sectie is een generiek deel van een document of toepassing.

Een deel, in deze context, is een thematische groepering van inhoud, meestal met een titel.

Laten we als voorbeeld een krant nemen.

Een krant is opgedeeld in verschillende secties: een sectie binnenland, een sectie buitenland, een sport-sectie, cultuur pagina’s ,…. .

Elk van deze secties staan op zichzelf en bestaan uit een aantal artikels.

<article>

Een article is specifiek deel van een sectie in die zin dat het een een op zichzelf staand (self-contained) deel van een document, pagina, applicatie of website is.

Dus met behulp van de bovenstaande kranten analogie zal de sport-sectie, enkel artikels bevatten die over sport gaan maar die volledig op zichzelf staan (self-contained).

Nesting

Om alles nog wat ingewikkelder te maken mag je “<article>” en “<section>” zoveel nesten als je wil. Voor HTML5 is het allemaal om het even

Voorbeeld:

<section>

<h1>Sport</h1>

<article>

<h1>Voetbal</h1>

<section>

<h3>Antwerp</h3>

</section>

<section>

<h3>Anderlecht</h3>

</section>

</article>

</section>

Conclusie

“<article>” of “<section>” dwingen ons om na te denken over de onderlinge samenhang van de verschillende onderdelen van onze web-paginas.

Indien er geen hiërarchisch verband is tussen de verschillende onderdelen kan je werken met enkel secties, met enkel artikels ofwel gebruik je gewoonweg <div>.



  • Reacties(2)//www.webontwikkeling.info/#post21