Strukturierung von Dokumenten

Webseiten können und werden recht 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:

Normalerweise ein großer Streifen oben mit einer großen Überschrift, einem Logo und möglicherweise einem Slogan. Dies bleibt normalerweise von einer Seite einer Website zur anderen gleich.

Navigationsleiste:

Links zu den Hauptbereichen der Website; in der Regel durch Menütasten, Links oder Registerkarten dargestellt. Wie der Header bleibt dieser Inhalt normalerweise von einer Webseite zur anderen konsistent — eine inkonsistente Navigation auf Ihrer Website führt nur zu verwirrten, frustrierten Benutzern. Viele Webdesigner betrachten die Navigationsleiste als Teil des Headers statt als ein einzelnes Element, aber das ist keine Voraussetzung; einige argumentieren sogar, dass es für Barrierefreiheit besser ist, die beiden zu trennen, da Screenreader die beiden Funktionen besser lesen können, wenn sie getrennt sind.

Hauptinhalt:

Ein großer Bereich in der Mitte, der den meisten einzigartigen Inhalt einer bestimmten Webseite enthält, z. B. das Video, das Sie ansehen 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 variiert!

Sidebar:

Einige periphere Informationen, Links, Zitate, Anzeigen usw. Gewöhnlich ist dies im Kontext zu dem, was im Hauptinhalt enthalten ist (zum Beispiel könnte auf einer Nachrichtenartikel-Seite die Sidebar 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 in der Regel Kleingedrucktes, Copyright-Hinweise oder Kontaktinformationen enthält. Es ist ein Ort, um allgemeine Informationen (wie den Header) abzulegen, aber normalerweise sind diese Informationen nicht kritisch oder nebensächlich zur Website selbst. Der Footer wird manchmal auch für SEO-Zwecke verwendet, indem Links für den schnellen Zugriff auf beliebte Inhalte bereitgestellt werden.

Eine "typische Website" könnte in etwa so strukturiert sein:

Das gezeigte Beispiel ist zwar nicht schön, aber es eignet sich hervorragend, um ein typisches Website-Layout zu veranschaulichen. Einige Websites haben mehr Spalten, einige sind viel komplexer, aber Sie verstehen das Prinzip. Mit dem richtigen CSS könnten Sie fast beliebige Elemente verwenden, um die verschiedenen Abschnitte zu umrahmen und sie so gestalten, wie Sie es möchten. Wie bereits besprochen, müssen wir jedoch die Semantik respektieren und das richtige Element für die richtige Aufgabe verwenden.

Dies liegt daran, dass visuelle Merkmale nicht die ganze Geschichte erzählen. Wir verwenden Farbe und Schriftgröße, um die Aufmerksamkeit sehender Benutzer auf die nützlichsten Teile des Inhalts zu lenken, wie das Navigationsmenü und verwandte Links. Aber was ist zum Beispiel mit sehbehinderten Menschen, die möglicherweise Konzepte wie "rosa" und "große Schrift" nicht sehr nützlich finden?

In Ihrem HTML-Code können Sie Abschnitte von Inhalten basierend auf ihrer Funktionalität markieren — Sie können Elemente verwenden, die die oben beschriebenen Inhaltsabschnitte unmissverständlich darstellen, und Hilfstechnologien wie Screenreader können diese Elemente erkennen und bei Aufgaben wie "die Hauptnavigation finden" oder "den Hauptinhalt finden" helfen. Wie wir bereits früher im Kurs erwähnt haben, gibt es eine Reihe von Konsequenzen bei der nicht korrekten Verwendung der Elementstruktur und Semantik für die richtige Aufgabe.

Um eine solche semantische Markierung zu implementieren, bietet HTML spezielle Tags, die Sie verwenden können, um solche Abschnitte darzustellen, beispielsweise:

• Header: <header>.
• Navigationsleiste: <nav>.
• Hauptinhalt: <main>, mit verschiedenen Inhaltsunterabschnitten dargestellt durch <article>, <section> und <div>-Elemente.
• Sidebar: <aside>; häufig in <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 sich die Auflistung unten ansehen, um zu sehen, welche Teile welchen Abschnitt 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, den Code zu überprüfen und zu verstehen — die Kommentare im Code sollten Ihnen auch helfen, ihn zu verstehen. Wir bitten Sie in diesem Artikel nicht um viel mehr, denn der Schlüssel zum Verständnis des Dokumentenlayouts besteht darin, eine solide HTML-Struktur zu schreiben und sie dann mit CSS zu gestalten. Wir warten darauf, dass Sie beginnen, CSS-Layout im Rahmen des CSS-Themas zu studieren.

Es ist gut, die Gesamtbedeutung aller HTML-Abschnittselemente im Detail zu verstehen — das ist etwas, woran Sie allmählich arbeiten werden, wenn Sie mehr Erfahrung mit der Webentwicklung sammeln. Viele Details finden Sie in unserem HTML-Element-Referenz. Für jetzt sind dies die Hauptdefinitionen, die Sie versuchen sollten zu verstehen:

• <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 innerhalb anderer Elemente verschachtelt sein.
• <article> umschließt einen Block verwandten Inhalts, der ohne den Rest der Seite in sich selbst Sinn ergibt (zum Beispiel ein einzelner Blog-Post).
• <section> ist ähnlich wie <article>, aber es ist mehr dafür gedacht, einen einzelnen Teil der Seite zu gruppieren, der ein einzelnes Stück Funktionalität (wie eine Mini-Karte oder eine Menge von Artikelüberschriften und Zusammenfassungen) oder ein Thema darstellt. Es wird als Best Practice angesehen, jede Sektion mit einer Überschrift zu beginnen; beachten Sie auch, dass Sie <article> in verschiedene <section>s oder <section>s in verschiedene <article>s aufteilen können, je nach Kontext.
• <aside> enthält Inhalte, die nicht direkt mit dem Hauptinhalt in Zusammenhang stehen, aber zusätzliche Informationen liefern können, die in gewisser Weise damit zusammenhängen (Glossareinträge, Autorenbiografie, verwandte Links usw.).
• <header> steht für eine Gruppe einleitenden Inhalts. Wenn es ein Kind von <body> ist, definiert es den globalen Header einer Webseite, aber wenn es ein Kind eines <article> oder <section> ist, definiert es einen spezifischen Header für diesen Abschnitt (versuchen Sie, dies nicht mit Titeln und Überschriften zu verwechseln).
• <nav> enthält die Hauptnavigationsfunktionalität für die Seite. Sekundäre Links usw. würden nicht in der Navigation erscheinen.
• <footer> steht für eine Gruppe von Endinhalten für eine Seite.

Jedes der oben genannten Elemente kann angeklickt werden, um den entsprechenden Artikel im Abschnitt "HTML-Element-Referenz" zu lesen, der weitere Details zu jedem bietet.

Manchmal stoßen Sie auf eine Situation, in der Sie kein ideales semantisches Element finden können, um einige Elemente zusammenzufassen oder Inhalt zu umhüllen. Manchmal möchten Sie einfach eine Gruppe von Elementen zusammenfassen, um sie alle 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 Label zu geben, damit sie leicht angezielt werden können.

<span> ist ein Inline-nicht-semantisches Element, das Sie nur verwenden sollten, wenn Sie kein besseres semantisches Textelement zum Umhüllen Ihrer Inhalte finden können oder 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 soll die Notiz des Herausgebers lediglich zusätzliche Anweisungen für den Regisseur des Stücks geben; sie soll keine zusätzlichen semantischen Bedeutungen haben. Für sehende Benutzer würde CSS möglicherweise verwendet, um die Notiz etwas vom Haupttext zu distanzieren.

<div> ist ein Blocklevel-nicht-semantisches Element, das Sie nur verwenden sollten, wenn Ihnen kein besseres semantisches Blockelement einfällt oder Sie keine spezifische Bedeutung hinzufügen möchten. Stellen Sie sich zum Beispiel ein Einkaufswagen-Widget vor, das Sie jederzeit während Ihrer Zeit auf einer E-Commerce-Site 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 wirklich kein <aside>, da es nicht notwendigerweise mit dem Hauptinhalt der Seite in Beziehung steht (Sie möchten es von überall aus einsehbar haben). Es rechtfertigt auch nicht unbedingt die Verwendung eines <section>, da es nicht Teil des Hauptinhalts der Seite ist. Ein <div> ist in diesem Fall völlig in Ordnung. Wir haben eine Überschrift als Wegweiser eingefügt, um Screenreader-Nutzern zu helfen, es zu finden.

Zwei Elemente, die Sie gelegentlich verwenden werden und über die Sie Bescheid wissen möchten, sind <br> und <hr>.

<br>: das Zeilenumbruch-Element

<br> erstellt 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 haben möchten, 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 einfach in einer langen Zeile dargestellt werden (wie wir bereits früher im Kurs gesagt haben, ignoriert HTML den meisten Whitespace); mit <br>-Elementen im Code wird das Markup folgendermaßen angezeigt:

<hr>: das thematische Trennelement

<hr>-Elemente erstellen eine horizontale Linie im Dokument, die einen thematischen Wechsel im Text kennzeichnet (wie ein 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 angezeigt werden:

Der nächste Schritt nach der Planung der Struktur einer einzelnen Webseite besteht darin, die Struktur einer ganzen mehrseitigen Website zu planen, einschließlich wie sie angeordnet und verbunden werden sollen, um die bestmögliche Benutzererfahrung zu gewährleisten. Dies wird als Informationsarchitektur bezeichnet.

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

Der Prozess könnte so aussehen:

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

   • Header:
     • Titel und Logo
     • Sprache der Seite wählen
   • Navigationsmenü
   • Footer:
     • Copyright-Hinweis
     • Link zu den Geschäftsbedingungen, Kontaktdaten und Barrierefreiheitspolitik

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

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

   • Flüge
   • Unterkünfte
   • Transport
   • Aktivitäten
   • Sonderangebote
   • Beliebte Reisepakete, z. B. Wintersonne, Skifahren
   • Suchergebnisse
   • Bewertungen
   • Visa-/Einreisebestimmungen
   • Währung
   • Sprachen und Kultur
   • Urlaubsbuchungen

4. Als nächstes versuchen Sie, all diese Inhalte in Gruppen zu sortieren, um Ihnen eine Vorstellung davon zu geben, welche Teile auf verschiedenen Seiten zusammenleben könnten. Das ist sehr ähnlich zu einer Technik namens Card Sorting.

   • Suche
     • Flüge
     • Unterkünfte
     • Transport
     • Aktivitäten
   • Sonderangebote
     • Beliebte Urlaubsreisen
     • Wintersonne
     • Skifahren
   • Suchergebnisse
     • Bewertungen
     • Länderspezifische Infos
       • Visa-/Einreisebestimmungen
       • Währung
       • Sprachen und Kultur
   • Urlaubsbuchungen

5. Jetzt versuchen Sie, ein grobes Sitemap zu skizzieren — haben Sie für jede Seite auf Ihrer Website ein Kästchen 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 verlinkt sein. Die meisten Seiten auf einer kleinen Website sollten über die Hauptnavigation verfügbar sein, obwohl es Ausnahmen gibt. Möglicherweise möchten Sie auch Notizen darüber machen, wie Dinge präsentiert werden könnten.

Versuchen Sie, die obige Übung für eine Website Ihrer eigenen Kreation auszuführen. Worüber möchten Sie eine Website erstellen? Als Stretch-Goal verwenden Sie das bisher erworbene HTML-Wissen, um einige der Seiten auf der Site zu erstellen. Sie könnten unser grundlegendes HTML-Template als Ausgangspunkt verwenden.

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

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