Dies ist eine alte Version des Handbuchs und der Pattern Library (v1). Bitte wechseln Sie zur aktuellen Version (v2).

Zum Inhalt springen Barrierefreiheit auf wien.gv.at
Handbuch wien.gv.at

HTML-Elemente

Gestaltender Inhalt

Gestaltender Inhalt definiert den Text und das Markup.

Bilder

Das Element <img> fügt eine Grafik in ein Dokument ein.

Darstellung

Das Wiener Rathaus

HTML

<img src="/images/sizes/530/wienereistraum.jpg" alt="Das Wiener Rathaus"/>

Mehr zum Pattern „Bilder“.

Code

Das HTML-Code-Element (<code>) repräsentiert ein Fragment von Computer-Code.

<code>Code Element</code>

Hervorhebungen

Dies ist ein Absatz mit stark hervorgehobenem Inhalt (<strong>).

<p>Dies ist ein Absatz mit <strong>stark hervorgehobenem Inhalt</strong>.</p>

Dies ist ein Absatz mit hervorgehobenem Inhalt (<em>).

<p>Dies ist ein Absatz mit <em>hervorgehobenem Inhalt</em>.</p>

Mehr zum Thema „Hervorhebungen“.

Fließender Inhalt

Fließender Inhalt enthält typischerweise Text oder eingebetteten Inhalt.

Überschriften

Die Überschriften-Elemente bestehen aus 6 verschiedenen Leveln. <h1> ist die Überschrift mit der höchsten Gewichtung und <h6> die mit der kleinsten. Ein Überschriften-Element beschreibt das Thema des folgenden Textes.

Darstellung

Heading 1 – ExtraBold

Heading 2 – Regular

Heading 3 – Bold

Heading 4 – Bold

Heading 5 – Bold
Heading 6 – Bold

HTML

<h1>Heading 1 – ExtraBold</h1>
          <h2>Heading 2 – Regular</h2>
          <h3>Heading 3 – Bold</h3>
          <h4>Heading 4 – Bold</h4>
          <h5>Heading 5 – Bold</h5>
          <h6>Heading 6 – Bold</h6>

Semantisch geordnete Überschriften können optisch in anderen Größen dargestellt werden.

Darstellung

Heading 2 – ExtraBold

Heading 2 – Regular

Heading 2 – Bold

Heading 2 – Bold

Heading 2 – Bold

Heading 2 – Bold

HTML

<h2 class="wm-h1">Heading 2 – ExtraBold</h1>
          <h2 class="wm-h2">Heading 2 – Regular</h2>
          <h2 class="wm-h3">Heading 2 – Bold</h3>
          <h2 class="wm-h4">Heading 2 – Bold</h4>
          <h2 class="wm-h5">Heading 2 – Bold</h5>
          <h2 class="wm-h6">Heading 2 – Bold</h6>

Mehr zur Typografie und der Anwendung im Web (Font).

Button

Das <button>-Element erzeugt klickbare Schaltflächen für Aktionen.

Darstellung

HTML

<button>Senden</button>

Mehr zum Pattern „Buttons“.

Abkürzungen

Das <abbr>-Element erzeugt eine Abkürzung oder ein Akronym.

<p>Das <abbr title="Hyper Text Markup Language">HTML</abbr>-Abkürzungselement steht für eine Abkürzung oder ein Akronym.</p>

Adresse

Das<address>-Element stellt Kontaktdaten dar.

Darstellung

Adresse:
Bezirksvorstehung Ottakring,
16., Richard-Wagner-Platz 19, 1. Stock
Telefon: +43 1 4000-16111
E-Mail: post@bv16.wien.gv.at

HTML

<address>
            <strong>Adresse:</strong><br/>
            Bezirksvorstehung Ottakring,<br/>
            16., Richard-Wagner-Platz 19, 1. Stock<br/>
            Telefon: +43 1 4000-16111<br/>
            E-Mail: <a href="#">post@bv16.wien.gv.at</a>
          </address>

Fließtext hoch-/tiefstellen

Mit dem <sub> - Element wird ein Teil eines Fließtextes tiefgestellt, wie zum Beispiel in H2O.

<p>H<sub>2</sub>O</p>

Das Element <sup> stellt einen Teil eines Fließtextes hoch, wie zum Beispiel in m2.

<p>m<sup>2</sup></p>

Das <a>-Element (auch HTML-Anker-Element genannt) definiert einen Hyperlink, ein benanntes Ziel für einen Hyperlink oder beides.

Farbcodes für Links

  • Link-unbesucht: #1f4baf

  • Link-besucht: #a91eaf

  • Link-aktiv: #ff0000

Hier finden Sie alle Farben, die auf wien.gv.at verwendet werden können.

Listen

Ungeordnete Listen

Das <ul>-Element unordered list stellt eine Liste für Einträge ohne nummerische oder andere Ordnung dar. Die einzelnen Einträge innerhalb der Liste gelangen über <li>-Elemente in das <ul>-Element.

Darstellung

  • Element 1
    • Element 1
      • Element 1
    • Element 2
  • Element 2

HTML

<ul>
          <li>
            Element 1
            <ul>
              <li>
                Element 1
                <ul>
                  <li>Element 1</li>
                </ul>
              </li>
              <li>Element 2</li>
            </ul>
          </li>
          <li>Element 2</li>
        </ul>

Geordnete Listen

Das <ol>-Element ordered list stellt eine geordnete Liste mit Buchstaben, römischen oder regulären Zahlen dar. Die einzelnen Einträge innerhalb der Liste gelangen über <li>-Elemente in das <ol>-Element.

Geordnete Listen - Buchstaben

Darstellung

  1. Element 1
    1. Element 1
      1. Element 1
    2. Element 2
  2. Element 2

HTML

<ol type="A">
            <li>Element 1
              <ol type="a">
                <li>Element 1
                  <ol type="a">
                    <li>Element 1</li>
                  </ol>
                </li>
                <li>Element 2</li>
              </ol>
            </li>
            <li>Element 2</li>
          </ol>
Geordnete Listen - römische Zahlen

Darstellung

  1. Element 1
    1. Element 1
      1. Element 1
    2. Element 2
  2. Element 2

HTML

<ol type="I">
            <li>Element 1
              <ol type="i">
                <li>Element 1
                  <ol type="i">
                    <li>Element 1</li>
                  </ol>
                </li>
                <li>Element 2</li>
              </ol>
            </li>
            <li>Element 2</li>
          </ol>
Geordnete Listen - reguläre Zahlen

Darstellung

  1. Element 1
    1. Element 1
      1. Element 1
    2. Element 2
  2. Element 2

HTML

<ol>
            <li>Element 1
              <ol>
                <li>Element 1
                  <ol>
                    <li>Element 1</li>
                  </ol>
                </li>
                <li>Element 2</li>
              </ol>
            </li>
            <li>Element 2</li>
          </ol>

Definition Liste

Das <dl>-Element Description List Element stellt eine Liste von Begriffspaaren und Beschreibungen dar. Üblicherweise wird es für ein Glossar oder zur Anzeige von Metadaten (eine Liste von Schlüsselwertpaaren) genutzt.

Darstellung

Beglaubigungsvermerk
Bestätigung, dass die Kopie mit dem Original übereinstimmt.
Berufsvertretungsbehörde
Österreichische Botschaft oder Österreichisches Generalkonsulat im Heimatland.

HTML

<dl>
            <dt>Beglaubigungsvermerk</dt>
            <dd>Bestätigung, dass die Kopie mit dem Original übereinstimmt.</dd>

            <dt>Berufsvertretungsbehörde</dt>
            <dd>Österreichische Botschaft oder Österreichisches Generalkonsulat im Heimatland.</dd>
          </dl>

Mehr zum Pattern „Liste“.

Absatz

Das <p>-Element erzeugt einen Absatz, also einen zusammenhängenden Abschnitt eines längeren Textes. Es ist für jede Art zusammenhängenden Inhalt geeignet, zum Beispiel auch für Bilder oder Formularfelder.

<p>Das Element erzeugt einen Absatz, den zusammenhängenden Abschnitt eines längeren Textes.</p>

Tabelle

Das <table>-Element zeigt Daten in 2 oder mehr Dimensionen als Tabelle.

Darstellung

Kategorie Preis
Erwachsene (ab 18 Jahren) 5,90 €
Familien (1 Erwachsener und 1 Kind) 7,00 €
Jugendliche (15 bis 17 Jahre) 3,20 €
Kinder (7 bis 14 Jahre) 2,00 €
Kleinkinder (bis 6 Jahren) Gratis

HTML

<table>
            <thead>
              <tr>
                <th>Kategorie</th>

                <th>Preis</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>Erwachsene (ab 18 Jahren)</td>
                <td>5,90 €</td>
              </tr>
              <tr>
                <td>Familien (1 Erwachsener und 1 Kind)</td>
                <td>7,00 €</td>
              </tr>
              <tr>
                <td>Jugendliche (15 bis 17 Jahre)</td>
                <td>3,20 €</td>
              </tr>
              <tr>
                <td>Kinder (7 bis 14 Jahre)</td>
                <td>2,00 €</td>
              </tr>
              <tr>
                <td>Kleinkinder (bis 6 Jahren)</td>
                <td>Gratis</td>
              </tr>
            </tbody>
          </table>

Mehr zum Pattern „Tabelle“

Erweitertes Zitat

Das <blockquote>-Element Block Quotation Element zeigt den eingeschlossenen Text als Zitat. 

<blockquote>
        <p>
          Das <code>&lt;blockquote&gt;</code>-Element <span lang="en">Block Quotation</span>  Element zeigt den eingeschlossenen Text als Zitat.
        </p>
      </blockquote>

Zitat-Referenz

Das <cite>-Element verweist auf die Quelle, sei es eine wissenschaftliche, kreative oder journalistische Arbeit.

<p><cite>Das <code>&lt;cite&gt;</code> -Element verweist auf die Quelle, sei es eine wissenschaftliche, kreative oder journalistische Arbeit.</cite></p>

Quellen: