wanon256 schrieb:
Dein Code umgeschrieben, aber noch nicht getestet:
Code:
<!DOCTYPE html>
<html>
<head>
<title>Monteurzimmer Steib</title>
<link rel="stylesheet" type="text/css" href="css/format.css" />
</head>
<body>
<header>Monteurzimmer Steib</header>
<section>
<li><a href="index.php?nav=start">Startseite</a></li>
<li><a href="index.php?nav=bilder">Bilder</a></li>
<li><a href="index.php?nav=kontakt">Kontakt</a></li>
<li><a href="index.php?nav=impressum">Impressum</a></li>
</section>
<aside>
<p>Herzlich Willkommen bei Ferien/Monteurzimmer Steib!</p>
<img src="http://www.firstmallorca.com/assets/images/luxury_properties_mallorca.jpg">
<p>Wir freuen uns, Sie als unsere Gäste begrüßen zu dürfen, wenn ihr Weg Sie privat oder geschäftlich nach Neustadt a. d. Donau & Umgebung führt.</p>
<p>Nutzen sie unsere Ferien-/Monteurzimmer, wenn Sie die Arbeit ins schöne Hopfenland verschlägt. Wir bieten ihnen ein angenehmes Ambiente mit fairen Preisen an.</p>
<p>Besonders attraktiv für unsere Gäste ist die günste Lage, denn die A93 und B16 sind innerhalb weniger Minuten zu erreichen.</p>
</aside>
</body>
</html>
Obiger Code ist unglaublich fehlerhaft. Hier mal eine kompakte Liste, die einiges an Schnitzern aufzeigt
- <html> sollte immer ein lang-Attribut enthalten
- Ein Meta-Tag für das korrekte Charset fehlt völlig
- Auch der Meta-Tag für die Description fehlt. Während Meta-Keywords faktisch tot und begraben ist, ist Meta-Desc suchmaschinentechnisch extrem wertvoll, denn dieser Tag vermittelt Suchmaschinen, welcher Begleittext im Treffer erscheinen soll. Außerdem wird die Desc für Social Sharing verwendet.
- <header> SOLLTE eine Überschrift oder Navigation enthalten. <header> nur mit hingeklumptem Text ist semantischer Blödsinn.
- Das Dokument hat keine Headline-Struktur. Keine <h1>, und keine untergeordneten <h2-6>. Das ist sowohl semantischer Bockmist als auch suchmaschinentechnisch ein Totalausfall
- <section> ist KEIN generisches Element, dass man anstelle von <div> verwendet. Eine <section> definiert in erster Linie einen Abschnitt innerhalb eines größeren Kontext, also vornehmlich eines <article>
- <li> darf NIE allein stehen. <li> definiert ein List Item, dessen Existenz außerhalb eines Listen-Blocks (also <ul> oder <ol>) NICHT gestattet ist
- Die primäre Navigation sollte in ein <nav> - Element, dafür ist es schließlich da
- <aside> ist NICHT dafür gedacht, um damit eine Seitenleiste/Spalte zu deklarieren. <aside> sind Inhalte, die in loser Verbindung zum zumschließenden Dokumenten-Kontext stehen. Also angenommen, du hast einen <article> über Elefanten, dann könnte irgendwo am Rande (thematisch, nicht optisch) des Artikels in einem <aside> eine Statistik über Elfenbein-Wilderei stehen. Also: Content, der allein für sich Sinn ergibt, aber im Kontext des Eltern-Elements MEHR Sinn ergibt
- <img> MUSS zwingend ein alt-Attribut haben
Fazit: Wenn man keine Ahnung von der HTML5-Semantik hat, dann sollte man sie GAR NICHT verwenden. <div>-Suppe ist immer noch 1000x besser als semantischer Grießbrei.
