Beispiel: Inhalte gruppieren

Dieses Beispiel zeigt den praktischen Einsatz von Gruppierungs-Tags: <section>, <div>, <p>, <blockquote>, <ul> und <hr> im Zusammenspiel.

Das tagnames.css macht alle Tags durch farbige Labels sichtbar.

<main>
  <section>
    <h2>Text-Absatz und Zitat</h2>
    <hr>
    <div>
      <p>Lorem ipsum ...</p>
      <blockquote>Hier kommt ein berühmtes Zitat....</blockquote>
      <p>Lorem ipsum ...</p>
    </div>
  </section>

  <section>
    <h2>Eine ungeordnete Liste</h2>
    <ul>
      <li>Punkt 1</li>
      <li>Punkt 2</li>
    </ul>
  </section>
</main>

<footer>
  <address>Universitätsstraße 9, 79098 Freiburg</address>
</footer>

Beispiel: Inhalte gruppieren

Text-Absatz und Zitat

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Hier kommt ein berühmtes Zitat....

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Eine ungeordnete Liste und Text

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

  • Punkt 1
  • Punkt 2
  • Punkt 3

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.