PHPhulp.nl PHPhulp.nl
35k+ leden Over PHPhulp Offerte opdracht Contact
L

Welke elementen?

Door Lord Gaga op 29-05-2014 21:59 gewijzigd op 29-05-2014 22:00
845 views
Hallo,

Gisteren heb ik een ontwerp gemaakt voor een layout, die ik nu dus wil maken in HTML.
Ik weet alleen niet welke elementen ik het best kan gebruiken.

Het gaat om de volgende indeling:



Grijs: Een horizontale afbeelding van een wolk
Oranje: De 'header' van de site
Rood: De navigatie
Blauw: De content
Geel: De 'footer' van de site
Groen: Een horizontale afbeelding van een bos

Ik heb zoals op de afbeelding te zien is nu 2 'headers' en 'footers'.
Maar is het wel logisch om voor de wolken en bos een 'header' en 'footer' element te gebruiken? En zo niet, als ik een div gebruik, mag deze div dan wel boven de header staan van de site?

Zelf zat ik te denken aan deze opbouw:


<header id="header">
	<div id="header-clouds"></div>
</header>

<main id="main">
	<header>
		<!-- Logo etc. -->
	</header>
	
	<div id="left">
		<navm id="navigation">
			<ul>
				<li></li>
				<li...
			</ul>
		</nav>
	</div>
	
	<div id="right">
		<article>
			<h1>Welkom</h1>
			
			<p>Welkom...</p>
		</article>
	</div>
	
	<footer>
		<!-- Copyright etc. -->
	</footer>
</main>

<footer id="footer">
	<div id="footer-forest"></div>
</footer>


Echter kan ik nergens vinden of het is toegestaan om 'header' en 'footer' binnen 'main' te gebruiken.
Kan iemand me vertellen hoe het wél moet?

Alvast bedankt!
Wouter J
29-05-2014 23:27
Header elementen zijn de head (het hoofd) van een sectie. Ze kunnen dus gebruikt worden in sectioning elements. <body> is zo'n sectioning element, <div> is dat niet. Wat andere sectioning elements: <section>, <article>, <aside> en <footer> en <header> zelf ook.

Wanneer je ze gebruikt ligt aan wat deze blokken voorstellen. Elementen gebruik je niet omdat we in de design wereld dit nou eenmaal een header noemen, we gebruiken ze omdat ze een header voorstellen.

Stel header-clouds (waarom een geneste div?) en footer-forest zijn alleen nodig voor het design, maar ze zijn niet echt de header en footer van de site, dan horen die niet met een <header> of <footer> element aangeduid te worden, maar met betekenisloze <div> elements (design heeft immers geen betekenis).

Stel header-clouds en footer-forest bevatten de site title, etc. en zijn daarmee echt de header en footer van de site, dan gebruik je er wel <header> en <footer> voor.

Dat <main> element is geen sectioning, maar een grouping element. Dit betekend dat er iets fout gaat: De <body> element heeft nu 2 headers en 2 footers. Dit kun je heel makkelijk omzeilen door het simpelweg te veranderen naar een <section> element, maar het is veel beter om nog eens goed te gaan nadenken over deze 2 headers en footers. Ik heb namelijk het vermoeden dat 1 van de 2 headers geen echte header is en idem voor de footers.
L
Lord Gaga
30-05-2014 00:05 gewijzigd op 30-05-2014 11:57
Bedankt voor je reactie, ik ben nu op het volgende uitgekomen:


<div id="header-clouds"></div>

<header id="header">
	<!-- Logo etc. -->
</header>
	
<main id="main">
	<div id="left">
		<nav id="navigation">
			<ul>
				<li></li>
				<li...
			</ul>
		</nav>
	</div>
	
	<div id="right">
		<article>
			<h1>Welkom</h1>
			
			<p>Welkom...</p>
		</article>
	</div>
</main>

<footer id="footer">
	<!-- Copyright etc. -->
</footer>

<div id="footer-forest"></div>


Ik twijfel alleen nog of de header, div 'header-cloud', de footer en div 'footer-forest' binnen of buiten het main element moeten.

Edit:
Als ik op www.html5doctor.com kijk, dan staat het main-element onder het kopje 'Sections', dit klopt dus niet?

Reageren

Inloggen om te reageren