<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html
  PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title> Semantische Tag, nav </title>
    <meta name="author" content="Administrator"/>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" type="text/css"
      href="html5-nav.css" title="style1"/>
    </head>
    
<body>
  <main>
    <h1>Semantischen Tag, mit nav</h1>
    <nav>
      <a href="Struktur.html" title="Struktur">Struktur</a> |
      <a href="Darstellung.html" title="Darstellung">Darstellung</a> |
      <a href="Formulare.html" title="Formulare">Formulare</a> |
      <a href="Verweise.html" title="Verweise">Verweise</a>
    </nav>
    <nav id="nav1">
      <ul>
        <li><a href="Struktur.html" title="Struktur">Struktur</a></li>
        <li><a href="Darstellung.html" title="Darstellung">Darstellung</a></li>
        <li><a href="Formulare.html" title="Formulare">Formulare</a></li>
        <li><a href="Verweise.html" title="Verweise">Verweise</a></li>
      </ul>
    </nav>
    <article >
      <header></header>
      <section>
        <aside>
          <h3>Seitenleiste</h3>
          <ul>
            <li>Menü1</li>
            <li>Menü2</li>
            <li>Menü3</li>
          </ul>
        </aside>
        <h1>Hauptüberschrift</h1>
        <summary>
          <p>CSS mit den semantischen Tag ist nicht ganz leicht</p>
          <p>Aber die Studenten sind <em>sehr</em> lernfähig</p>
          <p>Das Layout ist momentan noch überschaubar</p>
          <p>In den nächsten Beispielen wird es schwerer</p>
        </summary>
        <details>
          Diese Variante wird <em>nicht</em> über Java-Skript realisiert. <br />
          hier ist der neue HTML Quellcode:<br />
          &#60;details&#62;<br />
          &#60;/details&#62;<br />
        </details>
      </section>
      
      <section>
        <aside>
          <h3>2. Seitenleiste</h3>
          <ul>
            <li>Menü4</li>
            <li>Menü5</li>
            <li>Menü6</li>
          </ul>
        </aside>
        <h1>2. Hauptüberschrift</h1>
        <p>CSS mit den semantischen Tag ist nicht ganz leicht</p>
        <p>Aber die Studenten sind <em>sehr</em> lernfähig</p>
        <p>Das Layout ist momentan noch überschaubar</p>
        <p>In den nächsten Beispielen wird es schwerer</p>
      </section>
      <footer>
        Copyright &#169; by Michael Wilhelm
      </footer>
      
    </article>
    
  </main>
</body>

</html>


