Standard Aufbau

Es gibt ein paar wenige Standard-Strukturen, welche für eine Webseite genutzt werden. Dabei geht es mir weniger um das Layout oder Design, sondern um die Bereiche und Elemente welche eine Seite beinhalten "muss" oder sollte. Ein Bild ersetzt tausend Worte, so ungefähr stellen wir uns oft den Aufbau einer komplexen Webseite vor.

Webseiten-Struktur

Welche Elemente können wir zusammenfassend beschreiben:

  • Kopfbereich (header)
  • Navigation (nav)
  • Inhalt (main, section, article)
  • Fußzeile (footer)
  • Nebenfelder (aside)

Für diese ganzen Bereiche, gibt es in HTML5 auch eigene Befehle, welche diese zusammenfassen. So zum Beispiel sieht die Webseite von MDNetz aus (ohne Kopf und Metas).

<body>

   <header>
      Logo und Buttons
   </header>

   <nav>
      Menü oben (Desktop)
   </nav>

   <nav>
      Menü links (Desktop)
   </nav>

   <nav>
      Menü Handy
   </nav>

   <main>
      Inhalt der Seite
   </main>

   <footer>
      Impressum, Suche, Blättern
   </footer>

   <aside>
      Google Werbung
   </aside>

</body>

Das Bild oben zeigt allerdings eine Struktur, welche schon designed wurde, also wo ein Layout mit Hilfe von CSS hinzgefügt wurde. Wenn wir den reinen HTML-Code ausführen, haben wir einfach nur ein paar Worte untereinander stehen. Es ist aber wichtig, diese semantische Zuordnung zu erstellen, und ist als Vorbereitung für das Layout notwendig.