Webkrauts: Für mehr Qualität im Web.

Artikel

HTML5 in der Praxis II

Das Grundgerüst aus Teil 1 muss nun noch "befüllt" werden. Es fehlen die eigentlichen Inhalte im Inhaltsbereich, welche nun anhand dreier typischer Beispielbereiche eines Blogs illustriert werden sollen. Die folgenden Codeschnipsel stehen also auf der jeweiligen Unterseite innerhalb des div mit der ID #inhalt.

Die Startseite

Die "klassische" Startseite eines Blogs listet üblicherweise die letzten Artikel auf, das passende Tag hierfür ist article.

    <article>
      <header>
        <h1>Titel des ersten Artikels</h1>
      </header>
      <div class="entry-content">
        <p>Dies ist ein erster Beispielartikel im
           Beispielblog. Sein einziger und
           ausschlie&szlig;licher Sinn ist es, nun ja, ein
           Beispielartikel zu sein. Mehr nicht. Keine wirklich
           schwere Aufgabe.</p>
        <p>In weiteren Artikeln wird vermutlich mehr passieren
           als nur so ein bi&szlig;chen Text wie hier. Wir
           werden sehen.</p>
      </div>
      <footer>
        <p>Geschrieben am
          <time datetime="2009-08-24T16:02+01:00"
            pubdate="pubdate">
            24. August 2009 um 16:02
          </time> Uhr von Autor.
          <a href="#">Kategorie 1</a>
        </p>
      </footer>
    </article>

Balsam für geschundene Semantikherzen von Webautoren: Im header des article findet sich der Artikel-Titel, jegliche Metainformation wandert in einen footer und dazwischen steht der eigentliche Artikelinhalt, hier zum Zweck der einfacheren Gestaltung in ein div verpackt.

Das Datum findet sich im neuen time-Element, durch pubdate wird gekennzeichnet, dass es das Veröffentlichungsdatum des Artikels ist.

Die Artikelseite

Typisch für die Einzelansicht eines Blogeintrages ist, dass das soeben erwähnte Markup der Eintrage um Kommentare zum Artikel sowie ein Kommentarformular ergänzt wird.

Auf den footer im obigen Codebeispiel folgt dabei zunächst der Abschnitt, welcher die Kommentare zum Artikel darstellt:

      <section id="kommentare">
        <header>
          <h1>Kommentare</h1>
        </header>
        <article>
          <header>
            <h2>Kommentator A schrieb am
              <time datetime="2009-08-25T11:17+01:00"
                pubdate="pubdate">
                25.08. um 11:17</time>:</h2>
          </header>
          <div class="kommentar-content">
            <p>Ein erster Testkommentar.</p>
          </div>
        </article>
        <article>
          <header>
            <h2>Kommentator B schrieb am
              <time datetime="2009-08-25T11:19+01:00"
                pubdate="pubdate">
                25.08. um 11:19</time>:</h2>
          </header>
          <div class="kommentar-content">
            <p>Noch ein Testkommentar.</p>
          </div>
        </article>
      </section>

Die Auszeichnung der Kommentare ist im Wesentlichen analog zur Auszeichnung der Blogeinträge — als verschachtelte article-Elemente wird ihr Bezug zum Elternartikel, innerhalb dessen sie einen eigenen Abschnitt (section) einnehmen, deutlich.

Grundsätzlich wäre natürlich durchaus denkbar, die Metadaten des Kommentars auch hier als footer des Kindartikels auszuzeichnen.

Eine weitere section enthält das Kommentarformular. Es unterscheidet sich lediglich durch Feinheiten von gängigen Kommentarformularen.

      <section id="kommentar-schreiben">
        <header>
          <h1>Kommentar schreiben</h1>
        </header>
        <p><strong>Hinweis:</strong> Hellgrün hinterlegte
          Formularfelder sind Pflichtfelder.</p>
        <form id="kommentar-formular" action="#">
          <fieldset id="benutzer-daten">
            <legend>Benutzerdaten</legend>
            <label for="benutzer-name">Name</label>
            <input id="benutzer-name"
              name="benutzer-name" required="required"
              size="22">
            <label for="benutzer-email">Email</label>
            <input id="benutzer-email"
              name="benutzer-email" type="email"
              required="required" size="22">
            <label for="benutzer-url">
              <abbr title="Uniform Resource Locator"
                lang="en">
                URL</abbr>
            </label>
            <input id="benutzer-url"
              name="benutzer-url" type="url"
              size="22">
          </fieldset>
          <fieldset id="benutzer-text">
            <legend>Ihre Nachricht</legend>
            <label for="benutzer-kommentar">
              Kommentar</label>
            <textarea id="benutzer-kommentar"
              name="benutzer-kommentar" required="required"
              rows="10" cols="30">
            </textarea>
          </fieldset>
          <input type="submit"
            value="Senden">
        </form>
      </section>
    </article>

Über das Attribut required sowie die neuen input-Typen email und url stellt HTML5 Mechanismen zur Überprüfung des Formulares bereit, welche bislang über das auswertende Skript gelöst werden mussten. Auch die Ausgestaltung entsprechender Felder wird möglich gemacht, etwa durch CSS-Anweisungen wie input[required].

Da gängige Screenreader das neue Attribut required noch nicht unterstützen, ist es empfehlenswert, einstweilen zusätzlich das entsprechende WAI-ARIA-Attribut aria-required zu verwenden.

Die Archivseite

Der Inhalt der Archivseite schließlich ist relativ unspektakulär ausgezeichnet — beide Archivvarianten als Kindsektionen samt eigenem header.

      <header>
        <h1>Archiv</h1>
      </header>
      <section id="nach-jahren">
        <header>
          <h1>Nach Jahren</h1>
        </header>
        <ul>
          <li><a href="#">2009</a></li>
          <li><a href="#">2008</a></li>
          <li><a href="#">2007</a></li>
          <li><a href="#">2006</a></li>
        </ul>
      </section>
      <section id="nach-kategorien">
        <header>
          <h1>Nach Kategorien</h1>
        </header>
        <ul>
          <li><a href="#">Dieses</a></li>
          <li><a href="#">Jenes</a></li>
          <li><a href="#">Welches</a></li>
        </ul>
      </section>

Hier stellt sich natürlich die Frage: section oder article? Die Spezifikation merkt dazu an, dass article vorzuziehen sei, wenn der Inhalt in einem Newsfeed angeboten werden soll. Das ist bei solchen Archivlisten sinnfrei, daher wurde hier section gewählt. Damit steht nun der grundsätzliche HTML5-Code für das neue Blog. Fehlen nur noch die Inhalte.

Zum Abschluss

In den anderen Teilen unserer Serie ist zu lesen, dass HTML5 noch nicht fertig ist. Wir werden gespannt beobachten, wie sich die Spezifikationen noch entwickeln werden. Neues über HTML5 gibt es in den kommenden Monaten sicher immer öfter zu lesen, unter anderem auch hier bei den Webkrauts.

Zum Autor:

Matthias Mees lebt in Eutin in Schleswig-Holstein – unter anderem auch davon, Webseiten zu gestalten. Er fühlt sich im Texteditor deutlich wohler als im Grafikprogramm und ist auch, aber nicht nur deswegen, Linux-Enthusiast.

Info:

HTML5 in der Praxis II ist Beitrag Nr. 634

Autor:

Matthias Mees am 6. Oktober 2009 um 19:05

Kategorie:

HTML5-Einführung

Tags:

Kommentare

Bitte die Hausregeln beachten. Alle Kommentare werden auf werbliche Links/Nicknames geprüft und gegebenenfalls gelöscht.

1. 1.
   

   Wäre es nicht konsequenter, die mit Klassen versehenen div-Elemente auch jeweils als section auszuzeichnen und warum stehen die Navigationslisten nicht innerhalb von nav?

   Kommentar von Thomas Meinike - 6. Oktober 2009 um 19:48

2. 2.
   

   Wäre es nicht konsequenter, die mit Klassen versehenen div-Elemente auch jeweils als section auszuzeichnen und warum stehen die Navigationslisten nicht innerhalb von nav?

   Zur section: Die Spezifikation sagt (unter anderem), section sei kein Element, welches zur bequemeren Gestaltung etc. zu benutzen sei. Des weiteren nennt sie Kapitel eines längeren Textes als Anwendungsbeispiel. Ich persönlich finde, der durchschnittliche Weblogbeitrag rechtfertigt keine Aufteilung in Kapitel bzw. sections, aber das ist sicherlich diskussionfähig. Zudem sollte eine jede section eine eigene Überschrift haben — auch das ist in vielen Blogeinträge nicht gegeben.

   Wenn Du mit Navigationslisten hier die Archivlisten meinst — auch darüber kann man sicherlich streiten (ebenso könnte man z.B. diskutieren, ob ol nicht sinnvoller als ul sei). Die Spezifikation betont, dass nav für "major", also "wichtigere" Navigationslinks zu verwenden sei. Ich finde (subjektiv), man verwässert den Nutzen des nav-Elementes, wenn man es hier für die Archivlisten ebenfalls nav verwendet, da man dann insgesamt vier nav-Elemente auf der Archivseite hätte.

   Kommentar von Matthias Mees - 6. Oktober 2009 um 21:35

3. 3.
   

   @Matthias: Aha, auch bei HTML5 Doctor wurde hinsichtlich section vs. div für den Content-Bereich nachgebessert.

   Ich wusste noch nicht, dass sich die Interpretation von nav in Richtung "major" geändert hat. Vor wenigen Tagen galt noch "The nav element represents a section of a document that links to other documents or parts within the document itself; that is, a section of navigation links." Also IMHO durchaus im Sinne mehrerer nav-Elemente.

   Kommentar von Thomas Meinike - 6. Oktober 2009 um 22:04

4. 4.
   

   Für die Archiv-Navigation hätte ich "menu" statt "ul" verwendet. Noch treffender wäre m. E. – zumindest im Bereich "Nach Jahren" – das "dir"-Element gewesen, aber das gibt's ja nicht mehr. In die Links selbst könnte man sowas wie rel="archive" setzen.

   Ich finde auch die "header"-Schachteln überflüssig, da sie lediglich eine weitere Schachtel ("h1") enthalten – oder anders gesagt: "header" enthält einen Header (siehe das "h" in "h1").

   André

   Kommentar von André - 12. Oktober 2009 um 22:13

5. 5.
   

   Ich bin gerade dabei mich mich einzuarbeiten und die Entwicklungen der 5er liest sich sehr spannend und vielversprechend. Werde auch die folgenden Teile sehr genau studieren und hoffe, dass ich bei Fragen einfach mal ne Mail schicken kann. Gruß,
   Klaus

   Kommentar von Klaus - 13. Oktober 2009 um 20:41

6. 6.
   

   warum du das element um das element gespannt hast erschließt sich mir auch nicht ganz?

   nur so am rande:
   wer lässt sich so unsinnige notationen wie – pubdate="pubdate" – einfallen, warum nicht – pubdate="" ? aber naja damit muss man sich abfinden..

   Kommentar von markus - 15. Oktober 2009 um 18:20

Kommentar-Feed für diesen Beitrag

Die Kommentarfunktion ist zur Zeit leider deaktiviert.