Hauptmenü

Untermenü

HTML - Strukturierung - Inhaltsbeispiele

1. Der Grundaufbau

Hier habe ich euch ja schon gezeigt, wie der aussehen könnte. Man unterteilt seine Seite in die gewünschten Abschnitte und packt die in <div>-Elemente. Sie sind also so eine Art von Kästen, wo man je nach Inhalt etwas aufbewahrt. Man kann aber noch einen Schritt weitergehen. <div>-Tags werden nur dann genutzt, wenn es keine semantische Alternative dazu gibt.

2. Eine Navigation

... baut man eigentlich immer als Liste auf. Wenn möglich, sogar als verschachtelte Liste, um die Zugehörigkeit und Struktur deutlich zu machen.


<div class="navi">
  <ul>
    <li><a href="...">Bla</a></li>
    <li>
      <a href="...">Blubb</a>
      <ul>
        <li><a href="...">Blubber</a></li>
        <li><a href="...">Laber</a></li>
        <li><a href="...">Jodelblah</a></li>
      </ul>
    </li>
  </ul>
</div>

Leider ist das nicht immer praktikabel. So gibt es zum Beispiel bei mir eine strikte Trennung zwischen der Hauptnavigation (also alles von "Einführung" bis "Allgemeines") und den jeweiligen Unterpunkten. Gut, in dem Fall fordert das Design seinen Preis, aber das ist in Ordnung. Man kann das zwar per CSS korrigieren, aber der Aufwand ist saumäßig hoch. Also lasst es in so einem Fall bleiben.

3. Inhalte

Hier könnt ihr sehen, wie die einzelnen Texte entsprechend ihrer inhaltlichen Bedeutung ausgezeichnet werden. Gut, mit dem Inhalt ist das hier so eine Sache, aber ich denke, ihr wisst, worum es geht.


<div class="content">
  <h1>Überschrift</h1>
  <p>
    Bla bla blalaberschwallich bin Zensursulajodelblah
  </p>
  <ul>
    <li>Internet reglementieren</li>
    <li>Bürger entmündigen</li>
    <li>Wir wissenwas am Besten istihr nicht</li>
  </ul>
  <h2>Zwiti</h2>
  <p>
    Und noch mehr bla blubb und rumsülz.
  </p>
  <h3>Hallo Herr Schäuble</h3>
  <p>
    Wenn sie das lesen könnensind sie zu nahe.
  </p>
</div>

4. Formulare

Da dies etwas schwieriger ist, habe ich vor einiger Zeit dazu mal ein Tutorial verfasst. Die blutigen Anfänger können es sich ruhig mal ansehen, allerdings empfehle ich vorher noch die Theorie zu CSS, bevor ihr loslegt.

zurück zum vorherigen Abschnitt