HTML5 Struktur richtig?

[1UnitedPower]

Meine Herren!

Präambel: Es ist sehr schwierig über die semantische Auszeichnung eines Dokuments zu sprechen, wenn der Inhalt fehlt, ich versuche trotzdem mal mein Bestes.

ist diese HTML5 Struktur richtig? Oder sollte etwas verbesser werden?

Du hast keine html-, head- und body-Tags annotiert. Das ist laut HTML5-Spezifikation zwar zulässig, aber ich würde es trotzdem nicht empfehlen: Durch das Weglassen der Tags schränkst du dich selber unnötig ein; dein body kann etwa als erstes Kind keinen Kommentar oder script-Element beinhalten. Lässt man die head- und body-Tags weg, werden die Elemente implizit trotzdem erstellt und das spielt zum Beispiel bei Traversieren im DOM-Baum eine Rolle: Wenn man dein HTML-Grundgerüst nimmt, könnte man auf die Idee kommen, das folgender JavaScript das erste article-Element selektiert:

document.querySelector(':root > article');

Das wird allerdings nicht funktionieren, weil das article-Element eben kein Kind des Wurzel-Elements ist, sondern des body-Elements, richtig wäre:

document.querySelector('body > article');

Das mag ein wenig kleinlich klingen, aber das Problem ist real, es tritt sehr häufig bei Tabellen auf. Viele Entwickler sind erstaunt darüber, wenn sie merken, dass tbody-Elemente auch implizit erstellt werden, wenn man sie nicht notiert.

Ein anderes Problem beim Weglassen von Tags ist, dass das Dokument von DOM-Parsern, die nicht HTML5 sprechen, in eine vom Standard abweichende Struktur geparst werden. Die Browser-Parser sind davon nicht betroffen, aber einige Programm-Bibliotheken könnten damit ihre Schwierigkeiten haben.

Für die Leserlichkeit ist es auch hilfreich, ich finde es nützlich, wenn die Zusammengehörigkeit von Kopfinformationen durch entsprechende Einrückung und erkennbare Tags ausgezeichnet ist.

Das wäre das Eine.

<header>  
  <h1>Logo</h1>  
</header>

Wenn dort später tatsächlich ein Firmenlogo erscheinen soll, sollte da wohl besser ein img-Element stehen. Oder man fasst das Logo als Teil der Präsentation auf und lädt es dann mittels CSS als Hintergrund-Bild, aber ein Logo ist keine Überschrift.

  
<article class="left">  
   <div class="service_top">Service</div>  
   <div class="aufzahlung">  
      <ul>  
         <li>Teil 1</li>  
         <li>Teil 2</li>  
         <li>Teil 3</li>  
      </ul>  
   </div>  
   <div class="service_bottom">Service</div>  
</article>

Das sieht für mich nicht wirklich nach einem Artikel aus, ein section-Element wäre hier möglicherweise passender als das article-Element. Das gilt auch für die übrigen article-Elemente.

Das div mit der Klasse service_top macht auf mich den Eindruck als enthalte es eine Überschrift, dass sollte sich im HTML entsprechend wiederspiegeln.

Sämtliche andere div-Element machen auf mich einen überflüssigen Eindruck. Wenn ein div-Element nur ein Kind enthält ist das häufig (nicht immer) ein gutes Indiz dafür, dass Element überflüssig ist. Das div mit der Klasse aufzahlung beinhalten beispielsweise nur ein ul-Element. Das div mit der Klasse "service_bottom" beinhaltet nur den Textknoten "Service". Dieses letzte div erscheint mir darüber hinaus gänzlich überflüssig, es trägt die selbe Information, die eigentlich (siehe oben) schon in der Überschrift steckt. Es kann natürlich sein, dass du das aus präsentationsbezogenen Gründen so brauchst, oder dass du Element präventiv schon mal eingepflanzt hast und der Inhalt sich später noch ändert. Aber das kann ich deinem Prototypen nicht entnehmen, deshalb hab ich es einfach mal angesprochen.

<p>Firma</p>  
<p>Tel: xxx - xxx / Fax: xxx - xxx</p>  
<p>eMail: emailAdresse</p>

p-Elemente sollen Textabsätze in Fließtexten auszeichnen, der Fall liegt hier nicht vor. Eine passendere Alternative wäre zum Beispiel eine Definitionsliste:

<h3>Firma</h3>  
<dl>  
   <dt>Tel</dt><dd>xxx - xxx</dd>  
   <dt>Fax</dt><dd>xxx - xxx</dd>  
   <dt>Email</dt><dd><a href="mailto:[e-mail]">[e-mail]</a></dd>  
</dl>

Kontaktinformationen sind übrigens typischerweise Teil des Footers <footer> und nicht des Hauptinhaltes <main>. Das muss aber nicht immer so sein, deshalb hab ich ganz zu Anfang mal erwähnt, das es schwierig ist über die Semantik von Prototypen zu reden ist.

Eine letze Anmerkung: Klassennamen solltest du möglichst unabhängig von der Präsentation wählen. Man möchte in aller Regel das Dokument und damit den Inhalt möglichst stark von der Präsentation getrennt haben. Deshalb wählt man häufig nur Klassennamen, die etwas über den Inhalt ihrer Elemente aussagen, die sozusagen, die Semantik noch ein wenig anreichern. Mit CSS lassen sich solche Klassen genauso einfach selektieren, wie präsentationsbezoge Klassen ;)