Tutorials zur Webentwicklung

2.1.1 Elemente zur Strukturierung

Das Strukturieren der Dokumente hat einen hohen semantischen Wert. Anhand der Elemente kann der Browser er­kennen, um was für Inhalte es sich handelt, zum Beispiel ob es sich um ein Navigations­menü oder um einen Haupt­inhalts­bereich handelt. So ermöglicht erst die Semantik der Sprache ein barriere­freies, modernes Inter­net. Screen­reader können den Inhalt besser ver­mitteln, Such­maschinen können Ihre Seiten analysieren und dem Nutzer die ge­suchten Informationen effektiver bereit­stellen.

<header>

Das header-Element enthält den sicht­baren Kopf­bereich einer Seite. Dieser ist für ein­leitende Inhalte ge­dacht, etwa Firmen­logos, Links zum Impressum oder zur Kontakt­seite, aber nicht Links zu externen Seiten, etwa sozialen Netz­werken.

Quelle: http://­wiki.­selfhtml.­org/­wiki/­HTML/­Seitenstrukturierung/­header

<header>
  ...
</header>

Ausführliche Beschreibung: Übersicht der Elemente - <header>

<nav>

Das nav-Element umschließt Navigations­leisten und Menüs, wobei es neben einer un­sortierten Liste mit den Ver­weisen auch eine Über­schrift oder ähnliches ent­halten kann.

Quelle: http://­wiki.­selfhtml.­org/­wiki/­HTML/­Seitenstrukturierung/­nav

<nav>
  ...
</nav>

Ausführliche Beschreibung: Übersicht der Elemente - <nav>

<aside>

Das aside-Element um­schließt laut Spezifikation Ab­schnitte einer Seite, deren Inhalt nur in einem indirekten Zusammen­hang mit dem um­gebenden Inhalt stehen. Dies sind zum Beispiel Rand­bemerkungen, Fuß­noten oder Links zu weiter­gehenden Web­seiten.

Quelle: http://­wiki.­selfhtml.­org/­wiki/­HTML/­Seitenstrukturierung/­aside

<aside>
  ...
</aside>

Ausführliche Beschreibung: Übersicht der Elemente - <aside>

<main>

Das main-Element enthält den (Haupt-)Inhalt einer Web­seite.

Quelle: http://­wiki.­selfhtml.­org/­wiki/­HTML/­Seitenstrukturierung/­main

<main>
  ...
</main>

Ausführliche Beschreibung: Übersicht der Elemente - <main>

<article>

Das article-Element stellt in sich ge­schlossene Ab­schnitte eines Dokuments dar, ver­gleichbar mit einem Zeitungs­artikel. Es ergibt des­halb Sinn, inner­halb von article-Elementen weitere strukturierende Elemente wie header, section oder footer unter­zubringen.

Dabei kann article sowohl das Eltern­element mehrerer sections , als auch z.B. als Kommentar eines Blog­artikels Kind­element einer section sein.

Quelle: http://­wiki.­selfhtml.­org/­wiki/­HTML/­Seitenstrukturierung/­article

<article>
  ...
</article>

Ausführliche Beschreibung: Übersicht der Elemente - <article>

<section>

Das section-Element enthält laut Spezifikation eine thematische Gruppierung von Inhalten typischer­weise mit einer Über­schrift. Dies dient dazu, den Inhalt oder auch einen article in semantische Ab­schnitte zu gliedern.

Quelle: http://­wiki.­selfhtml.­org/­wiki/­HTML/­Seitenstrukturierung/­section

<section>
  ...
</section>

Ausführliche Beschreibung: Übersicht der Elemente - <section>

<footer>

Das footer-Element enthält alle Informationen, die in Web­seiten am Ende stehen: Autor, Hin­weise zum Urheber­recht, ein Link zum Impressum. Dabei kann ein footer letztes Element der Seite, aber auch das Ende eines articles sein. Die Position ist nicht not­wendiger­weise am unteren Rand, bei Blog-Ein­trägen steht der footer oft neben dem Text.

Quelle: http://­wiki.­selfhtml.­org/­wiki/­HTML/­Seitenstrukturierung/­footer

<footer>
  ...
</footer>

Ausführliche Beschreibung: Übersicht der Elemente - <footer>

Bei den sectioning elements handelt es sich um Block-Elemente. Das Layout der Elemente kann mit CSS an­gepasst werden.

2.1.2 Erste Webseite erweitern

Unser Beispiel wird um einige sectioning elements erweitert. Die Bereiche dienen der Strukturierung unserer Web­seite und werden auf den folgenden Seiten weiter be­arbeitet!

Zusätzlich werden die Werte der Meta­daten an­gepasst, sowie die Über­schrift und der Text ge­ändert!

Öffnen Sie die Datei index.html in Ihrem Editor und erweitern Sie den Code wie im folgenden Listings ...

Die Meta­daten werden an­gepasst ...

<meta name="author" content="Mein Name">
<meta name="keywords" content="###">
<meta name="description" content="###">

<title>### - Startseite</title>

Die sectioning elements werden hinzu­gefügt und dabei teil­weise mit­einander ver­schachtelt ...

<header>
  ...
</header>

  <nav>
    ...
  </nav>


  <main>

    <article>

      <section>
        ...
      </section>

      <aside>
        ...
      </aside>

    </article>

  </main>


<footer>
  ...
</footer>

Im <header> Bereich wird eine Über­schrift erster Ordnung notiert ...

<header>
 <h1>Name der Website</h1>
</header>

Zur Navigation auf die Unter­seiten werden Hyper­links im <nav> Bereich platziert. Eine aus­führliche Beschreibung der Hyperlinks finden Sie hier: Übersicht der Elemente - <a>

<nav>

  <a href="./index.html">Startseite</a>
  <a href="./page-01.html">Page 01</a>
  <a href="./page-02.html">Page 02</a>

</nav>

Jetzt werden noch die Über­schrift und der Text­absatz angepasst, diese befinden sich jetzt im <section> Bereich.

<section>

  <h2>Home</h2>

    <p>
      Willkommen auf unserer Internetseite!
    </p>

</section>

Beachten Sie, das die Über­schrift eine neue Hierarchie­ordnung erhalten hat!

2.1.3 Sinn und Zweck

Zusammen­fassend sei an dieser Stelle noch­mals erwähnt, dass wir uns auf dem Weg zu einer funktionierenden Web­site mit mehreren Bereichen und Unter­seiten befinden. Gemeinsam wurde ein Grund­gerüst für alle folgenden Dokumente erstellt. Dabei ist es wichtig, dass Sie stets den Kopf­bereich anpassen. Ver­ändern Sie für jede neue Seite die Meta­daten. Passen Sie die Werte der keywords an und notieren Sie eine einzig­artige description.

Passen Sie anschließend die Elemente im Rumpf an. Beginnen Sie dabei mit einer sinn­vollen Auf­teilung der Seite in mehrere Sektionen! Damit schaffen Sie eine logische Struktur in die Sie alle weiteren Inhalte unter­bringen können.

Mehr dazu erfahren Sie im Tutorial: Grundlagen im Webdesign