Lay-out kan worden uitgelegd als; ordening, ontwerp en indelingsplan. Vanuit dit perspectief is webpagina-indeling een juiste beschrijving voor het bepalen van de lay-out van een webpagina.
De webpagina-indeling is een belangrijk onderdeel van het creëren van goed samengestelde, gestructureerde en semantisch rijke websites, waarbij de gebruikerservaring voorop staat.
Als je je afvraagt wat semantisch is, kunnen we het in de meest basale zin omschrijven als meer betekenisvolle HTML-tags. Vroeger maakten we gebruik van de
tag en gaven we ze een id/class, om de pagina in secties te verdelen. Met de semantische elementen die met HTML5 zijn geïntroduceerd, zijn deze secties direct omgezet in tags.
Bijvoorbeeld, wanneer we een header aan de bovenkant van de pagina wilden toevoegen, schreven we vroeger
< div id=”header”>…< /div>
maar nu is het voldoende om
< header>…< /header>
tijdens het toevoegen van de inhoud in te voegen.
Enkele van deze tags zijn header, footer, nav, section, article, aside, enzovoort.
Deze informatie kunnen we Leo Panel bekijken;
Wanneer we de pagina voor het eerst openen, zien we over het algemeen 2 kolommen.
Hier correspondeert het blauwe gedeelte aan de linkerkant met het navigatiegebied, dat de
Onze rechter contentgebied is natuurlijk ook onderverdeeld in secties.
Het gebied dat zichtbaar is wanneer de pagina geopend wordt, komt overeen met de
Aan de linkerkant vinden we informatie over de pagina en aan de rechterkant staan de datacenterkeuze en gebruikersgegevens.
Het gedeelte net onder de breadcrumb (pagina-aanduidingen), het zoekvak en knoppen zoals 'nieuw toevoegen' en 'handelingen' definiëren we als subheader. Hier is geen directe overeenkomst in HTML5, dus kunnen we het zelf scheiden binnen de header-tag.
Het gedeelte onder deze lijst of gedetailleerde informatie beschouwen we als een aparte sectie.
Hier kan elke soort inhoud zijn, we kunnen het binnen zijn eigen secties onderverdelen of alleen gebruiken om een enkel element te bevatten.
Onze sjabloon heeft geen < footer> gebied, maar als dat het geval zou zijn, zouden we het net zoals bij de < header> tag ook kunnen toevoegen aan de < content> of onder onze algemene container kunnen evalueren.
