02-html-pokracovani/02-html5.html

<!DOCTYPE html>
<html lang="cs">
  <head>
    <title>Ukázka strukturování stránky pomocí HTML5</title>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
  </head>
  <body>

    <!-- Ukázka využití některých nových tagů z HTML5 - záměrně bez využití CSS -->

    <div> <!-- pokud je potřebujeme k formátování, můžeme stále využívat i nesémantické značky :) -->

      <header>
        <h1>Ukázkový web</h1>
      </header>

      <nav>
        <ul>
          <li><a href="#">odkaz</a></li>
          <li><a href="#">odkaz</a></li>
        </ul>
      </nav>

      <main>
        <h2>Novinky</h2>

        <article>
          <h2>Lorem ipsum</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
        </article>

        <article>
          <h2>Lorem ipsum</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
        </article>

      </main>

      <aside>
        Doplňkový obsah
      </aside>

      <footer>Patička stránek</footer>

    </div>

  </body>
</html>