ZUM-Unterrichten - Logo.png
Viele Inhalte sind umgezogen ins neue ZUM-Unterrichten.

Dokumentstruktur

aus ZUM-Wiki, dem Wiki für Lehr- und Lerninhalte auf ZUM.de
Wechseln zu: Navigation, Suche

Die Dokumentstruktur eines HTML-Dokument besteht aus drei Bereichen:

Eine gewöhnliche HTML-Datei besteht grundsätzlich aus folgenden Teilen:

  1. Dokumenttyp-Deklaration (Angabe zur verwendeten HTML-Version)
  2. head (unsichtbare Kopfdaten. z.B. Angaben zu Titel, Metadaten oder auch Stylesheet-Angaben u.ä.)
  3. body (Körper - anzuzeigender Inhalt, also Text mit Überschriften, Verweisen, Grafikreferenzen usw.)
<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>aussagekräftiger Titel der Seite</title>
  </head>
  <body>
    <!-- Sichtbarer Dokumentinhalt im body -->
   <h1>Überschrift</h1>
    <p>Text innerhalb eines Absatzes</p>
  </body>
</html>

Dieses HTML5-Grundgerüst verwendet den kurzen Doctype <!DOCTYPE html>. Es gibt in älteren Codebeispielen im Netz längere Doctypes, die heute nicht mehr nötig sind.

Innerhalb des heads befinden sich zwei Meta-Tags. Der obere legt die Zeichenkodierung auf utf-8 fest. Damit können auch Umlaute, Sonderzeichen und Emojis (sifern sie vom Browser unterstützt werden, dargestellt werden. Der untere sorgt dafür, dass die Webseite auf mobilen Geräten skaliert werden kann. Das title-Element beinhaltet einen aussagekräftigen Titel der Seite

Der sichtbarer Dokumentinhalt wird im body notiert.

Seitenstrukturierung

Der sichtbare Dokumentinhalt sollte semantisch, d.h. nach seiner Bedeutung, ausgezeichnet werden. So sollten z.B. Überschriften als solche und nicht nur als größerer, fetterer Text gekennzeichnet werden. Dies ermöglicht es Ihnen Barrierefreie Seiten im Internet zu erstellen, die auch von Screeenreadern gelesen werden können.

<body> 
<header>
  <img src="logo.svg" alt="logo">
  <h1>Überschrift</h1> 
  <nav>
    <ul>
      <li><a href="#link_1.html">Wiki</a></li>
      <li><a href="#link_2.html">Blog</a></li>
      <li><a href="#link_3.html">Forum</a></li>
    </ul>
  </nav>
</header> 

<article>
  <h2>Unterüberschrift>
  <p>Textabsatz</p>
</article>

<aside>
  <h3>Sidebar</h3>
  <ul>
    <li>
      <a href="#">Linktext</a>
    </li>
  </ul>
</aside>

<footer> 
  <a href="kontakt.html">Kontakt</a> 
  <p>© 2017 by ZUM-Wiki</p> 
</footer> 
</body> 
</html>

Weblinks