Strukturierung von Dokumenten

Webseiten können recht unterschiedlich aussehen, aber sie neigen dazu, ähnliche Standardkomponenten zu teilen, es sei denn, die Seite zeigt ein Vollbild-Video oder Spiel, ist Teil eines Kunstprojekts oder ist einfach schlecht strukturiert:

Kopfzeile:

Normalerweise ein großer Streifen am oberen Rand mit einer großen Überschrift, einem Logo und eventuell einem Slogan. Diese bleibt normalerweise von einer Seite zur anderen eines Webauftritts gleich.

Navigationsleiste:

Links zu den Hauptbereichen der Seite; in der Regel durch Menü-Schaltflächen, Links oder Tabs dargestellt. Diese Inhalte bleiben normalerweise ebenfalls von einer Webseite zur anderen konsistent – eine inkonsistente Navigation auf Ihrer Webseite führt nur zu verwirrten, frustrierten Benutzern. Viele Webdesigner betrachten die Navigationsleiste als Teil der Kopfzeile anstatt als ein separates Element, aber das ist keine Pflicht; tatsächlich argumentieren einige auch, dass es besser für die Zugänglichkeit ist, wenn die beiden getrennt sind, da Bildschirmleseprogramme die beiden Funktionen besser erfassen können, wenn sie getrennt sind.

Hauptinhalt:

Ein großer Bereich in der Mitte, der den größten Teil des einzigartigen Inhalts einer bestimmten Webseite enthält, zum Beispiel das Video, das Sie ansehen möchten, oder die Hauptgeschichte, die Sie lesen, oder die Karte, die Sie betrachten möchten, oder die Nachrichtenschlagzeilen usw. Dies ist der eine Teil der Webseite, der definitiv von einer Seite zur anderen variieren wird!

Seitenleiste:

Einige Randinformationen, Links, Zitate, Anzeigen usw. Normalerweise steht dies im Kontext zu dem, was der Hauptinhalt entält (zum Beispiel könnte auf einer Nachrichtenartikel-Seite die Seitenleiste die Biografie des Autors oder Links zu verwandten Artikeln enthalten), aber es gibt auch Fälle, in denen Sie einige wiederkehrende Elemente finden, wie ein sekundäres Navigationssystem.

Fußzeile:

Ein Streifen am unteren Rand der Seite, der normalerweise Kleingedrucktes, Urheberrechtshinweise oder Kontaktinformationen enthält. Es ist ein Ort, um allgemeine Informationen zu platzieren (wie die Kopfzeile), aber normalerweise sind diese Informationen nicht kritisch oder sekundär zur Webseite selbst. Die Fußzeile wird auch manchmal für SEO-Zwecke verwendet, indem Links bereitgestellt werden, um schnell auf beliebte Inhalte zugreifen zu können.

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

Das gezeigte Beispiel ist nicht hübsch, aber es eignet sich perfekt, um ein typisches Layout-Beispiel für eine Webseite zu demonstrieren. Einige Webseiten haben mehr Spalten, einige sind viel komplexer, aber Sie verstehen die Idee. Mit dem richtigen CSS könnten Sie praktisch jedes Element verwenden, um die verschiedene Abschnitte zu umschließen und es so aussehen zu lassen, wie Sie es möchten, aber wie schon vorher diskutiert, müssen wir die Semantik respektieren und das richtige Element für die richtige Aufgabe verwenden.

Das liegt daran, dass das Visuelle nicht die ganze Geschichte erzählt. 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 Personen, die Konzepte wie "rosa" und "große Schrift" möglicherweise nicht sehr hilfreich finden?

In Ihrem HTML-Code können Sie Inhaltsabschnitte basierend auf ihrer Funktionalität markieren – Sie können Elemente verwenden, die die oben beschriebenen Inhaltsabschnitte eindeutig darstellen, und Hilfstechnologien wie Bildschirmleseprogramme 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, wenn man die richtige Elementstruktur und Semantik nicht für die richtige Aufgabe verwendet.

Um eine solche semantische Auszeichnung zu implementieren, bietet HTML spezielle Tags, die Sie zur Darstellung solcher Abschnitte verwenden können, zum Beispiel:

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

Unser oben gesehenes Beispiel wird durch den folgenden Code dargestellt (Sie können das Beispiel auch in unserem GitHub-Repository finden). Wir möchten, dass Sie das obige Beispiel betrachten und dann das untenstehende Listing prüfen, um zu sehen, welche Teile welchen Abschnitt des visuellen Beispiels bilden.

<!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 ebenfalls helfen, ihn zu verstehen. Wir bitten Sie in diesem Artikel nicht, viel mehr zu tun, denn der Schlüssel zum Verständnis des Dokumentenlayouts liegt darin, eine solide HTML-Struktur zu schreiben und diese dann mit CSS zu gestalten. Wir warten damit, bis Sie beginnen, das CSS-Layout als Teil des CSS-Themas zu studieren.

Es ist gut, das allgemeine Verständnis aller HTML-Sektionierungselemente im Detail zu haben – das ist etwas, woran Sie allmählich arbeiten werden, wenn Sie mehr Erfahrung mit Webentwicklung sammeln. Sie können viele Details lesen, indem Sie unser HTML-Element-Referenz lesen. 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 im <body>. Idealerweise sollte dies nicht in andere Elemente verschachtelt werden.
• <article> schließt einen Block verwandten Inhalts ein, der ohne den Rest der Seite sinnvoll ist (z. B. ein einzelner Blogbeitrag).
• <section> ist ähnlich wie <article>, aber es dient mehr dazu, einen einzelnen Teil der Seite zu gruppieren, der ein einzelnes Funktionalitätselement repräsentiert (z. B. eine Minikarte, oder eine Reihe von Artikelschlagzeilen und -zusammenfassungen) oder ein Thema. Es wird als gute Praxis angesehen, 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, aber zusätzliche Informationen, die indirekt damit verbunden sind, bereitstellen können (Glossareinträge, Autorenbiografie, verwandte Links usw.).
• <header> repräsentiert eine Gruppe einleitender Inhalte. Wenn es ein Kind von <body> ist, definiert es die globale Kopfzeile einer Webseite, aber wenn es ein Kind von <article> oder <section> ist, definiert es eine spezifische Kopfzeile 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 gehen.
• <footer> repräsentiert 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 mehr Details zu jedem bietet.

Manchmal stoßen Sie auf Situationen, in denen Sie kein ideales semantisches Element finden können, um einige Elemente zusammenzufassen oder Inhalte zu umschließen. 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 Fälle wie diese bietet HTML die <div> und <span>-Elemente. Sie sollten diese vorzugsweise mit einem geeigneten class-Attribut verwenden, um ihnen eine Art von Bezeichnung zu geben, so dass sie einfach anvisiert werden können.

<span> ist ein Inline-, nicht-semantisches Element, das Sie nur verwenden sollten, wenn Sie kein besseres semantisches Textelement finden können, um Ihren Inhalt zu umschließen, 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 soll die Redaktion lediglich zusätzliche Anweisungen für den Regisseur des Stücks geben; sie soll keine zusätzliche semantische Bedeutung haben. Für sehende Benutzer würde CSS möglicherweise verwendet, um die Notiz leicht vom Haupttext zu distanzieren.

<div> ist ein Blockebenen-, nicht-semantisches Element, das Sie nur verwenden sollten, wenn Sie kein besseres semantisches Blockelement finden können oder Sie keine spezifische Bedeutung hinzufügen möchten. Zum Beispiel stellen Sie sich ein Einkaufswagen-Widget vor, das Sie zu jedem Zeitpunkt während Ihres Aufenthaltes 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 nicht wirklich ein <aside>, da es sich nicht unbedingt auf den Hauptinhalt der Seite bezieht (Sie möchten es von überall sichtbar haben). Es rechtfertigt nicht einmal besonders die Verwendung eines <section>, da es nicht Teil des Hauptinhalts der Seite ist. Also ist ein <div> in diesem Fall in Ordnung. Wir haben eine Überschrift als Wegweiser hinzugefügt, um Bildschirmlesernutzern zu helfen, sie zu finden.

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

<br>: das Zeilenumbruch-Element

<br> erzeugt einen Zeilenumbruch in einem Absatz; es ist die einzige Möglichkeit, eine starre Struktur in einer Situation zu erzwingen, in der Sie eine Serie von festen kurzen Zeilen wünschen, wie in einer Postanschrift 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 in einer langen Zeile dargestellt werden (wie wir früher im Kurs gesagt haben, HTML ignoriert die meisten Leerzeichen); mit <br>-Elementen im Code wird das Markup so dargestellt:

<hr>: das thematische Trennlinienelement

<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. Ein 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>

Wird so gerendert:

Sobald Sie die Struktur einer einfachen Webseite geplant haben, ist der nächste logische Schritt, zu versuchen, herauszufinden, welchen Inhalt Sie auf einer ganzen Webseite platzieren möchten, welche Seiten Sie benötigen und wie sie angeordnet sein und miteinander verlinkt werden sollten, um das beste Nutzererlebnis zu erzielen. Das wird genannt Informationsarchitektur. In einer großen, komplexen Webseite kann viel Planung in diesen Prozess eingehen, aber für eine einfache Webseite mit nur wenigen Seiten kann dies recht einfach und lustig sein!

1. Bedenken Sie, dass es einige Elemente gibt, die für die meisten (wenn nicht alle) Seiten gemeinsam sind – wie das Navigationsmenü und den Fußzeileninhalt. Wenn Ihre Seite beispielsweise für ein Geschäft ist, ist es eine gute Idee, Ihre Kontaktinformationen in der Fußzeile auf jeder Seite verfügbar zu haben. Beachten Sie, was Sie auf jeder Seite gemeinsam haben möchten.
2. Zeichnen Sie als nächstes eine grobe Skizze davon, wie die Struktur jeder Seite aussehen könnte (es könnte wie unsere einfache Webseite oben aussehen). Beachten Sie, was jeder Block darstellen wird.
3. Überlegen Sie sich alle anderen (nicht auf jeder Seite gleichen) Inhalte, die Sie auf Ihrer Webseite haben möchten – schreiben Sie eine große Liste auf.
4. Versuchen Sie dann, alle diese Inhaltelemente in Gruppen zu sortieren, um eine Idee zu bekommen, welche Teile auf verschiedenen Seiten zusammenleben könnten. Das ist sehr ähnlich einer Technik namens Kartensortierung.
5. Versuchen Sie nun, eine grobe Sitemap zu skizzieren – haben Sie eine Blase für jede Seite auf Ihrer Webseite und zeichnen Sie Linien, um den typischen Workflow zwischen den Seiten zu zeigen. Die Homepage wird wahrscheinlich im Zentrum stehen und zu den meisten, wenn nicht allen anderen Seiten verlinken; die meisten Seiten einer kleinen Seite sollten aus der Hauptnavigation zugänglich sein, obwohl es Ausnahmen gibt. Sie möchten vielleicht auch Notizen dazu machen, wie Dinge präsentiert werden könnten.

Versuchen Sie, die obige Übung für eine Webseite Ihrer eigenen Kreation durchzuführen. Worum möchten Sie eine Seite erstellen?

Zu diesem Zeitpunkt sollten Sie eine bessere Vorstellung davon haben, wie eine Webseite 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