Hallo,
mal so als Beispiel die Startseite von Spiegel online, Focus etc.
Schematisch in HTML/XHTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8"/>
<title></title>
</head>
<body>
<div id="content">
<div class="article">
<img/>
<h1></h1>
<h2></h2>
<p></p>
</div>
...
<div class="article">
...
</div>
</div>
oder vielleicht auch:
<ul id="content">
<li class="article">
<img/>
<h1></h1>
<h2></h2>
<p></p>
</li>
...
<li class="article">
...
</li>
</ul>
</body>
</html>
Daraus würde in HTML5:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title></title>
</head>
<body>
<section id="content">
<article>
<figure><img/><figure>
<h1></h1>
<h2><time></time></h2>
<p></p>
</article>
...
<article>
...
</article>
</section>
</body>
</html>
Jetzt die Frage: Ist das img-Element auf jeden Fall durch ein figure-Element zu kapseln? Oder nur, wenn es auch eine zugehörige Bildunterschrift hat? Gibt es da genau Regeln?
Und btw... Weiß jemand, warum man auf semantische Tags gesetzt hat und nicht auf semantische Attribute (z.B. @semantic)? In manchen Fällen wird es ja eher mehr Code als weniger:
<nav>
<ul>
<li>nav1</li>
<li>nav2</li>
...
<li>navz</li>
</ul>
</nav>
<ul semantic="nav">
<li>nav1</li>
<li>nav2</li>
...
<li>navz</li>
</ul>
Viele Grüße
Siri