Webkrauts

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 II

Im ersten Teil ging es um den grundsätzlichen Aufbau, im zweiten Teil kümmert sich Matthias Mees nun um die Inhalte. Es geht um den Aufbau einer Startseite, einer Artikel-Ansicht und eines Archivs. Noch einmal mit konkreten Beispielen zum Abschluss unserer HTML5-Reihe.

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.