path: root/files/de/learn/html/introduction_to_html/document_and_website_structure/index.html

---
title: Struktur in die Webseite bringen
slug: Learn/HTML/Introduction_to_HTML/Document_and_website_structure
tags:
  - Beginner
  - Guide
  - HTML
  - Layout
  - Planung
  - Sitemap
  - Struktur
translation_of: Learn/HTML/Introduction_to_HTML/Document_and_website_structure
original_slug: Learn/HTML/Einführung_in_HTML/Document_and_website_structure
---
<div>{{LearnSidebar}}</div>

<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML")}}</div>

<p class="summary">{{glossary("HTML")}} ist auch dafür da, größere Strukturen, wie einen Kopfbereich, ein Navigationsmenü oder den Bereich für den Hauptinhalt auf einer Webseite festzulegen. In diesem Artikel schauen wir uns an, wie man den Aufbau einer Webseite plant und mit Hilfe von HTML repräsentiert.</p>

<table class="learn-box standard-table">
 <tbody>
  <tr>
   <th scope="row">Vorwissen:</th>
   <td>HTML-Grundlagen, wie sie in <a href="/de/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Lernen Sie HTML kennen</a> abgedeckt werden. HTML Textformatierung, wie in <a href="/de/Learn/HTML/Einf%C3%BChrung_in_HTML/Einfache_Textformatierung_in_HTML">Einfache Textformatierung in HTML</a> abgedeckt wird. Wie Links funktionieren, wie im Artikel <a href="/de/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Links erstellen</a> beschrieben wird.</td>
  </tr>
  <tr>
   <th scope="row">Ziel:</th>
   <td>Lernen, wie man eine grundlegende Struktur in einer Webseite mit HTML-Tags festlegt und wie man die Struktur einer einfachen Webseite entwirft.</td>
  </tr>
 </tbody>
</table>

<h2 id="Bereiche_einer_Webseite">Bereiche einer Webseite</h2>

<p>Webseiten können sehr unterschiedlich aussehen, doch die meisten haben ähnliche Komponenten, aus welchen sie aufgebaut sind. Diese Komponenten sieht man auf den meisten Webseiten, bei denen es sich nicht um Video-, Spielewebseiten oder Kunstprojekte handelt. Diese Komponenten bringen eine gute Struktur in jede Webseite:</p>

<dl>
 <dt>header - Kopfbereich</dt>
 <dd>Normalerweise ist dies ein breiter Streifen ganz oben auf der Website, in dem eine Überschrift zusammen mit einem Logo untergebracht sind. So sieht man jederzeit auf welcher Website man sich befindet, der header bleibt auf allen Unterseiten gleich.</dd>
 <dt>Navigation</dt>
 <dd>In der Navigation werden die Links zu den Unterseiten der Website bereitgestellt, meist in Form von Buttons, einfachen Links oder auch Tabs. Dieser Bereich bleibt genauso wie der header auf allen Seiten der Website gleich. Manchmal wird die Navigation direkt mit in den header eingebaut. Ob ein separates Navigationsmenü sinnvoller ist, ist Ansichtssache.</dd>
 <dt>Hauptinhalt</dt>
 <dd>Der größte Bereich im Zentrum der Webseite, welcher den meisten Inhalt einer Webseite enthält, zum Beispiel Videos, eine Geschichte, eine Karte oder ein Zeitungsartikel. Dieser Part der Website wird sich von Seite zu Seite unterscheiden!</dd>
 <dt>Sidebar</dt>
 <dd>Zusätzliche Informationen, Links, Zitate, Werbung, usw. Dies wird nicht im Hauptfenster dargestellt, aber meist rechts oder links davon. Der Inhalt bezieht sich oft auf den Hauptinhalt. Bei einem Zeitungsartikel könnte die Sidebar zum Beispiel Zusatzinformationen, Informationen zum Autor oder Links zu ähnlichen Artikeln enthalten. Manchmal wird in der Sidebar auch ein zweites Navigationsmenü untergebracht oder anderer Inhalt, der auf allen Seiten gleich ist.</dd>
 <dt>footer - Fußbereich</dt>
 <dd>Ein Streifen am Ende der Webseite, welcher oft in kleiner Schrift Informationen zum Impressum, Copyright und Kontaktinformationen bereit stellt. Es sind wichtige Informationen für Interessierte, aber für die meisten Webseitenbenutzer nicht relevant. Manchmal wird hier auch eine Sitemap zur Verfügung gestellt.</dd>
</dl>

<p>Eine „typische Webseite“ könnte wie folgt strukturiert werden:</p>

<p><img alt="a simple website structure example featuring a main heading, navigation menu, main content, side bar, and footer." src="https://mdn.mozillademos.org/files/12417/sample-website.png" style="display: block; margin: 0 auto;"></p>

<h2 id="Inhalte_strukturieren_mit_HTML">Inhalte strukturieren mit HTML</h2>

<p>Das Beispiel oben ist vielleicht nicht besonders schön, aber sehr gut dafür geeignet, den typischen Aufbau einer Webseite zu erläutern. Es gibt Webseiten mit weiteren Spalten, manche sind um einiges komplexer, aber man kann den grundlegenden Aufbau gut erkennen. Mit dem richtigen CSS darauf angewendet, kann man alle Elemente dazu bringen, sich wie die verschiedenen Bereiche zu verhalten und so auszusehen. Aber wie schon vorher angesprochen, ist es <strong>wichtig den semantischen Zusammenhang zwischen den HTML-Tags zu wahren und das richtige Element für den ihm zugeschriebene Job zu nutzen</strong>.</p>

<p>Dies liegt daran, dass Darstellungen nicht die ganze Geschichte, die dahinter steckt, erzählen. Wir verwenden Farbe und Schriftgröße um Benutzer auf die nützlichsten Teile des Inhalts aufmerksam zu machen, wie das Navigationsmenü und verwandte Links. Aber was ist mit sehbehinderten Menschen, die zum Beispiel keine Konzepte wie „pink“ und „große Schriftart“ sehr nützlich finden?</p>

<div class="note">
<p><strong>Hinweis</strong>: Etwa 8% der Menschen weltweit sind farbenblind. Blinde oder fast blinde Menschen machen 4-5% der Menschheit aus. 2012 waren das etwa <a href="https://en.wikipedia.org/wiki/Visual_impairment">285 Millionen Menschen</a>, während die Gesamtpopulation bei 7 Billionen Menschen liegt.</p>
</div>

<p>Im HTML-Code kann man Sektionen einteilen, je nach dem was Sie beinhalten und welche <em>Funktion</em> sie ausfüllen. Wenn die Elemente so genutzt werden, wie oben beschrieben, dann hilft es Assistenzsoftware, wie Screenreadern, diese Elemente richtig zu klassifizieren. Wie wir bereits früher in diesem Kurs besprochen haben, hätte es <a href="/de/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Why_do_we_need_structure">einige negative Konsequenzen, wenn nicht das richtige Element und die richtige Semantik für den dafür vorgesehenen Job genutzt werden</a>.</p>

<p>Um sematisches Markup zu schreiben, stellt HTML einige Tags zur verfügung, die man benutzen kann, zum Beispiel:</p>

<ul>
 <li><strong>Header/Kopfbereich: </strong>{{htmlelement("header")}}.</li>
 <li><strong>Navigations Menü: </strong>{{htmlelement("nav")}}.</li>
 <li><strong>Hauptinhalt: </strong>{{htmlelement("main")}}, mit einigen verschiedenen Untersektionen, repräsentiert mit {{HTMLElement("article")}}, {{htmlelement("section")}} und {{htmlelement("div")}} Elementen.</li>
 <li><strong>Sidebar: </strong>{{htmlelement("aside")}}; wird oft innerhalb {{htmlelement("main")}} platziert.</li>
 <li><strong>Footer/Fußbereich: </strong>{{htmlelement("footer")}}.</li>
</ul>

<h3 id="Aktives_Lernen_Den_Code_aus_dem_Beispiel_verstehen">Aktives Lernen: Den Code aus dem Beispiel verstehen</h3>

<p>Das Beispiel oben basiert auf dem folgenden Code (<a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/document_and_website_structure/index.html">Man kann dieses Beispiel auch auf GitHub finden</a>). Schauen Sie sich das Beispiel oben an und dann den Code dazu unten. Versuchen Sie zu sehen, welche Zeilen des Codes zu welchen Sektionen der Webseite gehören.</p>

<pre class="brush: html">&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;

    &lt;title&gt;Titel der Webseite&lt;/title&gt;
    &lt;link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Sonsie+One" rel="stylesheet" type="text/css"&gt;
    &lt;link rel="stylesheet" href="style.css"&gt;

    &lt;!-- die nächsten drei Zeilen bewirken, dass die HTML5 Semantik Elemente auch in alten Internet Explorer Versionen funktionieren--&gt;
    &lt;!--[if lt IE 9]&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"&gt;&lt;/script&gt;
    &lt;![endif]--&gt;
  &lt;/head&gt;

  &lt;body&gt;
    &lt;!-- Dies ist der Kopfbereich bzw. Header, welcher auf allen Seiten angezeigt wird --&gt;

    &lt;header&gt;
      &lt;h1&gt;Header&lt;/h1&gt;
    &lt;/header&gt;

    &lt;nav&gt;
      &lt;ul&gt;
        &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Our team&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Projects&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;

       &lt;!-- Ein Suchformular, mit dessen Hilfe man auch durch die Webseite navigieren kann --&gt;

       &lt;form&gt;
         &lt;input type="search" name="q" placeholder="Search query"&gt;
         &lt;input type="submit" value="Go!"&gt;
       &lt;/form&gt;
     &lt;/nav&gt;

    &lt;!-- Hier kommt der Hauptinhalt unserer Webseite --&gt;
    &lt;main&gt;

      &lt;!-- Es enthält einen Artikel --&gt;
      &lt;article&gt;
        &lt;h2&gt;Article heading&lt;/h2&gt;

        &lt;p&gt;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.&lt;/p&gt;

        &lt;h3&gt;subsection&lt;/h3&gt;

        &lt;p&gt;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.&lt;/p&gt;

        &lt;p&gt;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.&lt;/p&gt;

        &lt;h3&gt;Another subsection&lt;/h3&gt;

        &lt;p&gt;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.&lt;/p&gt;

        &lt;p&gt;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.&lt;/p&gt;
      &lt;/article&gt;

      &lt;!-- Der Inhalt für die Sidebar kann auch innerhalb des main-Elements stehen--&gt;
      &lt;aside&gt;
        &lt;h2&gt;Related&lt;/h2&gt;

        &lt;ul&gt;
          &lt;li&gt;&lt;a href="#"&gt;Oh I do like to be beside the seaside&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Oh I do like to be beside the sea&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Although in the North of England&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;It never stops raining&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Oh well...&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/aside&gt;

    &lt;/main&gt;

    &lt;!-- Hier ist unser Footer bzw. die Fußzeile, welche auch wieder auf allen Unterseiten angezeigt wird. --&gt;

    &lt;footer&gt;
      &lt;p&gt;©Copyright 2050 by nobody. All rights reversed.&lt;/p&gt;
    &lt;/footer&gt;

  &lt;/body&gt;
&lt;/html&gt;</pre>

<p>Nehmen Sie sich etwas Zeit sich den Code näher anzuschauen und versuchen Sie ihn zu verstehen - die Kommentare sollten Ihnen dabei behilflich sein. Wir haben nicht zu viele Aufgaben in diesem Artikel, denn der Schlüssel zum Verständnis des Layouts ist das Schreiben von einer soliden HTML-Struktur, um diese dann mit CSS zu beeinflussen. Damit warten wir aber, denn dies ist Teil des CSS Kurses, der sich an diesen HTML Kurs direkt anschließt.</p>

<h2 id="Die_HTML-Layout-Elemente">Die HTML-Layout-Elemente</h2>

<p>Es ist gut alle HTML-Elemente fürs Layout im Detail zu kennen. Das lernen Sie mit der Zeit. Viele Details können Sie in unserer <a href="/de/docs/Web/HTML/Element">HTML Elemente Referenz</a> finden.</p>

<ul>
 <li>{{HTMLElement('main')}} ist für den Hauptbereich der Webseite und stellt gewöhnlich Inhalte dar, die <em>nur auf dieser einen Seite</em> zu sehen sind. <code>&lt;main&gt;</code> sollte nur <em>einmal</em> pro Webseite genutzt werden und sollte direkt im {{HTMLElement('body')}} stehen und nicht innerhalb anderer Elemente.</li>
 <li>{{HTMLElement('article')}} umschließt einen Block von zusammenhängendem Inhalt, der auch ohne den Rest der Webseite stehen könnte (z.B. ein einzelner Blogpost).</li>
 <li>{{HTMLElement('section')}} ist ähnlich wie <code>&lt;article&gt;</code>, aber eher für das Gruppieren von Bereichen mit bestimmter Funktionalität (z.B. eine Minikarte oder einige Artikel-Überschriften und Zusammenfassungen). Es ist gute Praxis, jede section mit einer Überschrift zu starten. Man kann <code>&lt;article&gt;</code>s in mehrere <code>&lt;section&gt;</code>s aufteilen und umgekehrt, es geht beides.</li>
 <li>{{HTMLElement('aside')}} enthält Inhalte, die nicht direkt mit dem Hauptinhalt zusammenhängen, aber als Zusatzinformationen dienen können (Biografie des Autors, Links zu weiterführenden Informationen)</li>
 <li>{{HTMLElement('header')}} stellt eine Gruppe von einführenden Inhaltselementen dar. Wenn es innerhalb des {{HTMLElement('body')}}-Tags steht, definiert es einen globalen Kopfbereich für die Webseite, aber wenn es innerhalb von einem {{HTMLElement('article')}} oder {{HTMLElement('section')}} Element steht, dann stellt es einen Kopfbereich nur für diese Sektion dar. (Achtung! Verwechslungsgefahr mit <a href="/de/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML#Adding_a_title">Titel und Überschriften</a></li>
 <li>{{HTMLElement('nav')}} enthält das Hauptnavigationsmenü für die Seite. Zweitrangige Links würden nicht hier hin gehören.</li>
 <li>{{HTMLElement('footer')}} stellt eine Gruppe von Inhalten am Ende der Webseite dar.</li>
</ul>

<h3 id="Nicht-semantische_Container">Nicht-semantische Container</h3>

<p>Manchmal findet sich kein passendes semantisches Element, um eine Gruppe Elemente oder Inhalte damit einzuhüllen. Manchmal möchte man mit einem Container um bestimmte Elemente herum nur ein Ziel erstellen, das über {{glossary("CSS")}} oder {{glossary("JavaScript")}} angesprochen werden kann. Für solche Fälle gibt es das {{HTMLElement("div")}} und das {{HTMLElement("span")}} Element. Diese sollten möglichst immer ein passendes {{htmlattrxref('class')}} Attribut haben, über welches sie identifiziert und angesprochen werden können.</p>

<p>{{HTMLElement("span")}} ist ein Inline Element ohne eine bestimmte Semantik. Man sollte es nur benutzen, wenn man kein besseres, semantisches Inline-Element finden kann oder wenn man keine hervorgehobene Bedeutung hinzufügen möchte. Zum Beispiel:</p>

<pre class="brush: html">&lt;p&gt;Der König lief um 1 Uhr betrunken zurück zu seinem Zimmer. Das Bier half ihm nicht dabei, als er durch die Tür schwankte &lt;span class="editor-hinweis"&gt;[Editor's Hinweis: An diesem Punkt im Stück sollten die Lichter heruntergedimmt werden]&lt;/span&gt;.&lt;/p&gt;</pre>

<p>In diesem Fall soll der Hinweis für den Editor nur Extra-Informationen für den Direktor des Schauspiels bereit stellen, der Hinweis hat keine semantische Bedeutung. Visuell kann dies per CSS mit einem Unterschied in der Textdarstellung angezeigt werden.</p>

<p>{{HTMLElement("div")}} ist ein Blocklevel-Element ohne eine bestimmte Semantik. Man sollte es nur benutzen, wenn man kein besseres, semantisches Blocklevel-Element finden kann oder wenn man keine hervorgehobene Bedeutung hinzufügen möchte. Zum Beispiel ein Einkaufswagen-Widget, welches man jederzeit auf einer E-Commerce-Webseite anzeigen kann:</p>

<pre class="brush: html">&lt;div class="einkaufswagen"&gt;
  &lt;h2&gt;Einkaufswagen&lt;/h2&gt;
  &lt;ul&gt;
    &lt;li&gt;
      &lt;p&gt;&lt;a href=""&gt;&lt;strong&gt;Silber Ohrringe&lt;/strong&gt;&lt;/a&gt;: $99.95.&lt;/p&gt;
      &lt;img src="../products/3333-0985/thumb.png" alt="Silber Ohrringe"&gt;
    &lt;/li&gt;
    &lt;li&gt;
      ...
    &lt;/li&gt;
  &lt;/ul&gt;
  &lt;p&gt;Kosten gesamt: $237.89&lt;/p&gt;
&lt;/div&gt;</pre>

<p>Dies ist nicht wirklich Inhalt für <code>&lt;aside&gt;</code>, da es nicht notwendigerweise mit dem Inhalt der Hauptseite im Zusammenhang steht (man soll es ja überall sehen können). Auch <code>&lt;section&gt;</code> scheint ungeeignet, da es nicht Teil des Hauptinhaltes ist. Deswegen kann man hier <code>&lt;div&gt;</code> benutzen. Es wurde eine Überschrift hinzugefügt, so das auch Benutzer mit Screenreadern den Einkaufswagen finden.</p>

<div class="warning">
<p><strong>Warnung</strong>: Divs sind leicht zu benutzen, man sollte aber darauf achten, das man nicht zu viele davon einsetzt, da sie keinerleit semantischen Wert haben. Man sollte sie wirklich nur benutzen, wenn es keine anderen semantischen Elemente gibt. Wenn man zuviele divs benutzt, dann wird es schwierig den Code zu updaten und später damit wieder zu arbeiten.</p>
</div>

<h3 id="Zeilenumbruch_und_Horizontale_Linien">Zeilenumbruch und Horizontale Linien</h3>

<p>Zwei Elemente, die man immer mal wieder benutzen wird, sind {{htmlelement("br")}} und {{htmlelement("hr")}}:</p>

<p><code>&lt;br&gt;</code> stellt einen Zeilenumbruch innerhalb eines Absatzes(</p>

<p>) dar. Es ist die einzige Möglichkeit eine bestimmte Struktur in den Text zu bekommen, wie man es bei einer Adresse oder einem Gedicht benötigt. Zum Beispiel:</p>

<pre class="brush: html">&lt;p&gt;There once was a girl called Nell&lt;br&gt;
Who loved to write HTML&lt;br&gt;
But her structure was bad, her semantics were sad&lt;br&gt;
and her markup didn't read very well.&lt;/p&gt;</pre>

<p>Ohne die <code>&lt;br&gt;</code> Elemente, würde der Absatz in einer einzigen lange Zeile angezeigt werden, denn <a href="/de/Learn/HTML/Introduction_to_HTML/Getting_started#Whitespace_in_HTML"> HTML ignoriert Whitespace</a>. Mit den<br>
 Elementen im Code wird der Absatz wie folgt dargestellt:</p>

<p>There once was a girl called Nell<br>
 Who loved to write HTML<br>
 But her structure was bad, her semantics were sad<br>
 and her markup didn't read very well.</p>

<p><code>&lt;hr&gt;</code> Elemente erzeugen eine horizontale Linie. Damit kann man einen thematischen Umbruch darstellen. Visuell ist es einfach nur eine Linie. Beispiel:</p>

<pre>&lt;p&gt;Die Katze lief aus dem Haus, um die Sonne zu genießen.&lt;/p&gt;
&lt;hr&gt;
&lt;p&gt;Der Hund im Haus und holte sich das Futter aus dem Napf der Katze.&lt;/p&gt;</pre>

<p>Würde wie folgt aussehen:</p>

<p>Die Katze lief aus dem Haus, um die Sonne zu genießen.</p>

<hr>
<p>Der Hund im Haus und holte sich das Futter aus dem Napf der Katze.</p>

<h2 id="Planung_einer_einfachen_Webseite">Planung einer einfachen Webseite</h2>

<p>Wenn Sie einmal den Inhalt einer ganz einachen Webseite geplant haben, dann ist der nächste Schritt das ausarbeiten, welcher Inhalt auf einer ganzen Internetpräsenz, bestehend aus mehreren Unterseiten, dargestellt werden soll. Dazu gehört zu planen, wie die einzelnen Seiten untereinander verlinkt werden sollen, wie das Gesamtlayout aussehen soll, so das die Seite das beste Erlebnis für den Nutzer bietet. Dies wird die {{glossary("Information architecture")}} genannt. Bei einer sehr großen und komplexen Webseite, muss eine Menge Zeit für den Planungsprozess eingeplant werden. Für eine einfachere Webseite mit wenigen Webseiten ist es aber recht einfach und kann auch Spaß machen!</p>

<ol>
 <li>Denken Sie daran, welche Elemente auf allen Seiten gleich sein sollen, z.B. das Navigationsmenü und der Footerbereich. Wenn die Webseite für ein Buisness ist, dann ist es zum Beispiel sinnvoll, die Kontaktinformationen auf jeder Unterseite im Footer zu haben. Notieren Sie, was auf jeder Unterseite gleich sein soll. <img alt="the common features of the travel site to go on every page: title and logo, contact, copyright, terms and conditions, language chooser, accessibility policy" src="https://mdn.mozillademos.org/files/12423/common-features.png" style="border-style: solid; border-width: 1px; display: block; height: 375px; margin: 0px auto; width: 600px;"></li>
 <li>Als nächstes zeichnen Sie eine grobe Skizze, wie die Struktur der Webseite aussehen soll, auf ein Blatt Papier. Machen Sie das für jede Unterseite der Webpräsenz. Schreiben Sie dazu, für was jede der Sektionen ist. <img alt="A simple diagram of a sample site structure, with a header, main content area, two optional sidebars, and footer" src="https://mdn.mozillademos.org/files/12429/site-structure.png" style="border-style: solid; border-width: 1px; display: block; height: 232px; margin: 0px auto; width: 600px;"></li>
 <li>Jetzt überlegen Sie welche Inhalte auf der Website zu finden sein sollen, welche nicht auf allen Unterseiten gleich sind. Schreiben Sie ruhig eine große Liste. <img alt="A long list of all the features that we could put on our travel site, from searching, to special offers and country-specific info" src="https://mdn.mozillademos.org/files/12425/feature-list.png" style="border-style: solid; border-width: 1px; display: block; height: 1066px; margin: 0px auto; width: 600px;"></li>
 <li>Als nächstes, versuchen Sie ihre Inhalte in Gruppen aufzuteilen, um eine Ide zu bekommen, was zusammen auf einer Unterseite stehen könnte. <img alt="The items that should appear on a holiday site sorted into 5 categories: Search, Specials, Country-specific info, Search results, and Buy things" src="https://mdn.mozillademos.org/files/12421/card-sorting.png" style="border-style: solid; border-width: 1px; display: block; height: 579px; margin: 0px auto; width: 600px;"></li>
 <li>Als letztes Skizzieren Sie eine grobe Sitemap - zeichnen Sie einen Kreis für jede Unterseite und ziehen Sie linien, um die Verlinkungen zwischen den Seiten deutlich zu machen. Wahrscheinlich ist die Startseite in der Mitte und von ihr gehen fast alle Links zu den Unterseiten. Die meisten Unterseiten einer kleinen Website, sollten über das Navigationsmenü zugänglich sein. Notieren Sie zusätzlich wie die Seiten präsentiert werden sollen. <img alt="A map of the site showing the homepage, country page, search results, specials page, checkout, and buy page" src="https://mdn.mozillademos.org/files/12427/site-map.png" style="border-style: solid; border-width: 1px; display: block; height: 872px; margin: 0px auto; width: 600px;"></li>
</ol>

<h3 id="Aktives_Lernen_Erstellen_Sie_eine_eigene_Sitemap">Aktives Lernen: Erstellen Sie eine eigene Sitemap</h3>

<p>Probieren Sie die Schritte von oben selber aus, erstellen Sie eine Sitemap für eine eigene Webseite. Worüber würden Sie gerne eine Webseite machen?</p>

<div class="note">
<p><strong>Hinweis</strong>: Speichern Sie Ihre Arbeit, eventuell möchten Sie diese später benutzen.</p>
</div>

<h2 id="Zusammenfassung">Zusammenfassung</h2>

<p>Jetzt sollten Sie ein besseres Verständnis dafür haben, wie Webseiten strukturiert werden können und wie man eine Webpräsenz mit mehreren Unterseiten im Vorraus plant. Im letzten Artikel dieses Moduls geht es darum, Fehler im HTML Code zu finden und zu beheben.</p>

<h2 id="See_also">See also</h2>

<ul>
 <li><a href="/en-US/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines">Using HTML sections and outlines</a>: Advanced guide to HTML5 semantic elements and the HTML5 outline algorithm.</li>
</ul>

<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML")}}</p>



<h2 id="In_diesem_Modul">In diesem Modul</h2>

<ul>
 <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Getting started with HTML</a></li>
 <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">What’s in the head? Metadata in HTML</a></li>
 <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML text fundamentals</a></li>
 <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Creating hyperlinks</a></li>
 <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">Advanced text formatting</a></li>
 <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">Document and website structure</a></li>
 <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">Debugging HTML</a></li>
 <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">Marking up a letter</a></li>
 <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content">Structuring a page of content</a></li>
</ul>