Strukturierung von Dokumenten

Webseiten können und werden ziemlich unterschiedlich aussehen, aber sie neigen dazu, ähnliche Standardkomponenten zu teilen, es sei denn, die Seite zeigt ein Vollbildvideo oder -spiel, ist Teil eines Kunstprojekts oder ist einfach schlecht strukturiert:

Header:

Üblicherweise ein großer Streifen über der Seite mit einer großen Überschrift, Logo und möglicherweise einem Slogan. Diese bleibt in der Regel von einer Seite einer Website zur anderen gleich.

Navigationsleiste:

Links zu den Hauptbereichen der Website; normalerweise dargestellt durch Menüschaltflächen, Links oder Registerkarten. Wie der Header bleibt auch dieser Inhalt in der Regel von einer Webseite zur anderen konsistent — eine inkonsistente Navigation auf Ihrer Website führt nur zu verwirrten, frustrierten Nutzern. Viele Webdesigner betrachten die Navigationsleiste als Teil des Headers und nicht als eine eigene Komponente, aber das ist keine Pflicht; tatsächlich argumentieren einige auch, dass es für die Barrierefreiheit besser ist, wenn die beiden getrennt sind, da Screenreader die beiden Funktionen besser lesen können, wenn sie getrennt sind.

Hauptinhalt:

Ein großer Bereich in der Mitte, der den größten Teil des einzigartigen Inhalts einer gegebenen Webseite enthält, zum Beispiel das Video, das Sie sehen möchten, oder die Hauptgeschichte, die Sie lesen, oder die Karte, die Sie anzeigen möchten, oder die Nachrichtenüberschriften usw. Dies ist der einzige Teil der Website, der definitiv von Seite zu Seite variieren wird!

Seitenleiste:

Einige periphere Informationen, Links, Zitate, Anzeigen usw. Normalerweise passen diese zum Hauptinhalt (zum Beispiel könnte die Seitenleiste auf einer Nachrichtenartikel-Seite die Biografie des Autors oder Links zu verwandten Artikeln enthalten), aber es gibt auch Fälle, in denen Sie einige wiederkehrende Elemente wie ein sekundäres Navigationssystem finden.

Footer:

Ein Streifen am unteren Rand der Seite, der im Allgemeinen Kleingedrucktes, Urheberrechtshinweise oder Kontaktinformationen enthält. Es ist ein Ort, um häufige Informationen zu platzieren (wie der Header), aber normalerweise sind diese Informationen nicht kritisch oder zweitrangig für die Website selbst. Der Footer wird manchmal auch aus SEO-Zwecken genutzt, indem Links für den schnellen Zugriff auf beliebten Inhalt bereitgestellt werden.

Eine "typische Website" könnte folgendermaßen strukturiert sein:

Das oben gezeigte Beispiel ist nicht hübsch, aber es eignet sich perfekt zur Veranschaulichung eines typischen Website-Layout-Beispiels. Einige Websites haben mehr Spalten, andere sind wesentlich komplexer, aber Sie verstehen das Prinzip. Mit dem richtigen CSS könnten Sie fast jedes Element verwenden, um die verschiedenen Abschnitte zu umwickeln und sie so darzustellen, wie Sie es wollen. Wie zuvor besprochen, müssen wir jedoch die Semantik respektieren und das richtige Element für den richtigen Zweck verwenden.

Das liegt daran, dass visuelle Eindrücke nicht die ganze Geschichte erzählen. Wir nutzen Farbe und Schriftgröße, um sehenden Nutzern die nützlichsten Teile des Inhalts zu zeigen, wie das Navigationsmenü und verwandte Links, aber was ist beispielsweise mit sehbehinderten Menschen, die Konzepte wie "rosa" und "große Schrift" möglicherweise nicht nützlich finden?

In Ihrem HTML-Code können Sie Inhaltsabschnitte basierend auf ihrer Funktionalität kennzeichnen — Sie können Elemente verwenden, die die oben beschriebenen Inhaltsabschnitte eindeutig darstellen, und unterstützende Technologien wie Screenreader können diese Elemente erkennen und bei Aufgaben wie "Finde die Hauptnavigation" oder "Finde den Hauptinhalt" helfen. Wie wir bereits früher im Kurs erwähnt haben, gibt es eine Reihe von Konsequenzen, wenn man nicht die richtige Elementstruktur und Semantik für den richtigen Zweck verwendet.

Um eine solche semantische Kennzeichnung zu implementieren, stellt HTML spezielle Tags zur Verfügung, die Sie zur Darstellung solcher Abschnitte verwenden können, zum Beispiel:

• Header: <header>.
• Navigationsleiste: <nav>.
• Hauptinhalt: <main>, mit verschiedenen Inhaltsunterabschnitten, die durch <article>, <section>, und <div>-Elemente dargestellt werden.
• Seitenleiste: <aside>; oft innerhalb von <main> platziert.
• Footer: <footer>.

Das oben gezeigte Beispiel wird durch den folgenden Code dargestellt (Sie können das Beispiel auch in unserem GitHub-Repository finden). Wir möchten, dass Sie die Liste unten anschauen, um zu sehen, welche Teile jede Sektion der visuellen Ausgabe ausmachen.

<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />

    <title>My page title</title>
    <link
      href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Sonsie+One"
      rel="stylesheet" />
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <!-- The main header used across all the pages of our website -->

    <header>
      <h1>Header</h1>
    </header>

    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Our team</a></li>
        <li><a href="#">Projects</a></li>
        <li><a href="#">Contact</a></li>
      </ul>

      <!-- A Search form: another common non-linear
           way to navigate through a site. -->

      <form>
        <input type="search" name="q" placeholder="Search query" />
        <input type="submit" value="Go!" />
      </form>
    </nav>

    <!-- Our page's main content -->
    <main>
      <!-- An article -->
      <article>
        <h2>Article heading</h2>

        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Donec a diam
          lectus. Set sit amet ipsum mauris. Maecenas congue ligula as quam
          viverra nec consectetur ant hendrerit. Donec et mollis dolor. Praesent
          et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt
          congue enim, ut porta lorem lacinia consectetur.
        </p>

        <section>
          <h3>Subsection</h3>

          <p>
            Donec ut librero sed accu vehicula ultricies a non tortor. Lorem
            ipsum dolor sit amet, consectetur adipisicing elit. Aenean ut
            gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id
            dolor.
          </p>

          <p>
            Pelientesque auctor nisi id magna consequat sagittis. Curabitur
            dapibus, enim sit amet elit pharetra tincidunt feugiat nist
            imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed
            odio eros.
          </p>
        </section>

        <section>
          <h3>Another subsection</h3>

          <p>
            Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum
            soclis natoque penatibus et manis dis parturient montes, nascetur
            ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at
            sem facilisis semper ac in est.
          </p>

          <p>
            Vivamus fermentum semper porta. Nunc diam velit, adipscing ut
            tristique vitae sagittis vel odio. Maecenas convallis ullamcorper
            ultricied. Curabitur ornare, ligula semper consectetur sagittis,
            nisi diam iaculis velit, is fringille sem nunc vet mi.
          </p>
        </section>
      </article>

      <!-- the aside content can also be nested within the main content -->
      <aside>
        <h2>Related</h2>

        <ul>
          <li><a href="#">Oh I do like to be beside the seaside</a></li>
          <li><a href="#">Oh I do like to be beside the sea</a></li>
          <li><a href="#">Although in the North of England</a></li>
          <li><a href="#">It never stops raining</a></li>
          <li><a href="#">Oh well…</a></li>
        </ul>
      </aside>
    </main>

    <!-- The footer that is used across all the pages of our website -->

    <footer>
      <p>©Copyright 2050 by nobody. All rights reversed.</p>
    </footer>
  </body>
</html>

Nehmen Sie sich Zeit, um den Code zu durchschauen und ihn zu verstehen — die Kommentare im Code sollten Ihnen ebenfalls helfen, ihn zu verstehen. Wir bitten Sie nicht, viel mehr in diesem Artikel zu tun, denn der Schlüssel zum Verständnis der Dokumentlayout ist das Schreiben einer soliden HTML-Struktur und dann das Layout mit CSS. Das warten wir ab, bis Sie beginnen, das CSS-Layout als Teil des CSS-Themas zu studieren.

Es ist gut, die allgemeine Bedeutung aller HTML-Abschnitts-Elemente im Detail zu verstehen — dies ist etwas, woran Sie allmählich arbeiten werden, wenn Sie anfangen, mehr Erfahrung mit der Webentwicklung zu sammeln. Sie können viele Details finden, indem Sie unser HTML-Element-Referenzdokument lesen. Für jetzt sind dies die Hauptdefinitionen, die Sie zu verstehen versuchen sollten:

• <main> ist für Inhalte, die einzigartig für diese Seite sind. Verwenden Sie <main> nur einmal pro Seite und platzieren Sie es direkt innerhalb von <body>. Idealerweise sollte es nicht in andere Elemente verschachtelt sein.
• <article> schließt einen Block verwandten Inhalts ein, der alleine ohne den Rest der Seite sinnvoll ist (zum Beispiel ein einzelner Blogbeitrag).
• <section> ist ähnlich wie <article>, dient jedoch mehr zum Gruppieren eines einzelnen Teils der Seite, der ein einzelnes Funktionsstück ausmacht (wie eine Minikarte oder eine Sammlung von Artikelüberschriften und -zusammenfassungen) oder ein Thema. Es gilt als beste Praxis, jede Sektion mit einer Überschrift zu beginnen; beachten Sie auch, dass Sie <article>s in verschiedene <section>s aufteilen können oder <section>s in verschiedene <article>s, je nach Kontext.
• <aside> enthält Inhalte, die nicht direkt mit dem Hauptinhalt in Verbindung stehen, jedoch zusätzliche indirekt damit verwandte Informationen liefern können (Glossareinträge, Autorenbiografie, verwandte Links usw.).
• <header> repräsentiert eine Gruppe von einleitenden Inhalten. Wenn es ein Kind von <body> ist, definiert es den globalen Header einer Webseite. Wenn es ein Kind von <article> oder <section> ist, definiert es einen spezifischen Header für diesen Abschnitt (versuchen Sie nicht, dies mit Titeln und Überschriften zu verwechseln).
• <nav> enthält die Hauptnavigationsfunktionalität für die Seite. Sekundäre Links usw. würden nicht in die Navigation passen.
• <footer> repräsentiert eine Gruppe von Endinhalten für eine Seite.

Jedes der oben genannten Elemente kann angeklickt werden, um den entsprechenden Artikel im Bereich "HTML-Element-Referenz" zu lesen, der mehr Details über jedes einzelne bietet.

Manchmal stoßen Sie auf Situationen, in denen Sie kein ideales semantisches Element finden, um einige Elemente zusammenzufassen oder einige Inhalte zu umhüllen. Manchmal möchten Sie einfach eine Reihe von Elementen gruppieren, um sie als eine einzelne Einheit mit etwas CSS oder JavaScript zu beeinflussen. Für solche Fälle bietet HTML die <div>- und <span>-Elemente. Sie sollten diese vorzugsweise mit einem geeigneten class-Attribut verwenden, um ihnen eine Art Bezeichnung zu geben, damit sie leicht gezielt werden können.

<span> ist ein Inline-Element ohne semantischen Wert, das Sie nur dann verwenden sollten, wenn Sie kein besseres semantisches Textelement finden, um Ihren Inhalt zu umhüllen, oder wenn Sie keine spezifische Bedeutung hinzufügen möchten. Zum Beispiel:

<p>
  The King walked drunkenly back to his room at 01:00, the beer doing nothing to
  aid him as he staggered through the door.
  <span class="editor-note">
    [Editor's note: At this point in the play, the lights should be down low].
  </span>
</p>

In diesem Fall ist die Anmerkung des Redakteurs lediglich dazu gedacht, zusätzliche Anweisungen für den Regisseur des Stücks zu geben. Sie soll keine zusätzliche semantische Bedeutung haben. Für sehende Nutzer könnte CSS verwendet werden, um die Anmerkung leicht vom Haupttext zu distanzieren.

<div> ist ein Blockelement ohne semantischen Wert, das Sie nur verwenden sollten, wenn Sie kein besseres semantisches Blockelement zur Verfügung haben oder keine spezifische Bedeutung hinzufügen möchten. Stellen Sie sich zum Beispiel ein Einkaufskorb-Widget vor, das Sie jederzeit während Ihres Besuchs auf einer E-Commerce-Website aufrufen können:

<div class="shopping-cart">
  <h2>Shopping cart</h2>
  <ul>
    <li>
      <p>
        <a href=""><strong>Silver earrings</strong></a>: $99.95.
      </p>
      <img src="../products/3333-0985/thumb.png" alt="Silver earrings" />
    </li>
    <li>…</li>
  </ul>
  <p>Total cost: $237.89</p>
</div>

Dies ist eigentlich kein <aside>, da es nicht unbedingt mit dem Hauptinhalt der Seite zusammenhängt (Sie wollen, dass es von überall aus einsehbar ist). Es rechtfertigt auch nicht wirklich die Verwendung eines <section>, da es nicht Teil des Hauptinhalts der Seite ist. Ein <div> ist in diesem Fall in Ordnung. Wir haben eine Überschrift als Wegweiser hinzugefügt, um Benutzer von Bildschirmlesern bei der Suche zu unterstützen.

Zwei Elemente, die Sie gelegentlich verwenden und kennen sollten, sind <br> und <hr>.

<br>: das Zeilenumbruch-Element

<br> erzeugt einen Zeilenumbruch in einem Absatz; es ist die einzige Möglichkeit, eine feste Struktur in einer Situation zu erzwingen, in der Sie eine Reihe von festen kurzen Zeilen wünschen, wie in einer Postadresse oder einem Gedicht. Zum Beispiel:

<p>
  There once was a man named O'Dell<br />
  Who loved to write HTML<br />
  But his structure was bad, his semantics were sad<br />
  and his markup didn't read very well.
</p>

Ohne die <br>-Elemente würde der Absatz nur als eine lange Zeile gerendert werden (wie wir bereits zuvor im Kurs gesagt haben, ignoriert HTML die meiste Leerzeichen); mit <br>-Elementen im Code wird das Markup wie folgt gerendert:

<hr>: das thematische Umbruch-Element

<hr>-Elemente erzeugen eine horizontale Linie im Dokument, die einen thematischen Wechsel im Text anzeigt (wie einen Themen- oder Szenenwechsel). Visuell sieht es einfach wie eine horizontale Linie aus. Als Beispiel:

<p>
  Ron was backed into a corner by the marauding netherbeasts. Scared, but
  determined to protect his friends, he raised his wand and prepared to do
  battle, hoping that his distress call had made it through.
</p>
<hr />
<p>
  Meanwhile, Harry was sitting at home, staring at his royalty statement and
  pondering when the next spin off series would come out, when an enchanted
  distress letter flew through his window and landed in his lap. He read it
  hazily and sighed; "better get back to work then", he mused.
</p>

Würde so gerendert werden:

Der nächste Schritt nach der Planung der Struktur einer einzelnen Webseite ist die Planung der Struktur einer gesamten Website mit mehreren Seiten, einschließlich der Frage, wie sie angeordnet sein und miteinander verlinken sollen, um die bestmögliche Benutzererfahrung zu gewährleisten. Dies nennt man Informationsarchitektur.

Bei einer großen, komplexen Website kann viel Planung in diesen Prozess einfließen, aber für eine einfache Website mit ein paar Seiten kann es eine schnelle und unterhaltsame Übung sein.

Der Prozess könnte folgendermaßen aussehen:

1. Sie haben einige Elemente, die den meisten (wenn nicht allen) Seiten gemeinsam sind — wie das Navigationsmenü und den Footer-Inhalt. Wenn Ihre Website beispielsweise für ein Unternehmen ist, ist es eine gute Idee, Ihre Kontaktinformationen im Footer auf jeder Seite verfügbar zu haben. Notieren Sie, was auf jeder Seite gleich sein soll. Zum Beispiel:

   • Header:
     • Titel und Logo
     • Sprachauswahl des Standorts
   • Navigationsmenü
   • Footer:
     • Urheberrechtshinweis
     • Link zu den Allgemeinen Geschäftsbedingungen, Kontaktdaten und Barrierefreiheitsrichtlinien

2. Als Nächstes zeichnen Sie eine grobe Skizze, wie Sie die Struktur jeder Seite aussehen lassen möchten (es könnte wie oben unsere einfache Website aussehen). Notieren Sie, was jeder Block sein wird.

3. Jetzt brainstormen Sie alle anderen (nicht auf jeder Seite gleichen) Inhalte, die Sie auf Ihrer Website haben möchten. Zum Beispiel:

   • Flüge
   • Unterkünfte
   • Transport
   • Dinge, die man tun kann
   • Sonderangebote
   • Beliebte Urlaubsangebote, zum Beispiel Wintersonne, Skifahren
   • Suchergebnisse
   • Bewertungen
   • Visa-/Einreiseanforderungen
   • Währung
   • Sprachen und Kultur
   • Urlaubsbuchung

4. Sortieren Sie nun alle diese Inhalte in Gruppen, um eine Vorstellung davon zu bekommen, welche Teile zusammen auf verschiedenen Seiten leben könnten. Dies ist sehr ähnlich zu einer Technik, die Kartensortierung genannt wird.

   • Suche
     • Flüge
     • Unterkünfte
     • Transport
     • Dinge, die man tun kann
   • Sonderangebote
     • Beliebte Urlaubsangebote
     • Wintersonne
     • Skifahren
   • Suchergebnisse
     • Bewertungen
     • Länderspezifische Infos
       • Visa-/Einreiseanforderungen
       • Währung
       • Sprachen und Kultur
   • Urlaubsbuchung

5. Versuchen Sie jetzt, eine grobe Sitemap zu skizzieren — haben Sie einen Kasten für jede Seite auf Ihrer Website und ziehen Sie Linien, um den typischen Workflow zwischen den Seiten zu zeigen. Die Startseite wird wahrscheinlich oben oder in der Mitte sein und mit den meisten, wenn nicht allen anderen verlinken. Die meisten Seiten in einer kleinen Website sollten über die Hauptnavigation verfügbar sein, obwohl es Ausnahmen gibt. Sie könnten auch Notizen darüber machen, wie Dinge präsentiert werden könnten.

Versuchen Sie, die oben beschriebene Übung für eine Website Ihrer eigenen Kreation durchzuführen. Worüber möchten Sie eine Website erstellen? Als erweitertes Ziel verwenden Sie das bisher erworbene HTML-Wissen, um einige der Seiten auf der Website zu erstellen. Sie könnten unsere Grundlegende HTML-Vorlage als Ausgangspunkt verwenden.

An diesem Punkt sollten Sie eine bessere Vorstellung davon haben, wie eine Webseite/Website strukturiert werden kann. Im nächsten Artikel dieses Moduls werden wir uns einige fortgeschrittene Texttechniken ansehen.

• Zurück
• Übersicht: Strukturierung von Inhalten mit HTML
• Weiter