Strukturierung von Dokumenten

Grundlegende Abschnitte eines Dokuments

Webseiten können ziemlich unterschiedlich aussehen, aber sie neigen alle 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 eventuell einem Slogan. Dieser bleibt normalerweise von einer Seite zur nächsten einer Website gleich.

Navigationsleiste:

Links zu den Hauptabschnitten der Website; normalerweise durch Menütasten, Links oder Tabs dargestellt. Wie der Header bleibt dieser Inhalt normalerweise auf allen Webseiten konsistent — inkonsistente Navigation auf Ihrer Website führt nur zu verwirrten und frustrierten Nutzern. Viele Webdesigner betrachten die Navigationsleiste als Teil des Headers und nicht als einzelnes Element, aber das ist keine Voraussetzung; in der Tat argumentieren einige, dass es für die Zugänglichkeit besser ist, die beiden getrennt zu halten, da Bildschirmleser 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 bestimmten Webseite enthält, zum Beispiel das Video, das Sie ansehen möchten, oder die Hauptgeschichte, die Sie lesen, oder die Karte, die Sie sich ansehen möchten, oder die Nachrichtenüberschriften usw. Dies ist der eine Teil der Website, der definitiv von Seite zu Seite variieren wird!

Seitenleiste:

Einige periphere Informationen, Links, Zitate, Werbung usw. Normalerweise steht dies im Kontext zu dem, was im Hauptinhalt enthalten ist (zum Beispiel könnte auf einer Nachrichtenseite die Seitenleiste die Biografie des Autors oder Links zu verwandten Artikeln enthalten), aber es gibt auch Fälle, in denen Sie wiederkehrende Elemente wie ein sekundäres Navigationssystem finden.

Footer:

Ein Streifen am unteren Rand der Seite, der in der Regel Kleingedrucktes, Urheberrechtshinweise oder Kontaktinformationen enthält. Es ist ein Platz, um allgemeine Informationen unterzubringen (wie der Header), aber normalerweise sind diese Informationen nicht kritisch oder sekundär 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 ungefähr so strukturiert sein:

HTML zur Strukturierung von Inhalten

Das gezeigte Beispiel sieht zwar nicht schön aus, eignet sich aber perfekt, um ein typisches Website-Layoutbeispiel zu veranschaulichen. Einige Websites haben mehr Spalten, einige sind viel komplexer, aber Sie verstehen die Idee. Mit dem richtigen CSS könnten Sie so ziemlich jedes Element verwenden, um die verschiedenen Abschnitte zu umwickeln und es so aussehen zu lassen, wie Sie es möchten, aber wie bereits erwähnt, müssen wir die Semantik respektieren und das richtige Element für den richtigen Zweck verwenden.

Dies liegt daran, dass die visuelle Darstellung nicht die ganze Geschichte erzählt. Wir verwenden Farben und Schriftgrößen, um den sehenden Benutzern zu zeigen, welcher Teil des Inhalts am nützlichsten ist, wie das Navigationsmenü und verwandte Links, aber was ist mit sehbehinderten Menschen, die Konzepte wie „pink“ und „große Schrift“ möglicherweise nicht als sehr nützlich empfinden?

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 repräsentieren, und unterstützende Technologien wie Bildschirmleser können diese Elemente erkennen und bei Aufgaben wie „Finden Sie die Hauptnavigation“ oder „Finden Sie den Hauptinhalt“ helfen. Wie wir bereits vorher im Kurs erwähnt haben, gibt es eine Reihe von Konsequenzen, wenn man nicht die richtige Elementstruktur und Semantik für den richtigen Zweck nutzt.

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

• header: <header>.
• Navigationsleiste: <nav>.
• Hauptinhalt: <main>, mit verschiedenen Inhaltsunterabschnitten repräsentiert durch <article>, <section> und <div>-Elemente.
• Seitenleiste: <aside>; oft innerhalb von <main> platziert.
• footer: <footer>.

Erforschung des Codes für unser Beispiel

Das oben gezeigte Beispiel wird durch den folgenden Code repräsentiert (Sie können den Code auch in unserem GitHub-Repository finden und das Beispiel live ansehen). Wir möchten, dass Sie sich das untenstehende Listing ansehen, um zu sehen, welche Teile jede Sektion des visuellen Outputs 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 überprüfen und zu verstehen – die Kommentare im Code sollten Ihnen auch dabei helfen, ihn zu verstehen. Wir bitten Sie in diesem Artikel nicht viel mehr zu tun, denn der Schlüssel zum Verständnis der Dokumentenlayout besteht darin, eine solide HTML-Struktur zu schreiben und diese dann mit CSS zu gestalten. Darauf warten wir, bis Sie beginnen, das CSS-Layout als Teil des CSS-Themas zu studieren.

HTML-Layout-Elemente im Detail

Es ist gut, die allgemeine Bedeutung aller HTML-Abschnittselemente im Detail zu verstehen – das ist etwas, woran Sie kontinuierlich arbeiten, während Sie mehr Erfahrung mit der Webentwicklung sammeln. Sie können viele Details finden, indem Sie unser HTML-Element-Referenz lesen. Für den Moment sind dies die Hauptdefinitionen, die Sie verstehen 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 dies nicht in andere Elemente verschachtelt sein.
• <article> umschließt einen Block verwandter Inhalte, die auch ohne den Rest der Seite Sinn ergeben (zum Beispiel ein einzelner Blogpost).
• <section> ist ähnlich wie <article>, aber mehr dazu da, einen einzigen Teil einer Seite zu gruppieren, der eine einzelne Funktionalität darstellt (wie eine Minikarte oder eine Reihe von Artikelüberschriften und -zusammenfassungen) oder ein Thema. Es wird als beste Praxis angesehen, jeden Abschnitt mit einer Überschrift zu beginnen; beachten Sie auch, dass Sie <article>s in mehrere <section>s unterteilen können oder <section>s in mehrere <article>s, abhängig vom Kontext.
• <aside> enthält Inhalte, die nicht direkt mit dem Hauptinhalt zusammenhängen, aber zusätzliche Informationen bereitstellen können, die indirekt damit verbunden sind (Glossareinträge, Autorenbiografie, verwandte Links usw.).
• <header> repräsentiert eine Gruppe einleitender Inhalte. Ist es ein Kind von <body>, definiert es den globalen Kopf einer Webseite, aber wenn es ein Kind von <article> oder <section> ist, definiert es einen spezifischen Kopf 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 der Navigation untergebracht werden.
• <footer> repräsentiert eine Gruppe von Endinhalten für eine Seite.

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

Nicht-semantische Wrapper

Manchmal stößt man auf Situationen, in denen man kein ideales semantisches Element finden kann, um einige Elemente zusammenzufassen oder Inhalte zu umwickeln. Manchmal möchte man einfach eine Gruppe von Elementen zusammenfassen, um sie als 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 von Bezeichnung zu geben, damit sie leicht anvisiert werden können.

<span> ist ein nicht-semantisches Inline-Element, das Sie nur verwenden sollten, wenn Sie kein besseres semantisches Textelement zur Hand haben oder kein spezifisches Bedeutungsmerkmal 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 Anmerkung des Herausgebers lediglich als zusätzliche Anweisung für den Regisseur des Stücks dienen; sie soll keine zusätzliche semantische Bedeutung haben. Für sehende Benutzer würde CSS möglicherweise verwendet werden, um die Anmerkung etwas vom Haupttext zu distanzieren.

<div> ist ein nicht-semantisches Block-Element, das Sie nur verwenden sollten, wenn Sie kein besseres semantisches Block-Element finden können oder keine spezifische Bedeutung hinzufügen möchten. Zum Beispiel, stellen Sie sich ein Einkaufswagen-Widget vor, das Sie jederzeit während Ihrer Zeit auf einer E-Commerce-Site aufrufen könnten:

<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 sich nicht notwendigerweise auf den Hauptinhalt der Seite bezieht (Sie möchten es von überall aus ansehen können). Es rechtfertigt nicht einmal wirklich die Verwendung eines <section>, da es nicht Teil des Hauptinhalts der Seite ist. Daher ist ein <div> in diesem Fall in Ordnung. Wir haben eine Überschrift als Wegweiser hinzugefügt, um Bildschirmbenutzern beim Auffinden zu helfen.

Zeilenumbrüche und horizontale Linien

Zwei Elemente, die Sie gelegentlich verwenden werden und über die Sie Bescheid wissen 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 zu erzwingen, in einer Situation, in der Sie eine Reihe von festen kurzen Zeilen wünschen, wie bei 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 in einer langen Zeile wiedergegeben 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 Trennzeichen

<hr>-Elemente erzeugen eine horizontale Linie im Dokument, die auf einen thematischen Wechsel im Text (wie einen Themen- oder Szenenwechsel) hinweist. Optisch 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 dargestellt werden:

Strukturierung einer grundlegenden Website

Der nächste Schritt nach der Planung der Struktur einer einzelnen Webseite ist die Planung der Struktur einer ganzen mehrseitigen Website, einschließlich wie sie angeordnet werden und wie sie zur besten Benutzererfahrung miteinander verlinkt werden sollten. Dies nennt man Informationsarchitektur.

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

Der Prozess könnte folgendermaßen aussehen:

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

   • Header:
     • Titel und Logo
     • Sprachauswahl der Seite
   • Navigationsmenü
   • Footer:
     • Urheberrechtshinweis
     • Link zu Geschäftsbedingungen, Kontaktdetails und Zugänglichkeitspolitik

2. Zeichnen Sie nun eine grobe Skizze davon, wie Sie die Struktur jeder Seite haben möchten (es könnte wie unsere einfache Website oben 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
   • Unterkunft
   • Transport
   • Dinge zu tun
   • Sonderangebote
   • Beliebte Urlaubsangebote, zum Beispiel Wintersonne, Skifahren
   • Suchergebnisse
   • Bewertungen
   • Visum-/Einreisebestimmungen
   • Währung
   • Sprachen und Kultur
   • Urlaub kaufen

4. Versuchen Sie nun, alle diese Inhaltselemente in Gruppen zu ordnen, um Ihnen eine Vorstellung davon zu geben, welche Teile zusammen auf verschiedenen Seiten leben könnten. Dies ist sehr ähnlich einer Technik, die als Cardsorting bekannt ist.

   • Suche
     • Flüge
     • Unterkunft
     • Transport
     • Dinge zu tun
   • Sonderangebote
     • Beliebte Urlaube
     • Wintersonne
     • Skifahren
   • Suchergebnisse
     • Bewertungen
     • Landesspezifische Informationen
       • Visum-/Einreisebestimmungen
       • Währung
       • Sprachen und Kultur
   • Urlaub kaufen

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

Versuchen Sie, die obige Übung für eine Website mit eigener Kreation durchzuführen. Worum möchten Sie eine Seite erstellen? Als Stretch-Goal verwenden Sie das HTML-Wissen, das Sie bisher erworben haben, um einige der Seiten auf der Site zu erstellen. Sie könnten unser grundlegendes HTML-Template als Ausgangspunkt verwenden.

Zusammenfassung

An diesem Punkt sollten Sie eine bessere Vorstellung davon haben, wie man eine Webseite/Website strukturiert. Im nächsten Artikel dieses Moduls werden wir uns ansehen, wie man Hyperlinks erstellt, eine der grundlegenden Funktionen des Webs.

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