Struktur

HTML bietet uns eine Anzahl an Elementen, mit denen wir unsere Website in Bereiche einteilen können. Viele Website haben die gleiche Aufteilung wie zum Beispiel einen Bereich, in dem das Logo und andere Elemente enthalten sind, der header. Im Header oder darunter befindet sich häufig die Navigation - nav der Website. Am unteren Bereich, in dem oft Impressum und andere Link enthalten sind, befindet sich der footer. Dazwischen der eigentliche Inhalt - Content - der Website.

Die folgende Grafik verdeutlicht den Aufbau einer Website mittels Struktur-Elementen.

Struktur einer Website

main

Das <main></main>-Element enthält den Hauptinhalt der Website. Durch die Auszeichnung des Hauptinhalts der Seite mit main können Screenreader und andere alternative Ausgabegeräte diesen erkennen und beispielsweise Header oder Navigation überspringen.

Bemerkung

Es darf maximal ein sichtbares main-Element pro Seite existieren.

 1<header>
 2  <img src="logo.jpg" alt="Logo der Website">
 3  <h1>Meine Website</h1>
 4  <nav>
 5    <ul>
 6      <li><a href="#">Home</a></li>
 7      <li><a href="#">Über mich</a></li>
 8      <li><a href="#">Meine Hobbies</a></li>
 9      <li><a href="#">Kontakt</a></li>
10    </ul>
11  </nav>
12</header>
13<main>
14  <h2>Überschrift 2</h2>
15  <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Deserunt aspernatur sunt minima tenetur eos quo, corrupti soluta nostrum numquam, ea eum? Sapiente impedit consequuntur velit tempore magni eum, autem nesciunt?</p>
16</main>

div

Das div-Element <div></div> ist wahrscheinlich das am meisten verwendete Element im World Wide Web. Das Element steht für division und wird verwendet und Inhalt voneinander zu trennen oder Inhalte zu gruppieren.

Bemerkung

Das div-Element ist nicht sichtbar auf der Website. Es wird erst wichtig, wenn man mittels CSS seine Seite designt.

 1<header>
 2  <img src="logo.jpg" alt="Logo der Website">
 3  <h1>Meine Website</h1>
 4  <nav>
 5    <ul>
 6      <li><a href="#">Home</a></li>
 7      <li><a href="#">Über mich</a></li>
 8      <li><a href="#">Meine Hobbies</a></li>
 9      <li><a href="#">Kontakt</a></li>
10    </ul>
11  </nav>
12</header>
13<main>
14  <h2>Überschrift 2</h2>
15  <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Deserunt aspernatur sunt minima tenetur eos quo, corrupti soluta nostrum numquam, ea eum? Sapiente impedit consequuntur velit tempore magni eum, autem nesciunt?</p>
16
17  <div>
18    Ein weiterer Bereich innerhalt der Website, der Inhalte gruppiert
19  </div>
20</main>

Bereiche benennen

Je größer eine Website wird, desto mehr div’s sind enthalten. Um diese voneinander zu unterscheiden kann ein Bezeichner angegeben werden. Es gibt zwei unterschiedliche Attribute, um Bereiche zu bezeichnen. Zum einen die id id="" und zum anderen die class class="".

Bemerkung

Eine id sollte einmalig in der Website vorkommen. Eine class darf mehrmals verwendet werden.
Einem Element dürfen auch mehrere Klassen (class) hinzugefügt werden.
Empfehlung: Verwenden sie nur Klassen (class)
 1<header>
 2  <img src="logo.jpg" alt="Logo der Website">
 3  <h1>Meine Website</h1>
 4  <nav>
 5    <ul>
 6      <li><a href="#">Home</a></li>
 7      <li><a href="#">Über mich</a></li>
 8      <li><a href="#">Meine Hobbies</a></li>
 9      <li><a href="#">Kontakt</a></li>
10    </ul>
11  </nav>
12</header>
13<main>
14  <h2>Überschrift 2</h2>
15  <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Deserunt aspernatur sunt minima tenetur eos quo, corrupti soluta nostrum numquam, ea eum? Sapiente impedit consequuntur velit tempore magni eum, autem nesciunt?</p>
16
17  <div class="second-content">
18    Ein weiterer Bereich innerhalt der Website, der Inhalte gruppiert
19  </div>
20</main>
21<footer>
22  <div>
23    <h3>Meine Website</h3>
24    <p>Adresse</p>
25  </div>
26  <div>
27    <a href="#">Impressum</a>
28    <a href="#">Datenschutz</a>
29  </div>
30</footer>

See the Pen struktur by Html Website (@html_website) on CodePen.