HTML: Textblockelemente

Überschriften und Absätze

Um Überschriften zu kennzeichnen stehen entsprechend der Ordnung einer Überschrift die sechs Elemente <h1>, <h2>, <h3>, <h4>, <h5> und <h6> zur Verfügung.

Reguläre Textabsätze werden mit dem <p>-Element gekennzeichnet.

Überschriften und Absätze dürfen selbst keine weiteren Blockelemente enthalten.

Code kopieren

  <body>
    <h1>Überschrift 1. Ordnung</h1>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
    <h2>Überschrift 2. Ordnung</h2>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
    <h3>Überschrift 3. Ordnung</h3>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
    <h4>Überschrift 4. Ordnung</h4>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
    <h5>Überschrift 5. Ordnung</h5>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
    <h6>Überschrift 6. Ordnung</h6>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
  </body>

Mit dem Element <hgroup> (heading group) können Überschriften und ergänzende Blockelemente zusammengefasst werden, beispielsweise ein Untertitel.

Code kopieren

    <hgroup>
      <h1>Family Guy</h1>
      <p class='subtitle'>Staffel 2</p>
    </hgroup>

Zitate

Um Zitate zu kennzeichnen, steht in HTML das <blockquote>-Tag zur Verfügung, das ein Blockelement erzeugt. Für Inline-Zitate innerhalb eines Blockelements wie <p> wird das Tag <q> verwendet. Eine Quellenangabe wird mit <cite> markiert.

Code kopieren

      <p>Ein bekanntes Zitat von Albert Einstein lautet:</p>
      <blockquote>Zwei Dinge sind unendlich, das Universum und die menschliche Dummheit,
        aber bei dem Universum bin ich mir noch nicht ganz sicher.</blockquote>

      <blockquote>Gerade so, wie der Wind ein Boot auf dem Wasser fort treibt, so kann jeder
        der rastlosen Sinne den Geist eines unbeherrschten Menschen verführen und ihn um den
        Verstand bringen. <cite>Bhagavad-Gita 2.67</cite></blockquote>

      <p>The W3C page <cite>About W3C</cite> says the W3C's mission is
        <q cite='http://www.w3.org/Consortium/'>To lead the World Wide Web to its full
        potential by developing protocols and guidelines that ensure long-term growth for
        the Web</q>. I disagree with this mission.</p>

Quelltext

Mit dem <pre>-Tag (preformatted) wird Text markiert, der genau so dargestellt werden soll, wie er im Texteditor geschrieben wurde. Insbesondere mehrfache Leerzeichen und Zeilenumbrüche aus dem Quelltext bleiben so erhalten. Im Quelltext muss in diesem Fall auf eine Texteinrückung verzichtet werden, wenn diese nicht ebenfalls gerendert werden soll. Der Text wird in der Regel in dicktengleicher Schrift (Monospace) dargestellt. Die reservierten Zeichen < und > müssen maskiert werden, um korrekt dargestellt zu werden.

Code kopieren

<p>Das Grundgerüst einer HTML-Datei sieht beispielsweise so aus:</p>
<pre>
&lt;html&gt;
  &lt;head&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &amp;nbsp;
  &lt;/body&gt;
&lt;/html&gt;
</pre>

Adressen

Das Tag <address> erzeugt ein Blockelement, mit dem Adressen gekennzeichnet werden können.

Code kopieren

      <address>Maria Mustermensch, Dorfstraße 12, 12345 Musterhausen</address>

Aufklappbarer Block

Mit Hilfe der Elemente <details> und <summary> kann ein aufklappbarer Abschnitt markiert werden.

Code kopieren

    <main>
      <details><summary>Weitere Informationen</summary>
        <div>Autor: Holger Löwenherz</div>
        <div>Version: 1.0</div>
      </details>
    </main>