Webkrauts Logo

Webkrauts Webkrauts Schriftzug

- für mehr Qualität im Web

HTML5 in der Praxis I

Wir haben noch nicht alle älteren Artikel nachbearbeitet. Das bezieht sich in der Regel nur auf die Codebeispiele, die noch nicht optimal dargestellt werden.

HTML5 in der Praxis I

In der Theorie hören sich die neuen Elemente gut und nützlich an, in der der Praxis müssen wir Webworker uns erst an die neuen Strukturen gewöhnen. Welches Element ist an dieser oder jenen Stelle nun das Richtige? Am Beispiel eines neuen Blogs zeigt Matthias Mees, wie das Markup mit HTML5 geschrieben wird.

Als abschließendes Beispielprojekt der HTML5-Reihe sollen Teile eines Blogs in HTML5 dienen. Die zentralen Elemente eines typischen Blogs lassen sich nahezu eins zu eins in die entsprechenden neu eingeführten HTML5-Elemente "übersetzen", was allerdings nicht bedeutet, dass diese Elemente nur in Blogs verwendet werden dürfen.

So soll das Beispielblog aussehen:

Screenshot des Beispielblogs zum Artikel

Der Beispielcode sowohl in diesem Artikel als auch im Beispielblog ist dabei bewußt auf das Wesentliche reduziert und lediglich sparsam mit CSS ausgestaltet. Auch auf "verwendungsfähigen" Code für ein Template für eines der gängigen Blogsysteme wurde verzichtet. Der Fokus soll auf der korrekten Wahl der HTML5-Elemente liegen.

Als Beispielseiten dienen die Übersichtsseite eines Blogs, eine Einzelansicht eines Artikels inklusive Kommentaren und Kommentarformular sowie eine (sehr einfach gehaltene) Archivseite.

Das Grundgerüst

Das Grundgerüst bildet den gemeinsamen Rahmen aller drei Beispielseiten. Gehen wir den Code schrittweise durch.

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="utf-8">
  <title>Beispielblog: HTML5 &bull; Startseite</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/
     svn/trunk/html5.js" type="text/javascript">
  </script>
<![endif]-->
  <link rel="stylesheet" type="text/css"
     href="screen.css" media="screen,projection">
</head>

Ein — stark vereinfachter — Kopfbereich mit DOCTYPE, Angabe der Sprache des Dokumentes sowie des verwendeten Zeichensatzes, Titel des Dokumentes und Einbindung eines Stylesheets.

Das über Conditional Comments nur für den Internet Explorer eingebundene Javascript ist das HTML5 enabling script von Remy Sharp — es sorgt dafür, dass auch der IE die neuen HTML5-Elemente erkennt.

<body>
  <header>
    <h1><a href="index.html">Beispielblog:
        <abbr title="HyperText Markup Language">HTML</abbr>5
        </a></h1>
    <p>Anhand eines Blogs den Einsatz von
       HTML5 demonstrieren</p>
  </header>

Auf das öffnende Tag des body-Elementes folgt mit #kopfbereich ein header-Element als Seitenkopf oder Banner, in welchem der Titel des Blogs als Überschrift erster Ordnung sowie eine Blogbeschreibung stehen.

  <div id="inhalt">
  <!-- Inhaltsbereich -->
  </div>

Dieser relativ unspektakuläre Teil bildet den Inhaltsbereich des Blogs, welcher im zweiten Teil dieses Artikel mit den eigentlichen Inhalten (abhängig von der betreffenden Seite des Blogs) befüllt werden wird. Es gibt derzeit kein semantisch passendes Element für den Hauptinhalt, also bedienen wir uns des bewährten div-Containers.

Die Spezifikation schlägt — derzeit — ausdrücklich vor, für Seitenleisten in Blogs das aside-Element als Container zu verwenden:

<aside id="seitenleiste">
  <nav>
    <h2>Hauptnavigation</h2>
    <ul>
      <li><a href="index.html">Startseite</a></li>
      <li><a href="einzel.html">
          Einzelansicht eines Artikels</a></li>
      <li><a href="archiv.html">Archiv</a></li>
    </ul>
  </nav>

Die Hauptnavigation wird als ungeordnete Liste ausgezeichnet, als Container-Element dient das neue nav-Element. Somit ist semantisch deutlich, dass es sich hier um die primäre Navigation des Blogs handelt.

Es folgt ein Suchformular.

    <form id="suchformular">
      <fieldset>
        <legend>Suche</legend>
        <label for="suchbegriff" class="invisible">
          Suchbegriff(e) eingeben
        </label>
        <input name="suchbegriff"
          id="suchbegriff" type="search"
          size="15">
        <input type="submit" value="Suche">
      </fieldset>
    </form>

Hier nutzen wir ein neuen input-Typ für die Suche. Im form-Element können method="get" auslassen, da es automatisch eingesetzt wird, falls keine genauere Anweisung vorliegt.

Abschließend noch eine Liste der Kategorien als zusätzliche Navigationshilfe in der Seitenleiste — ebenfalls mit dem passenden Element nav ausgezeichnet.

    <nav>
      <h2>Kategorien</h2>
      <ul>
        <li><a href="#">Kategorie 1</a></li>
        <li><a href="#">Kategorie 2</a></li>
        <li><a href="#">Kategorie 3</a></li>
      </ul>
    </nav>
  </aside>

Den Abschluss des Grundgerüstes bildet ein Seitenfuß, welcher mit dem neuen Element footer ausgezeichnet wird.

  <footer>
    <p>&copy; 2009 Autor &bull; <a href="#">Impressum</a></p>
  </footer>
</body>
</html>

Im zweiten Teil wird dann der oben leer gelassene Inhaltsbereich abhängig von der jeweiligen Seite mit Inhalten befüllt.

Kommentare

Mario
am 05.10.2009 - 19:35

Erstmal Danke für den guten Beitrag.
Aber ist es nicht so, dass für den script-Tag das type-Attribut nun per default auf javascript gesetzt ist und es somit nicht mehr angegeben werden muss?
Könnte man also einfach weglassen.
Bei style in Bezug auf css ist es im prinzip genauso.

Permanenter Link

Matthias Mees
am 05.10.2009 - 20:01

Könnte man also einfach weglassen.
Bei style in Bezug auf css ist es im prinzip genauso.

Du hast natürlich Recht, beides sind laut (derzeitigem Stand der) Spezifikation die "Standardwerte" und man könnte sie in diesem -- sehr simplen -- Beispiel weglassen.

Ich finde es (ganz subjektiv) sauberer, sie dennoch anzugeben, räume aber durchaus ein, dass diese Ansicht von der berüchtigten "Macht der Gewohnheit" beeinflusst sein könnte :-)

Permanenter Link

Gunther
am 06.10.2009 - 13:11

Hallo!

Dieser Artikel samt seinem Beispielcode zeigt imho sehr schön, wie HTML5 zur Verkomplizierung von HTML führt.

Der Beispielcode ... ist dabei bewußt auf das Wesentliche reduziert ...

und dennoch wirkt der Quelltext schon dermaßen aufgebläht, dass man wohl den Begriff DIVitis demnächst auch mit HTML5 gleichsetzen kann. ;-)

Da ich dann auch gleich für die Validität des Beispielcodes interessiert habe, musste ich feststellen, dass der W3C Validator für HTML5 doch wohl noch sehr experimental ist, zeigt er doch einen Fehler für das pubdate Attribut in Zeile 43 an und ist nicht in der Lage, die Charset Angabe im Head zu finden.
Siehe: W3C Validator Ergebnis

Kann ich auch das Ergebnis des Validators nicht teilen (für mich ist der Code valide), so scheint mir aber etwas anderes nicht korrekt zu sein, nämlich die Verwendung der Überschriften Elemente gemäß dem neuen Section-/ Outline-Konzept.

Auch hierfür gibt es ein Tool namens Semantic data extractor: Semantic data extractor Ergebnis

Die Outline des Dokuments zeigt, dass sie imho nicht korrekt ist, bzw. nicht so, wie sie von der wohl anzunehmenden Semantik der Seite her sein sollte. Das liegt m.M.n. darin begründet, dass einerseits keine Section Elemente verwendet wurden und andererseits aber auch auf die konsequente Verwendung von ausschließlich H1 Elementen verzichtet wurde.

Na ja, früher zu Zeiten exzessiven Gebrauchs von verschachtelten (Layout-)Tabellen haben wir stundenlang nach fehlenden und/ oder falsch platzierten Tabellen-Tags (table, tr, td) gesucht - zukünftig testen wir dann halt die Outline unseres Dokuments bis sie so ist, wie sie sein soll!

BTW: Was mich ja auch mal brennend interessieren würde, und wozu ich bisher nirgends etwas gefunden habe ist, wie es dann eigentlich im Bezug auf das Styling per CSS aussieht?
Wenn ich das soweit richtig verstanden habe, dann ist es ja zukünftig Sache des Browsers einem Hx-Element gemäß der Outline seinen Rank zuzuweisen. Sprich aus einem H1-Element im Quelltext könnte dann bspw. beim Rendern ein H4-Element werden. Und wie ist das dann mit dem CSS? Greift dann immer noch ein H1-Selektor, oder doch ein H4-Selektor?

Gruß Gunther

Permanenter Link

Thomas Meinike
am 06.10.2009 - 14:24

Das Attribut pubdate gehört zum Element article und nicht zum Element time.

Permanenter Link

Matthias Mees
am 06.10.2009 - 14:33

@Thomas Das magst Du subjektiv so empfinden, die Spezifikation sagt jedoch dazu (derzeit):

The time element's pubdate attribute can be used to provide the publication date for an article element.

Also: pubdate ist eindeutig time zugeordnet.

Permanenter Link

Thomas Meinike
am 06.10.2009 - 14:47

@Matthias: Das hat nichts mit meinem subjektiven Empfinden zu tun, sondern mit dem intensiven Studium der "Editor's-Draft"-Version vom September 2009. Dort hat article ein pubdate-Attribut und time lediglich das datetime-Attribut. Vermutlich kennt deshalb auch der W3C-Validator diese Neuerung nicht. Ich finde diese Klein-Klein-Fummelei mittlerweile etwas anstrengend, siehe Media-Attribute.

Permanenter Link
Eric Eggert

Eric Eggert (Webkraut)
am 06.10.2009 - 15:31

@Thomas: Ja, das wurde auf Anregung der HTML5 Super Friends geändert, ich finde das ziemlich sinnvoll so.

@Gunter: Wir haben verstanden, dass du kritisch bist, du musst das beim besten Willen nicht bei jedem einzelnen Artikel wiederholen, zumal wir auch die falschen Ansprechpartner sind. Poste deine Anmerkungen in die offizielle HTML5-Mailingliste oder äußere sie im IRC-Channel. Da hast du wesentlich mehr Chancen, dass sie berücksichtigt werden.

Zu CSS: Ein h4-Element bleibt ein H4-Element, alles was sich ändert ist ein interner Hierarchie-Parameter. Im Moment bietet CSS noch keine Lösung dafür an, außer mit Kindselektoren zu arbeiten, was dann aber sehr aufblähend sein kann. Jeremy Keith hat dazu bereits was in die Mailingliste gepostet.

Permanenter Link

Thomas Meinike
am 06.10.2009 - 15:41

@Eric: Sinnvoller fände ich dann eher ... bzw. ....... Ein im Kontext leeres pubdate fühlt sich seltsam an (leere Attribute halte ich überhaupt für fragwürdig, aber das ist der XML-Part in mir, der sich nach 10 Jahren XML nicht enfach ablegen lässt ;-).

Permanenter Link

Thomas Meinike
am 06.10.2009 - 15:46

Nochmal der Code: <article pubdate="...">...</article> bzw. <article><time datetime="..." ispubdate>...</time>...</article>

Permanenter Link

Gunther
am 06.10.2009 - 18:46

@Eric

Wir haben verstanden, dass du kritisch bist, du musst das beim besten Willen nicht bei jedem einzelnen Artikel wiederholen, ...

Ich kann ja auch nichts dafür, dass ihr aktuell gerade einen Artikel nach dem anderen zu diesem Thema raushaut. ;-)

... zumal wir auch die falschen Ansprechpartner sind.

Das finde ich eben nicht, denn garantiert viele Webautoren lesen eure Artikel (und ggf. auch die Kommentare). Hier auch ein gewisses "Problembewußtsein" gegenüber den Neuerungen aufzuzeigen und evt. eine (sachliche) Diskussion darüber zu führen, halte ich ebenfalls für äußerst sinnvoll. Gerade da die Artikel größtenteils/ überwiegend ziemlich "wertneutral" gehalten sind (was ja ansich durchaus sinnvoll und richtig sein kann), und zumindest für meinen Geschmack daher zu wenig die jeweiligen Pros & Cons beleuchten/ unter die Lupe nehmen.

Poste deine Anmerkungen in die offizielle HTML5-Mailingliste oder äußere sie im IRC-Channel.

Sehe ich ehrlich gesagt nicht als mein Ding an. Schließlich bin ich reiner Hobbyist/ Laie und sicherlich auch nicht mit allen Dingen bis in die letzten Feinheiten vertraut. Da sehe ich Leute, die das beruflich machen, weiter vorne als mich. Hinzukommt, dass ich zwar durchaus des (Business) Englischen mächtig bin, allerdings fehlt mir jegliche Übung darin, fachspezifische Dinge en detail (schriftlich) auf Englisch zu erläutern. Denn gerade bei solchen Dingen kommt es oft auf die sprachlichen Feinheiten an.

Und last but not least heißt es doch in eurem Mission Statement u.a.:

Wir propagieren die internationalen Standards und beteiligen uns aus der Sicht der Praxis an ihrer Weiterentwicklung.
[...]
Dazu bieten wir eine Plattform für den Austausch von Informationen und Meinungen.

In diesem Sinne (und nichts für Ungut) :-)
Gunther

Permanenter Link

Matthias Mees
am 06.10.2009 - 18:58

Das hat nichts mit meinem subjektiven Empfinden zu tun, sondern mit dem intensiven Studium der "Editor's-Draft"-Version vom September 2009.

Ah, okay. Ich bin zugegebenermaßen nicht vom "Editor's Draft", sondern vom "Working Draft" ausgegangen. (Ja, das hätte ich anmerken können bzw. sollen. Bitte um Nachsicht :-))

Permanenter Link

Die Kommentare sind geschlossen.