decocode decocode deco    

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.

Quelltext auswählen
1
2
3
4
5
6
7
8
9
10
11
12
13
14
  <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>

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.

Quelltext auswählen
1
2
3
4
5
6
7
8
9
10
11
12
      <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.

Quelltext auswählen
1
2
3
4
5
6
7
8
9
10
<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.

Quelltext auswählen
1
      <address>Maria Mustermensch, Dorfstraße 12, 12345 Musterhausen</address>

Aufklappbarer Block #

Mit Hilfe der Elemente <details> und <summary> kann ein aufklappbarer Abschnitt markiert werden. Diese Elemente werden von Firefox ≤ 32 und Opera ≤ 12.16 nicht unterstützt.

Quelltext auswählen
1
2
3
4
5
6
    <main>
      <details><summary>Weitere Informationen</summary>
        <div>Autor: Uriel Löwenherz</div>
        <div>Version: 1.0</div>
      </details>
    </main>