[HTML5][CSS3] Is dit een correct gebruik?

Door G P op 14-11-2014 17:06

1.226 views

Is dit nu wel een correct gebruik?

HTML

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 | CSS3</title>
<link type="text/css" rel="stylesheet" href="screen.css" media="screen">
</head>

<body>
<header>
	<h1>Titel</h1>
</header>
<nav>
	<ul>
		<li><a href="">Link 1</a></li>
		<li><a href="">Link 2</a></li>
		<li><a href="">Link 3</a></li>
		<li><a href="">Link 4</a></li>
		<li><a href="">Link 5</a></li>
	</ul>
</nav>
<article>
	<header>
		<h2>Article</h2>
	</header>
	<section>
		<header>
			<h3>Section 1</h3>
		</header>
		<p>Paragraaf 1.1</p>
		<p>Paragraaf 1.2</p>
		<p>Paragraaf 1.3</p>
	</section>
	<section>
		<header>
			<h3>Section 2</h3>
		</header>
		<p>Paragraaf 2.1</p>
		<p>Paragraaf 2.2</p>
		<p>Paragraaf 2.3</p>
	</section>
</article>
<aside>
	<header>
		<h2>Aside</h2>
	</header>
	<section>
		<header>
			<h3>Section 3</h3>
		</header>
		<p>Paragraaf 3.1</p>
		<p>Paragraaf 3.2</p>
		<p>Paragraaf 3.3</p>
	</section>
</aside>
<footer>
	<p>&copy; 2014 | <a href="">Created in HTML5</a> | <a href="">Designed with CSS3</a></p>
</footer>
</body>
</html>

CSS

/* CSS Document */

/* Blocks */
address, article, aside, audio, blockquote, canvas, dd, div, dl, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, noscript, ol, output, p, pre, section, table, tfoot, ul, video
{
	display: block;
}

/* inline */
b, big, i, small, tt, abbr, acronym, cite, code, dfn, em, kbd, strong, samp, var, a, bdo, br, img, map, object, q, script, span, sub, sup, button, input, label, select, textarea
{
	display: inline;
}

/* HTML5 */
html, body
{
	min-height: 100%;
}

html
{
	overflow: auto;
}

body
{
	display: table;
	width: 100%;
}

/* Header */
body > header
{
	caption-side: top;
	display: table-caption;
}

body > header h1
{
	color: #FFF;
	background: none #333;
	margin: 0 0 0 0;
	padding: 0.5em 0.5em 0.5em 0.5em;
}

/* Navigation */
body > nav
{
	color: #FFF;
	background: none #000;
	display: table-caption;
	caption-side: top;
}

body > nav ul
{
	list-style: none;
	overflow: hidden;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
}

body > nav ul li
{
	display: inline-block;
	overflow: hidden;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
}

body > nav ul li a
{
	color: #FFF;
	background: none transparent;
	white-space: nowrap;
	text-decoration: none;
	margin: 0 0 0 0;
	padding: 0.5em 1em 0.5em 1em;
}

body > nav ul li a:hover,
body > nav ul li a:focus
{
	text-decoration: underline;
}

/* Article */
body > article,
body > aside
{
	color: #000;
	background: none transparent;
	display: table-cell;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	width: auto;
	vertical-align: top;
}

/* Sidebar */
body > aside
{
	width: 250px;
	max-width: 25%;
}

/* Content */
body > article > header,
body > aside > header
{
	overflow: hidden;
}

body > article > header h2,
body > aside > header h2
{
	color: #FFF;
	background: none #369;
	overflow: hidden;
	margin: 0 0 0 0;
	padding: 0.5em 1em 0.5em 1em;
}

body > article section,
body > aside section
{
	color: #000;
	background: none #DDD;
	border: none 0 transparent;
	border-radius: 0.5em;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
}

body > article section header,
body > aside section header
{
	margin: 0 0 0 0;
	padding: 0 0 0 0;
}

body > article section header h3,
body > aside section header h3
{
	color: #FFF;
	background: none #600;
	font-variant: small-caps;
	letter-spacing: 0.1em;
	margin: 0 0 0 0;
	padding: 0.5em 1em 0.5em 1em;
}

body > article section p,
body > aside section p
{
	color: #000;
	background: none #DDD;
	font-size: 1em;
	font-weight: 100;
	line-height: 1.5em;
	letter-spacing: 0.01em;
	margin: 0 0 0 0;
	padding: 0.5em 1em 0.5em 1em;
	overflow: hidden;
	clear: none;
}

/* Footer */
footer
{
	color: #FFF;
	background: none #333;
	caption-side: bottom;
	display: table-caption;
}

footer p
{
	color: #FFF;
	background: none transparent;
	text-align: center;
	margin: 0 0 0 0;
	padding: 1em 1em 1em 1em;
}

footer p a
{
	color: #FFF;
	background: none transparent;
	text-decoration: none;
}

footer p a:hover,
footer p a:focus
{
	color: #FFF;
	background: none transparent;
	text-decoration: underline;
}

Chris PHP

14-11-2014 17:40

Waarom gebruik je nog een unsorted list (<ul>) in je <nav>?

Wouter J

14-11-2014 18:07

Chris, omdat navigatie nog steeds een unsorted list van menu items is. Het nav element geeft alleen die list een extra betekenis, niks meer.

Ward van der Put

14-11-2014 19:21

Het <nav> element mag andere elementen dan een <ul> met <li>'s bevatten, bijvoorbeeld een heading:


<nav>
  <h2>Navigation</h2>
  <ul>
    <li><a href="articles.html">Index of all articles</a></li>
    <li><a href="today.html">Things sheeple need to wake up for today</a></li>
    <li><a href="successes.html">Sheeple we have managed to wake</a></li>
  </ul>
</nav>

Het element <nav> geeft uitsluitend aan dat er genavigeerd kan worden. Niet meer, niet minder. Dat kan ook zonder <ul>. Poëtisch voorbeeld uit de HTML 5.1 Specification:


<nav>
  <h2>Navigation</h2>
  <p>You are on my home page. To the north lies <a href="/blog">my 
    blog</a>, from whence the sounds of battle can be heard. To the east
    you can see a large mountain, upon which many <a
    href="/school">school papers</a> are littered. Far up thus mountain
    you can spy a little figure who appears to be me, desperately
    scribbling a <a href="/school/thesis">thesis</a>.</p>
  <p>To the west are several exits. One fun-looking exit is labeled <a
    href="http://games.example.com/">"games"</a>. Another more
    boring-looking exit is labeled <a
    href="http://isp.example.net/">ISP™</a>.</p>
  <p>To the south lies a dark and dank <a href="/about">contacts
    page</a>. Cobwebs cover its disused entrance, and at one point you
    see a rat run quickly out of the page.</p>
</nav>

G P

15-11-2014 13:52

Dus <nav> kan ook enkel bestaan uit anchors <a>?
Discussie gaat niet enkel over de <nav> maar over de hele opbouw van een html5 document met daarbij een css3 opzet.
Is de opbouw goed of fout?

Ward van der Put

15-11-2014 14:38

Ja, de opbouw is goed genoeg, alleen nummer je de 3e <section> nu door in een <aside>. Je kunt je afvragen of een terzijde, want dat is een <aside> letterlijk, de doorlopende sectienummers van de hoofdcontent moet voortzetten. Een <aside> moet je kunnen overslaan, dus als je hierna nog doornummert naar 4 in een gewone <section>, breek je de logische structuur.

De W3C Validator heeft er geen moeite mee.

G P

15-11-2014 15:23

Dus als ik in <aside> meerdere <section>'s wil zal ik het moeten veranderen naar <div> ?
In <aside> moet <section> en <article> vermeden worden ?

Ward van der Put

15-11-2014 15:31

Ja, denk altijd eerst in termen van de structuur van content, niet van lay-out want die content moet ook zonder overeind blijven staan.

Dan is de vraag: is het logisch een aside te vullen met een apart article? Ja, misschien soms wel, maar vaak ook niet en kun jer zelfs beter een ander document en dus een nieuwe webpagina beginnen.

Wouter J

15-11-2014 17:44

Ook moet je even goed kijken naar je document outline wat betreft de headlines. Momenteel zijn ze op de "HTML4" methode gedaan: De site titel is h1, de post titel h2, the post section titels h3, etc. In HTML5 zijn er elementen als <article>, <aside>, <header>, <footer> en <section> bijgekomen. Dit zijn zogenaamde sectioning elements. Deze geven een nieuwe sectie aan. De H1 relateert naar de belangrijkste titel in the sectie. Een titel van een blogpost is dus evengoed H1 van het artikel als dat de site titel H1 is van de <body>.

Reageren

Inloggen om te reageren