HTML5: Element body

Das Element body ist nach dem Element head das zweite Kindelement des Wurzelelementes html. Es gibt genau ein Element body in einem HTML5-Dokument. Es enthält den normalen, fließenden Inhalt des Dokumentes.

Gemäß Empfehlung darf das Element jeglichen fließenden Inhalt enthalten. Semantisch sinnvoll ist es jedoch praktisch immer, entweder ausschließlich Phraseninhalt oder Blockelemente zu verwenden.
Blockelemente sind in den strikten Varianten vorheriger Versionen die einzig erlaubten Inhalte von body. Dies ist auch semantisch die richtige Wahl.

Zusätzlich Phraseninhalt ist nur erlaubt, weil dies auch in den Übergangsvarianten vorheriger Versionen zulässig war. Typisch ist das kein sinnvoller Inhalt, allenfalls wenn lediglich Text als Antwort etwa auf eine Formularabsendung zurückgegeben wird.

Von der inhaltlichen Struktur ist es generell wichtig und richtig zu entscheiden, ob ein Element, welches fließenden Inhalt enthalten darf, nun ausschließlich Phraseninhalt oder Blockelemente enthalten soll. Dies gilt auch für das Element body. Es mag sehr wenige Anwendungsfälle geben, in welchen body nur Phraseninhalt enthält, etwa um die Dateigröße möglichst zu reduzieren.

In fast allen praktisch relevanten Fällen sind ausschließlich Blockelemente als Kindelemente von body die richtige Wahl.

Beispiel Dokument als Kapitel

Kapitel eines einfachen digitalen Buches (Format EPUB) als Beispiel:

<?xml version="1.0" encoding="UTF-8" ?>
<html xml:lang="de" lang="de" 
      xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Buchtitel: Kapiteltitel</title>
    <link href="hellaufdunkel.css" type="text/css" 
      title="hell auf dunkel" rel="Stylesheet" />
    <link href="dunkelaufhell.css" type="text/css" 
      title="dunkel auf hell" rel="Alternate Stylesheet" />
    <link href="kein.css" type="text/css" 
      title="kein CSS" rel="Alternate Stylesheet" />
  </head>
  <body>
    <h1>Kaptitelüberschrift</h1>

    <figure class="r">
      <svg viewBox="-1000 -1000 2000 2000" 
         xmlns="http://www.w3.org/2000/svg" 
         version="1.1">
        <!-- graphischer Inhalt … -->
      </svg>
    <figcaption>Abbildung 1: Beschreibung</figcaption>
    </figure>

    <p>Ein Absatz der Erzählung.</p>
    <p><em>Ein Dokument</em> kann natürlich <strong>viele Absätze</strong> enthalten.</p>
    <p>…</p>

  </body>
</html>

Beispiel Novelle

Eine Novelle als Beispiel für ein Einzeldokument:

<?xml version="1.0" encoding="UTF-8" ?>
<html xml:lang="de" lang="de" 
      xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Im Fluß</title>
    <link href="hellaufdunkel.css" type="text/css" 
      title="hell auf dunkel" rel="Stylesheet" />
    <link href="dunkelaufhell.css" type="text/css" 
      title="dunkel auf hell" rel="Alternate Stylesheet" />
    <link href="kein.css" type="text/css" 
      title="kein CSS" rel="Alternate Stylesheet" />
    <meta name="author" content="Lasse Machen" />
  </head>
  <body>
    <h1>Im Fluß</h1>

    <p>
    Novelle über die Menschen am Fluß in der Zeit nach dem Klimawandel.
    </p>

    <section>
     <h2>1. Mit der Flut leben</h2>

     <p>…</p>
     <p>…</p>

    </section>
    <section>
     <h2>2. Orkan!</h2>

     <p>…</p>
     <p>…</p>

    </section>
    <section>
     <h2>3. …</h2>

     <p>…</p>
     <p>…</p>

    </section>
    <address>
      Anbieterkennzeichnung …
    </address>
  </body>
</html>

Beispiel Journal

Kleines Netz-Journal mit verschiedenen Autoren als Beispiel:

<?xml version="1.0" encoding="UTF-8" ?>
<html xml:lang="de" lang="de" 
      xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Das Netzjournal: Ausgabe 2018-10-21</title>
    <link href="hellaufdunkel.css" type="text/css" 
      title="hell auf dunkel" rel="Stylesheet" />
    <link href="dunkelaufhell.css" type="text/css" 
      title="dunkel auf hell" rel="Alternate Stylesheet" />
    <link href="kein.css" type="text/css" 
      title="kein CSS" rel="Alternate Stylesheet" />
    <meta name="author" content="Wicki van Book" />
  </head>
  <body>
    <h1>Das Netzjournal</h1>

    <article>
     <h1>Schlagzeile</h1>

     <p>…</p>
     <p>…</p>
     
     <address>Autorenangabe</address>
    </article>
    <article>
     <h1>Schlagzeile</h1>

     <p>…</p>
     <p>…</p>
     
     <address>Autorenangabe</address>
    </article>
    <address>
      Anbieterkennzeichnung insgesamt …
    </address>
  </body>
</html>

Beispiel Projekt-Seite

Dokument eines größeren Projektes im Netz:

<?xml version="1.0" encoding="UTF-8" ?>
<html xml:lang="de" lang="de" 
      xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Dokumentüberschrift, Projekttitel</title>
    <link href="hellaufdunkel.css" type="text/css" 
      title="hell auf dunkel" rel="Stylesheet" />
    <link href="dunkelaufhell.css" type="text/css" 
      title="dunkel auf hell" rel="Alternate Stylesheet" />
    <link href="kein.css" type="text/css" 
      title="kein CSS" rel="Alternate Stylesheet" />
  </head>
  <body>
    <header><!-- Projektkopf, für alle Dokumente des Projektes gleich -->
      <h1>Projektüberschrift</h1>
    </header>
    <main><!-- Hauptthema des Dokumentes -->
      <h1>Dokumentüberschrift</h1>

      <p>…</p>
      <p>…</p>
     
    </main>

    <nav><!-- Projektnavigation -->
     <h2>Weitere Inhalte des Projektes</h2>
     <ul>
      <li><a href="a.xhtml">…</a></li>
      <li><a href="b.xhtml">…</a></li>
      <li>…</li>
     </ul>
    </nav>

    <aside><!-- Nebenbemerkung, Werbung -->
       …
    <aside>

    <footer><!-- Fußbereich, für alle Dokumente des Projektes gleich -->
      <ul>
        <li><a href="ak.xhtml">Anbieterkennzeichnung</a></li>
        <li><a href="dse.xhtml">Datenschutzerklärung</a></li>
        <li>…</li>
      </ul>
    </footer>
  </body>
</html>

Alternativ:

<?xml version="1.0" encoding="UTF-8" ?>
<html xml:lang="de" lang="de" 
      xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Dokumentüberschrift, Projekttitel</title>
    <link href="hellaufdunkel.css" type="text/css" 
      title="hell auf dunkel" rel="Stylesheet" />
    <link href="dunkelaufhell.css" type="text/css" 
      title="dunkel auf hell" rel="Alternate Stylesheet" />
    <link href="kein.css" type="text/css" 
      title="kein CSS" rel="Alternate Stylesheet" />
  </head>
  <body>
    <header><!-- Projektkopf, für alle Dokumente des Projektes gleich -->
      <h1>Projektüberschrift</h1>
    </header>
     <nav><!-- Navigation im Dokument -->
     <h2>Kapitel</h2>
     <ul>
      <li><a href="#k01">Überschrift zu Kapitel 1</a></li>
      <li><a href="#k02">Überschrift zu Kapitel 2</a></li>
      <li>…</li>
     </ul>
    </nav>
    <main><!-- Hauptthema des Dokumentes -->
      <h1>Dokumentüberschrift</h1>
 
      <section id="k01">
       <h2>Überschrift zu Kapitel 1</h2>
        <p>…</p>
        <p>…</p>
      </section>
      <section id="k02">
       <h2>Überschrift zu Kapitel 2</h2>
        <p>…</p>
        <p>…</p>
      </section>
      <section id="k03">
         …
      </section>
     
    </main>

    <footer><!-- Fußbereich, für alle Dokumente des Projektes gleich -->
     <nav><!-- Projektnavigation 
           problematisch hier: 
           Verweise auf das aktuelle Dokument sind nicht sinnvoll,
           etwa per PHP-Skript läßt sich das aktuelle Dokument 
           in der Verweisliste aber vor dem Absenden deaktivieren.-->
      <h2>Weitere Inhalte des Projektes</h2>
      <ul>
       <li><a href="a.xhtml">…</a></li>
       <li><a href="b.xhtml">…</a></li>
       <li>…</li>
       <li><a href="ak.xhtml">Anbieterkennzeichnung</a></li>
       <li><a href="dse.xhtml">Datenschutzerklärung</a></li>
      </ul>
     </nav>
    </footer>
  </body>
</html>

Zurück zu Metadaten |

Hoch zum Inhaltsverzeichnis |

Vor zu Gruppierung