<?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's </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_semant-basis5.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="nav_sub1">
    <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>

















