Zum Inhalt springen
Handbuch wien.gv.at
Startseite wien.gv.at

Tutorial: Seitenstruktur wien.gv.at

In diesem Tutorial erstellen wir die grundlegende Struktur einer wien.gv.at-Seite. Wir konzentrieren uns dabei ausschließlich auf die Inhalte innerhalb des body-Elements.

Der Aufbau der Seite und des head-Elements wird auf der Seite "Erste Schritte" erklärt.

Das Ergebnis dieses Tutorials ist diese Template-Seite.

HTML anzeigen 
<!-- Natürliche Sprache des Dokuments. Anpassen, wenn das Dokument nicht auf Deutsch ist. -->
<!-- Die CSS-Klasse "wien" ist nur für den Standard wien.gv.at-Header notwendig -->
<!DOCTYPE html>
<html lang="de" class="wien">
  <head>
    <!-- Encoding der Seite, muss im Dokument vor dem <title> kommen -->
    <meta charset="UTF-8">
    <!-- Viewport Meta Tag für responsive Designs, muss im Dokument vor dem <title> kommen. -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Seitentitel. Muss einzigartig sein. -->
    <title>Template: Seitenstruktur wien.gv.at | Stadt Wien</title>

    <!-- Wiener Melange Stylesheet -->
    <link rel="stylesheet" href="https://assets.wien.gv.at/theme/202/css/wiener-melange.bundle.min.css">

    <!-- Font für bessere Performance vorladen -->
    <link rel="preload" href="https://assets.wien.gv.at/theme/202/fonts/WienerMelangeVF.woff2" as="font" type="font/woff2" crossorigin>

    <!-- Buttons -->
    <script src="https://assets.wien.gv.at/theme/202/js/components/Button/Button.js" type="module"></script>
    <!-- Karussells -->
    <script src="https://assets.wien.gv.at/theme/202/js/components/Carousel/Carousel.js" type="module"></script>
    <!-- CTA -->
    <script src="https://assets.wien.gv.at/theme/202/js/components/CTA/CTA.js" type="module"></script>
    <!-- Cards -->
    <script src="https://assets.wien.gv.at/theme/202/js/components/Card/Card.js" type="module"></script>
    <!-- Extrahiert und zeigt Copyright-Information aus Bildern an -->
    <script src="https://assets.wien.gv.at/theme/202/js/components/Copyright/Copyright.js" type="module"></script>
    <!-- Grid -->
    <script src="https://assets.wien.gv.at/theme/202/js/components/Grid/Grid.js" type="module"></script>
    <!-- Header durch JavaScript angereichert -->
    <script src="https://assets.wien.gv.at/theme/202/js/components/Header/Header.js" type="module"></script>
    <!-- Icons -->
    <script src="https://assets.wien.gv.at/theme/202/js/components/Icon/Icon.js" type="module"></script>
    <!-- Erweitert Listen -->
    <script src="https://assets.wien.gv.at/theme/202/js/components/List/List.js" type="module"></script>
    <!-- Modals -->
    <script src="https://assets.wien.gv.at/theme/202/js/components/Modal/Modal.js" type="module"></script>
    <!-- Hauptnavigation durch JavaScript angereichert -->
    <script src="https://assets.wien.gv.at/theme/202/js/components/NavMain/NavMain.js" type="module"></script>
    <!-- Form -->
    <script src="https://assets.wien.gv.at/theme/202/js/components/Form/Form.js" type="module"></script>
    <!-- Input -->
    <script src="https://assets.wien.gv.at/theme/202/js/components/Input/Input.js" type="module"></script>
    <!-- Stage -->
    <script src="https://assets.wien.gv.at/theme/202/js/components/Stage/Stage.js" type="module"></script>
    <!-- Quicklinks -->
    <script src="https://assets.wien.gv.at/theme/202/js/components/Quicklinks/Quicklinks.js" type="module"></script>
    <!-- Sections -->
    <script src="https://assets.wien.gv.at/theme/202/js/components/Section/Section.js" type="module"></script>
    <!-- Tables -->
    <script src="https://assets.wien.gv.at/theme/202/js/components/Table/Table.js" type="module"></script>

    <!-- Favicon für ältere Browser -->
    <link rel="icon" href="/favicon.svg" type="image/svg+xml">
    <!-- Alternative für favicon.ico, skalierbar und berücksichtigt Dark Mode. (Browser Support: https://caniuse.com/link-icon-svg) -->
    <link rel="icon" href="/favicon.svg" type="image/svg+xml">
    <!-- Homescreen Icon für iOS -->
    <link rel="apple-touch-icon" href="/apple-touch-icon.png">
    <!-- Kanonische URL -->
    <link rel="canonical" href="https://handbuch.wien.gv.at/development/tutorials/seitenstruktur/">

    <!-- Beschreibung der Seite, maximal 150 Zeichen lang, muss einzigartig sein. -->
    <meta name="description" content="Beschreibung der Seite">
    <!-- Farbe des UI im Browser. Anpassen oder entfernen.-->
    <meta name="theme-color" content="#75cde3">

    <!-- Seitentitel -->
    <meta property="og:title" content="Seitentitel">
    <!-- Beschreibung der Seite -->
    <meta property="og:description" content="Beschreibung der Seite">
    <!-- Absoluter Pfad zum Vorschaubild. Muss geändert werden -->
    <meta property="og:image" content="https://handbuch.wien.gv.at/images/meta.png">
    <!-- Sprache der Seite -->
    <meta property="og:locale" content="de">
    <!-- Seitentyp -->
    <meta property="og:type" content="website">
    <!-- Url der Seite. Muss geändert werden -->
    <meta property="og:url" content="https://wwww.wien.gv.at">
    <!-- Großes Vorschaubild auf X -->
    <meta name="twitter:card" content="summary_large_image">
    <!-- Handle der Site auf X. Anpassen, entfernen oder so lassen. -->
    <meta name="twitter:site" content="@StadtWien">
  </head>
  <body>
    <!-- Skip-Link -->
    <div class="wm-skip-link wm-h-vh">
      <a href="#content" class="wm-e-button">
        Zum Inhalt springen
      </a>
    </div>
    <!-- Header auf jeder Seite -->
    <wm-header>
      <!-- Erster Container im Header. -->
      <div>
        <!-- 1. wird das Stadt Wien Logo eingebunden und linkt immer zur wien.gv.at Startseite -->
        <a href="https://wien.gv.at">
          <svg viewBox="0 0 311 142" width="80" role="img" aria-labelledby="site-logo1">
            <title id="site-logo1">Startseite wien.gv.at</title>

            <path fill="#FF0000" d="M55.3 53.6V15.3H14.2c0 13.3 1 26.2 2.9 38.3h38.2zM55.3 65.7h-36c6.9 32.7 20.2 57.1 36 62.2V65.7zM67.3 53.6V15.3h41.1c0 13.3-1 26.2-2.9 38.3H67.3zM67.3 65.7h36c-6.9 32.7-20.2 57.1-36 62.2V65.7z"></path>
            <path fill="currentColor" d="M153.5 65.2c-2.4 0-4.7-.3-6.9-1s-4.4-1.7-6.6-3.1l1.3-8.4h.3c2.1 1.6 4.1 2.7 6.2 3.3 2.1.6 4 .9 5.7.9 5 0 7.5-1.9 7.5-5.6 0-1.3-.4-2.5-1.1-3.5-.7-1-2-2.1-3.8-3.1l-6-3.4c-3.5-1.9-5.9-4-7.4-6.2s-2.2-4.7-2.2-7.4c0-4.2 1.4-7.5 4.2-9.9 2.8-2.4 6.6-3.6 11.3-3.6 4.3 0 8.3 1.1 11.9 3.2l-1.3 8.1h-.3c-1.4-1-3-1.7-4.9-2.2-1.9-.5-3.6-.7-5.3-.7-4.4 0-6.6 1.7-6.6 5 0 1.2.4 2.3 1.1 3.3.8 1 2.2 2.1 4.4 3.3l5.3 2.9c3.3 1.8 5.8 3.8 7.3 6s2.3 4.8 2.3 7.8c0 4.5-1.5 8-4.5 10.6-2.8 2.5-6.8 3.7-11.9 3.7zM183.8 64c-1.6-2.2-2.7-4.6-3.5-7.4-.8-2.8-1.2-6-1.2-9.5V39h-5.7v-7.6h5.7v-9.7h9v9.7h7.7l-1.3 7.6H188v7.4c0 3.7.5 6.9 1.5 9.6 1 2.7 2.4 5.3 4.3 7.6v.4h-10zM209 64.6c-3.2 0-5.7-.8-7.5-2.5-1.9-1.7-2.8-4-2.8-7.1 0-3.1 1.1-5.5 3.2-7.3 2.2-1.8 5.1-2.8 8.8-3.2l9.1-.9v-.1c0-1.8-.5-3.1-1.5-4-1-.9-2.8-1.4-5.4-1.4-1.9 0-3.9.2-5.9.7-2 .5-3.6 1-4.8 1.6h-.4l1.3-7.7c1.4-.6 3.1-1 5.1-1.5 2-.4 4.2-.6 6.4-.6 4.9 0 8.5 1.1 10.8 3.4 2.3 2.3 3.4 5.6 3.4 10v10.4c0 1.7.1 3.4.4 5 .2 1.6.6 3 1.2 4.2v.4h-8.5c-.3-.6-.5-1.5-.7-2.4-.2-1-.3-1.9-.4-2.7h-.4c-.8 1.6-2.3 2.9-4.3 4s-4.4 1.7-7.1 1.7zm-1.1-10.3c0 1 .3 1.8.9 2.4.6.6 1.7 1 3.1 1 2.3 0 4.1-.7 5.6-2s2.2-3.1 2.2-5.2v-.8l-6.9.8c-1.7.2-3 .6-3.8 1.1-.7.6-1.1 1.5-1.1 2.7zM260.9 64v-4.9h-.4c-1 1.8-2.4 3.2-4.3 4.2s-4 1.5-6.4 1.5c-2.9 0-5.4-.7-7.6-2.1-2.2-1.4-3.9-3.4-5.1-6-1.2-2.6-1.8-5.6-1.8-9 0-3.4.6-6.4 1.8-9 1.2-2.6 2.9-4.5 5.1-6 2.2-1.4 4.7-2.1 7.6-2.1 2.2 0 4.2.4 6 1.3 1.8.9 3.2 2.1 4.2 3.6h.5V15.3h9.1V64h-8.7zm-8.1-7c2.5 0 4.4-.9 5.9-2.6 1.5-1.7 2.2-4 2.2-6.7 0-2.8-.7-5.1-2.2-6.7-1.5-1.7-3.5-2.5-5.9-2.5-2.5 0-4.5.8-5.9 2.5-1.5 1.6-2.2 3.9-2.2 6.8 0 2.8.7 5.1 2.2 6.7 1.4 1.6 3.3 2.5 5.9 2.5zM284.9 64c-1.6-2.2-2.7-4.6-3.5-7.4-.8-2.8-1.2-6-1.2-9.5V39h-5.7v-7.6h5.7v-9.7h9v9.7h7.7l-1.3 7.6h-6.4v7.4c0 3.7.5 6.9 1.5 9.6 1 2.7 2.4 5.3 4.3 7.6v.4h-10.1zM161.6 126.1h-11c-1.1-2.4-2.3-5.4-3.5-9-1.3-3.6-2.5-7.5-3.6-11.9-1.2-4.4-2.2-8.9-3.1-13.7-.9-4.7-1.5-9.4-1.8-14.1h9.9c.3 4.3.9 8.8 1.7 13.5.8 4.7 1.7 9.2 2.8 13.7 1.1 4.4 2.2 8.5 3.4 12.2h.5l9.9-33h7.3l9.9 33h.5c1.2-3.7 2.3-7.8 3.3-12.2 1-4.4 1.9-9 2.7-13.7.8-4.7 1.3-9.2 1.7-13.5h9.7c-.3 4.7-1 9.4-1.8 14.1-.9 4.7-1.9 9.3-3.1 13.7-1.2 4.4-2.4 8.3-3.6 11.9-1.3 3.6-2.4 6.6-3.5 9h-11l-8.2-27.4h-.7l-8.4 27.4zM213.1 88.3c-1.7 0-3.1-.5-4.2-1.6s-1.6-2.4-1.6-4 .5-3 1.6-4 2.5-1.6 4.2-1.6c1.7 0 3.1.5 4.2 1.6 1.1 1 1.6 2.4 1.6 4s-.5 2.9-1.6 4c-1.1 1-2.5 1.6-4.2 1.6zm-4.6 37.8V93.4h9.1v32.7h-9.1zM241.4 126.9c-3.6 0-6.6-.7-9.2-2.1-2.6-1.4-4.6-3.4-5.9-5.9-1.4-2.6-2.1-5.5-2.1-9 0-3.6.7-6.7 2.2-9.3 1.5-2.6 3.5-4.6 6-5.9 2.6-1.4 5.5-2.1 8.7-2.1 4.8 0 8.5 1.5 11.2 4.4 2.7 2.9 4 7 4 12.2v2l-22.5 2.5c.6 2 1.7 3.4 3.2 4.2 1.6.8 3.5 1.2 5.7 1.2 2.1 0 4.2-.3 6.4-.8 2.1-.6 3.7-1.2 4.8-1.9h.5l-1.3 7.8c-1.2.6-2.9 1.2-5.1 1.8-2.1.6-4.3.9-6.6.9zm-.5-27c-2 0-3.7.6-5 1.9-1.3 1.2-2.1 3.1-2.4 5.6l13.9-1.6c-.3-2-1-3.5-2.1-4.4-1.3-1-2.7-1.5-4.4-1.5zM262.6 126.1V93.4h8.2V99h.4c.8-1.9 2.2-3.4 4.1-4.6 1.9-1.1 4.1-1.7 6.6-1.7 3.8 0 6.8 1.3 9 3.8s3.3 6.1 3.3 10.6v19.1h-9.1v-17.9c0-5.1-2.1-7.7-6.3-7.7-2.1 0-3.8.8-5.1 2.3-1.3 1.5-1.9 3.5-1.9 6v17.3h-9.2z"></path>
          </svg>
        </a>

        <!-- 2. kann, wenn Suche vorhanden, das Suchfeld eingebunden werden-->
        <wm-form role="search">
          <wm-input label="Suche" hideLabel="hideLabel" placeholder="Wie können wir helfen?" search="hiddenmobile"></wm-input>
        </wm-form>
        <!-- 3. Standard Menü einbinden -->
        <wm-nav-main type="hidden">
  <a href="/nojs" class="fallback">
    Menü
    <svg width="26" height="26" viewBox="0 0 123.14 123.14" id="burger" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h123.14v123.14H0z"/><path d="M17.67 27.59h87v-6h-87zM17.67 58.57h87v6h-87zM17.67 95.49h87v6h-87z"/>
    </svg>
  </a>
  <div slot="precontent">
    <wm-stack horizontal="" gap="xs" alignment="center">
      <wm-icon iconid="language"></wm-icon>
      <wm-list type="horizontal" separator="pipe" gap="xxs">
        <ul>
          <li><a href="#">English</a></li>
          <li><a href="#">Bosanski Hrvatski Srpski</a></li>
          <li><a href="#">Türkçe</a></li>
        </ul>
      </wm-list>
    </wm-stack>
  </div>
  <ul>
    <li>
      <a href="#">
        <wm-icon iconid="home"></wm-icon>
        Startseite
      </a>
    </li>
    <li>
      <a href="#">
        <wm-icon iconid="pin"></wm-icon>
        Stadtplan
      </a>
    </li>
    <li>
      <a href="#">
        <wm-icon iconid="amtswege"></wm-icon>
        Amtswege
      </a>
    </li>
    <li>
      <a href="#">
        <wm-icon iconid="contact"></wm-icon>
        Kontakte
      </a>
    </li>
    <li>
      <a href="#">
        <wm-icon iconid="money"></wm-icon>
        Jobs
      </a>
    </li>
  </ul>
  <ul>
    <li>
      <a href="#">
        Freizeit
      </a>
      <ul>
        <li>
          <a href="#">
            Veranstaltungen
          </a>
        </li>
        <li>
          <a href="#">
            Baden
          </a>
        </li>
        <li>
          <a href="#">
            Sport
          </a>
          <ul>
            <li><a href="#">Übersicht</a></li>
            <li><a href="#">Sportmöglichkeiten</a></li>
            <li><a href="#">Kurse</a></li>
            <li><a href="#">Vereine</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li>
      <a href="#">
        Wohnen
      </a>
      <ul>
        <li><a href="#">Menüpunkt 1</a></li>
        <li><a href="#">Menüpunkt 2</a></li>
      </ul>
    </li>
    <li>
      <a href="#">
        Verkehr
      </a>
      <ul>
        <li><a href="#">Menüpunkt 1</a></li>
        <li><a href="#">Menüpunkt 2</a></li>
      </ul>
    </li>
    <li>
      <a href="#">
        Bildung
      </a>
      <ul>
        <li><a href="#">Menüpunkt 1</a></li>
        <li><a href="#">Menüpunkt 2</a></li>
      </ul>
    </li>
    <li>
      <a href="#">
        Gesundheit
      </a>
      <ul>
        <li><a href="#">Menüpunkt 1</a></li>
        <li><a href="#">Menüpunkt 2</a></li>
      </ul>
    </li>
    <li>
      <a href="#">
        Umwelt
      </a>
      <ul>
        <li><a href="#">Menüpunkt 1</a></li>
        <li><a href="#">Menüpunkt 2</a></li>
      </ul>
    </li>
    <li>
      <a href="#">
        Zusammenleben
      </a>
      <ul>
        <li><a href="#">Menüpunkt 1</a></li>
        <li><a href="#">Menüpunkt 2</a></li>
      </ul>
    </li>
    <li>
      <a href="#">
        Stadtentwicklung
      </a>
      <ul>
        <li><a href="#">Menüpunkt 1</a></li>
        <li><a href="#">Menüpunkt 2</a></li>
      </ul>
    </li>
    <li>
      <a href="#">
        Politik
      </a>
      <ul>
        <li><a href="#">Menüpunkt 1</a></li>
        <li><a href="#">Menüpunkt 2</a></li>
      </ul>
    </li>
    <li>
      <a href="#">
        Wirtschaft
      </a>
      <ul>
        <li><a href="#">Menüpunkt 1</a></li>
        <li><a href="#">Menüpunkt 2</a></li>
      </ul>
    </li>
  </ul>
  <div>
    <wm-list type="horizontal">
      <ul>
        <li><a href="https://facebook.com/wien.at" class="wm-no-external-icon" target="_blank"><wm-icon iconid="facebook">Facebook</wm-icon></a></li>
        <li><a href="https://instagram.com/stadtwien" class="wm-no-external-icon" target="_blank"><wm-icon iconid="instagram">Instagram</wm-icon></a></li>
        <li><a href="https://x.com/Stadt_Wien" class="wm-no-external-icon" target="_blank"><wm-icon iconid="twitter">X (Twitter)</wm-icon></a></li>
        <li><a href="https://tiktok.com/@stadtwien" class="wm-no-external-icon" target="_blank"><wm-icon iconid="tiktok">TikTok</wm-icon></a></li>
        <li><a href="https://youtube.com/channel/UCGLOly45we_1ZTXAXF7TZDA" class="wm-no-external-icon" target="_blank"><wm-icon iconid="youtube">YouTube</wm-icon></a></li>
        <li><a href="https://www.wien.gv.at/bot/" class="wm-no-external-icon" target="_blank"><wm-icon iconid="wien-bot">Wienbot</wm-icon></a></li>
      </ul>
    </wm-list>
    <p>
      <a href="#">
        <strong>NEWSLETTER</strong>
      </a>
    </p>
  </div>
</wm-nav-main>
      </div>
    </wm-header>

    <!-- Hauptinhalt der Seite -->
    <main id="content">
      <!-- Titel der Seite -->
      <wm-stage>
        <h1 slot="content">Template: Seitenstruktur wien.gv.at</h1>
      </wm-stage>

      <wm-section contentsize="text">
        <h2>Überschrift 1</h2>
        <p>
          Inhalte der Seite folgen...
        </p>
      </wm-section>

      <wm-section contentsize="text">
        <h2>Überschrift 2</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia sunt quidem, provident repudiandae, neque eveniet optio perspiciatis similique dicta, atque architecto pariatur itaque! Ut eaque quasi eius expedita earum aperiam?</p>
      </wm-section>

      <wm-section contentsize="text">
        <h2>Überschrift 3</h2>
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Atque provident ratione ab excepturi exercitationem dicta, eaque sunt, dolores laboriosam sapiente, voluptatum temporibus dolorem optio ad possimus deleniti vitae. Voluptatibus, laboriosam!</p>
      </wm-section>

      <wm-section contentsize="text">
        <h2>Überschrift 4</h2>
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tenetur voluptatem cupiditate laboriosam, cumque recusandae earum nobis fuga labore velit rem est nesciunt laudantium distinctio beatae consectetur dignissimos iusto. Ad, voluptate.</p>
      </wm-section>
    </main>

    <!-- Der Footer -->
    <footer>
      <!-- Copyright-Information wird aus Bildern extrahiert und automatisch angezeigt-->
      <wm-copyright></wm-copyright>
      <!-- Weiterführende Links -->
      <wm-list type="horizontal" separator="pipe" alignment="center">
        <ul></ul>
      </wm-list>
      <p><small>© Stadt Wien, Rathaus, A-1010 Wien</small></p>

      <!-- Button zum Seitenanfang springen-->
      <wm-button kind="secondary" round id="wm-button-to-top">
        <a class="wm-e-button" href="#content"><wm-icon iconid="chevron-up" width="28">Zum Seitenanfang</wm-icon></a>
      </wm-button>
    </footer>

    <!-- Live-Region -->
    <div role="status" class="wm-h-vh"></div>
    <!-- Wrapper für Modals -->
    <wm-modal></wm-modal>
  </body>
</html>

Der Skip-Link

Wir starten mit dem 1. Element auf der Seite, dem Skip-Link. Dieser ermöglicht es Keyboard-Nutzer*innen, den Header zu überspringen und direkt zum Hauptinhalt zu springen. 

<div class="wm-skip-link wm-h-vh">
  <a href="#content" class="wm-e-button">
    Zum Inhalt springen
  </a>
</div>
Zum Inhalt springen
Beispiel: Skip-Link

Der Header

Jede Website verfügt über einen Header (<wm-header>). Dieser befindet sich am Anfang der Seite, folgt im Document Object Model (DOM) auf den Skip-Link, falls vorhanden, und wird visuell an der oberen Kante des Viewports fixiert. 

<!-- Skip-Link -->
<div class="wm-skip-link wm-h-vh">
  <a href="#content" class="wm-e-button">
    Zum Inhalt springen
  </a>
</div>

<!-- Header  -->
<wm-header>
  <!-- Erster Container im Header. -->
  <div></div>
</wm-header>
<!-- Header auf jeder Seite -->
<wm-header>
  <!-- Erster Container im Header. -->
  <div>
    <!-- 1. wird das Stadt Wien Logo eingebunden und linkt immer zur wien.gv.at Startseite -->
    <a href="https://wien.gv.at">
      <svg viewBox="0 0 311 142" width="80" role="img" aria-labelledby="site-logo1">
        <title id="site-logo1">Startseite wien.gv.at</title>

        <path fill="#FF0000" d="M55.3 53.6V15.3H14.2c0 13.3 1 26.2 2.9 38.3h38.2zM55.3 65.7h-36c6.9 32.7 20.2 57.1 36 62.2V65.7zM67.3 53.6V15.3h41.1c0 13.3-1 26.2-2.9 38.3H67.3zM67.3 65.7h36c-6.9 32.7-20.2 57.1-36 62.2V65.7z"></path>
        <path fill="currentColor" d="M153.5 65.2c-2.4 0-4.7-.3-6.9-1s-4.4-1.7-6.6-3.1l1.3-8.4h.3c2.1 1.6 4.1 2.7 6.2 3.3 2.1.6 4 .9 5.7.9 5 0 7.5-1.9 7.5-5.6 0-1.3-.4-2.5-1.1-3.5-.7-1-2-2.1-3.8-3.1l-6-3.4c-3.5-1.9-5.9-4-7.4-6.2s-2.2-4.7-2.2-7.4c0-4.2 1.4-7.5 4.2-9.9 2.8-2.4 6.6-3.6 11.3-3.6 4.3 0 8.3 1.1 11.9 3.2l-1.3 8.1h-.3c-1.4-1-3-1.7-4.9-2.2-1.9-.5-3.6-.7-5.3-.7-4.4 0-6.6 1.7-6.6 5 0 1.2.4 2.3 1.1 3.3.8 1 2.2 2.1 4.4 3.3l5.3 2.9c3.3 1.8 5.8 3.8 7.3 6s2.3 4.8 2.3 7.8c0 4.5-1.5 8-4.5 10.6-2.8 2.5-6.8 3.7-11.9 3.7zM183.8 64c-1.6-2.2-2.7-4.6-3.5-7.4-.8-2.8-1.2-6-1.2-9.5V39h-5.7v-7.6h5.7v-9.7h9v9.7h7.7l-1.3 7.6H188v7.4c0 3.7.5 6.9 1.5 9.6 1 2.7 2.4 5.3 4.3 7.6v.4h-10zM209 64.6c-3.2 0-5.7-.8-7.5-2.5-1.9-1.7-2.8-4-2.8-7.1 0-3.1 1.1-5.5 3.2-7.3 2.2-1.8 5.1-2.8 8.8-3.2l9.1-.9v-.1c0-1.8-.5-3.1-1.5-4-1-.9-2.8-1.4-5.4-1.4-1.9 0-3.9.2-5.9.7-2 .5-3.6 1-4.8 1.6h-.4l1.3-7.7c1.4-.6 3.1-1 5.1-1.5 2-.4 4.2-.6 6.4-.6 4.9 0 8.5 1.1 10.8 3.4 2.3 2.3 3.4 5.6 3.4 10v10.4c0 1.7.1 3.4.4 5 .2 1.6.6 3 1.2 4.2v.4h-8.5c-.3-.6-.5-1.5-.7-2.4-.2-1-.3-1.9-.4-2.7h-.4c-.8 1.6-2.3 2.9-4.3 4s-4.4 1.7-7.1 1.7zm-1.1-10.3c0 1 .3 1.8.9 2.4.6.6 1.7 1 3.1 1 2.3 0 4.1-.7 5.6-2s2.2-3.1 2.2-5.2v-.8l-6.9.8c-1.7.2-3 .6-3.8 1.1-.7.6-1.1 1.5-1.1 2.7zM260.9 64v-4.9h-.4c-1 1.8-2.4 3.2-4.3 4.2s-4 1.5-6.4 1.5c-2.9 0-5.4-.7-7.6-2.1-2.2-1.4-3.9-3.4-5.1-6-1.2-2.6-1.8-5.6-1.8-9 0-3.4.6-6.4 1.8-9 1.2-2.6 2.9-4.5 5.1-6 2.2-1.4 4.7-2.1 7.6-2.1 2.2 0 4.2.4 6 1.3 1.8.9 3.2 2.1 4.2 3.6h.5V15.3h9.1V64h-8.7zm-8.1-7c2.5 0 4.4-.9 5.9-2.6 1.5-1.7 2.2-4 2.2-6.7 0-2.8-.7-5.1-2.2-6.7-1.5-1.7-3.5-2.5-5.9-2.5-2.5 0-4.5.8-5.9 2.5-1.5 1.6-2.2 3.9-2.2 6.8 0 2.8.7 5.1 2.2 6.7 1.4 1.6 3.3 2.5 5.9 2.5zM284.9 64c-1.6-2.2-2.7-4.6-3.5-7.4-.8-2.8-1.2-6-1.2-9.5V39h-5.7v-7.6h5.7v-9.7h9v9.7h7.7l-1.3 7.6h-6.4v7.4c0 3.7.5 6.9 1.5 9.6 1 2.7 2.4 5.3 4.3 7.6v.4h-10.1zM161.6 126.1h-11c-1.1-2.4-2.3-5.4-3.5-9-1.3-3.6-2.5-7.5-3.6-11.9-1.2-4.4-2.2-8.9-3.1-13.7-.9-4.7-1.5-9.4-1.8-14.1h9.9c.3 4.3.9 8.8 1.7 13.5.8 4.7 1.7 9.2 2.8 13.7 1.1 4.4 2.2 8.5 3.4 12.2h.5l9.9-33h7.3l9.9 33h.5c1.2-3.7 2.3-7.8 3.3-12.2 1-4.4 1.9-9 2.7-13.7.8-4.7 1.3-9.2 1.7-13.5h9.7c-.3 4.7-1 9.4-1.8 14.1-.9 4.7-1.9 9.3-3.1 13.7-1.2 4.4-2.4 8.3-3.6 11.9-1.3 3.6-2.4 6.6-3.5 9h-11l-8.2-27.4h-.7l-8.4 27.4zM213.1 88.3c-1.7 0-3.1-.5-4.2-1.6s-1.6-2.4-1.6-4 .5-3 1.6-4 2.5-1.6 4.2-1.6c1.7 0 3.1.5 4.2 1.6 1.1 1 1.6 2.4 1.6 4s-.5 2.9-1.6 4c-1.1 1-2.5 1.6-4.2 1.6zm-4.6 37.8V93.4h9.1v32.7h-9.1zM241.4 126.9c-3.6 0-6.6-.7-9.2-2.1-2.6-1.4-4.6-3.4-5.9-5.9-1.4-2.6-2.1-5.5-2.1-9 0-3.6.7-6.7 2.2-9.3 1.5-2.6 3.5-4.6 6-5.9 2.6-1.4 5.5-2.1 8.7-2.1 4.8 0 8.5 1.5 11.2 4.4 2.7 2.9 4 7 4 12.2v2l-22.5 2.5c.6 2 1.7 3.4 3.2 4.2 1.6.8 3.5 1.2 5.7 1.2 2.1 0 4.2-.3 6.4-.8 2.1-.6 3.7-1.2 4.8-1.9h.5l-1.3 7.8c-1.2.6-2.9 1.2-5.1 1.8-2.1.6-4.3.9-6.6.9zm-.5-27c-2 0-3.7.6-5 1.9-1.3 1.2-2.1 3.1-2.4 5.6l13.9-1.6c-.3-2-1-3.5-2.1-4.4-1.3-1-2.7-1.5-4.4-1.5zM262.6 126.1V93.4h8.2V99h.4c.8-1.9 2.2-3.4 4.1-4.6 1.9-1.1 4.1-1.7 6.6-1.7 3.8 0 6.8 1.3 9 3.8s3.3 6.1 3.3 10.6v19.1h-9.1v-17.9c0-5.1-2.1-7.7-6.3-7.7-2.1 0-3.8.8-5.1 2.3-1.3 1.5-1.9 3.5-1.9 6v17.3h-9.2z"></path>
      </svg>
    </a>

    <!-- 2. kann, wenn Suche vorhanden, das Suchfeld eingebunden werden-->
    <wm-form role="search">
      <wm-input label="Suche" hideLabel="hideLabel" placeholder="Wie können wir helfen?" search="hiddenmobile"></wm-input>
    </wm-form>
    <!-- 3. Standard Menü einbinden -->
    <wm-nav-main type="hidden">
  <a href="/nojs" class="fallback">
    Menü
    <svg width="26" height="26" viewBox="0 0 123.14 123.14" id="burger" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h123.14v123.14H0z"/><path d="M17.67 27.59h87v-6h-87zM17.67 58.57h87v6h-87zM17.67 95.49h87v6h-87z"/>
    </svg>
  </a>
  <div slot="precontent">
    <wm-stack horizontal="" gap="xs" alignment="center">
      <wm-icon iconid="language"></wm-icon>
      <wm-list type="horizontal" separator="pipe" gap="xxs">
        <ul>
          <li><a href="#">English</a></li>
          <li><a href="#">Bosanski Hrvatski Srpski</a></li>
          <li><a href="#">Türkçe</a></li>
        </ul>
      </wm-list>
    </wm-stack>
  </div>
  <ul>
    <li>
      <a href="#">
        <wm-icon iconid="home"></wm-icon>
        Startseite
      </a>
    </li>
    <li>
      <a href="#">
        <wm-icon iconid="pin"></wm-icon>
        Stadtplan
      </a>
    </li>
    <li>
      <a href="#">
        <wm-icon iconid="amtswege"></wm-icon>
        Amtswege
      </a>
    </li>
    <li>
      <a href="#">
        <wm-icon iconid="contact"></wm-icon>
        Kontakte
      </a>
    </li>
    <li>
      <a href="#">
        <wm-icon iconid="money"></wm-icon>
        Jobs
      </a>
    </li>
  </ul>
  <ul>
    <li>
      <a href="#">
        Freizeit
      </a>
      <ul>
        <li>
          <a href="#">
            Veranstaltungen
          </a>
        </li>
        <li>
          <a href="#">
            Baden
          </a>
        </li>
        <li>
          <a href="#">
            Sport
          </a>
          <ul>
            <li><a href="#">Übersicht</a></li>
            <li><a href="#">Sportmöglichkeiten</a></li>
            <li><a href="#">Kurse</a></li>
            <li><a href="#">Vereine</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li>
      <a href="#">
        Wohnen
      </a>
      <ul>
        <li><a href="#">Menüpunkt 1</a></li>
        <li><a href="#">Menüpunkt 2</a></li>
      </ul>
    </li>
    <li>
      <a href="#">
        Verkehr
      </a>
      <ul>
        <li><a href="#">Menüpunkt 1</a></li>
        <li><a href="#">Menüpunkt 2</a></li>
      </ul>
    </li>
    <li>
      <a href="#">
        Bildung
      </a>
      <ul>
        <li><a href="#">Menüpunkt 1</a></li>
        <li><a href="#">Menüpunkt 2</a></li>
      </ul>
    </li>
    <li>
      <a href="#">
        Gesundheit
      </a>
      <ul>
        <li><a href="#">Menüpunkt 1</a></li>
        <li><a href="#">Menüpunkt 2</a></li>
      </ul>
    </li>
    <li>
      <a href="#">
        Umwelt
      </a>
      <ul>
        <li><a href="#">Menüpunkt 1</a></li>
        <li><a href="#">Menüpunkt 2</a></li>
      </ul>
    </li>
    <li>
      <a href="#">
        Zusammenleben
      </a>
      <ul>
        <li><a href="#">Menüpunkt 1</a></li>
        <li><a href="#">Menüpunkt 2</a></li>
      </ul>
    </li>
    <li>
      <a href="#">
        Stadtentwicklung
      </a>
      <ul>
        <li><a href="#">Menüpunkt 1</a></li>
        <li><a href="#">Menüpunkt 2</a></li>
      </ul>
    </li>
    <li>
      <a href="#">
        Politik
      </a>
      <ul>
        <li><a href="#">Menüpunkt 1</a></li>
        <li><a href="#">Menüpunkt 2</a></li>
      </ul>
    </li>
    <li>
      <a href="#">
        Wirtschaft
      </a>
      <ul>
        <li><a href="#">Menüpunkt 1</a></li>
        <li><a href="#">Menüpunkt 2</a></li>
      </ul>
    </li>
  </ul>
  <div>
    <wm-list type="horizontal">
      <ul>
        <li><a href="https://facebook.com/wien.at" class="wm-no-external-icon" target="_blank"><wm-icon iconid="facebook">Facebook</wm-icon></a></li>
        <li><a href="https://instagram.com/stadtwien" class="wm-no-external-icon" target="_blank"><wm-icon iconid="instagram">Instagram</wm-icon></a></li>
        <li><a href="https://x.com/Stadt_Wien" class="wm-no-external-icon" target="_blank"><wm-icon iconid="twitter">X (Twitter)</wm-icon></a></li>
        <li><a href="https://tiktok.com/@stadtwien" class="wm-no-external-icon" target="_blank"><wm-icon iconid="tiktok">TikTok</wm-icon></a></li>
        <li><a href="https://youtube.com/channel/UCGLOly45we_1ZTXAXF7TZDA" class="wm-no-external-icon" target="_blank"><wm-icon iconid="youtube">YouTube</wm-icon></a></li>
        <li><a href="https://www.wien.gv.at/bot/" class="wm-no-external-icon" target="_blank"><wm-icon iconid="wien-bot">Wienbot</wm-icon></a></li>
      </ul>
    </wm-list>
    <p>
      <a href="#">
        <strong>NEWSLETTER</strong>
      </a>
    </p>
  </div>
</wm-nav-main>
  </div>
</wm-header>

Wenn wir einen Blick in den API-Tab im Pattern Header werfen, sehen wir, dass es eine Abhängigkeit gibt, die wir im <head> unserer Website referenzieren müssen. 

<script src="./wienermelange/assets/js/components/Header/Header.js" type="module"></script>

Das Menü

<script src="./wienermelange/assets/js/components/NavMain/NavMain.js" type="module"></script>
<wm-nav-main>
  …
</wm-nav-main>

Das Menü enthält eine ungeordnete oder geordnete Liste, die aus Listenelementen mit Links oder Icons mit Links bestehen. Innerhalb der Listenelemente können weitere Listen geschachtelt werden. 

<wm-nav-main type="hidden">
  <a href="/nojs" class="fallback">
    Menü
    <svg width="26" height="26" viewBox="0 0 123.14 123.14" id="burger" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h123.14v123.14H0z"/><path d="M17.67 27.59h87v-6h-87zM17.67 58.57h87v6h-87zM17.67 95.49h87v6h-87z"/>
    </svg>
  </a>
  <div slot="precontent">
    <wm-stack horizontal="" gap="xs" alignment="center">
      <wm-icon iconid="language"></wm-icon>
      <wm-list type="horizontal" separator="pipe" gap="xxs">
        <ul>
          <li><a href="#">English</a></li>
          <li><a href="#">Bosanski Hrvatski Srpski</a></li>
          <li><a href="#">Türkçe</a></li>
        </ul>
      </wm-list>
    </wm-stack>
  </div>
  <ul>
    <li>
      <a href="#">
        <wm-icon iconid="home"></wm-icon>
        Startseite
      </a>
    </li>
    <li>
      <a href="#">
        <wm-icon iconid="pin"></wm-icon>
        Stadtplan
      </a>
    </li>
    <li>
      <a href="#">
        <wm-icon iconid="amtswege"></wm-icon>
        Amtswege
      </a>
    </li>
    <li>
      <a href="#">
        <wm-icon iconid="contact"></wm-icon>
        Kontakte
      </a>
    </li>
    <li>
      <a href="#">
        <wm-icon iconid="money"></wm-icon>
        Jobs
      </a>
    </li>
  </ul>
  <ul>
    <li>
      <a href="#">
        Freizeit
      </a>
      <ul>
        <li>
          <a href="#">
            Veranstaltungen
          </a>
        </li>
        <li>
          <a href="#">
            Baden
          </a>
        </li>
        <li>
          <a href="#">
            Sport
          </a>
          <ul>
            <li><a href="#">Übersicht</a></li>
            <li><a href="#">Sportmöglichkeiten</a></li>
            <li><a href="#">Kurse</a></li>
            <li><a href="#">Vereine</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li>
      <a href="#">
        Wohnen
      </a>
      <ul>
        <li><a href="#">Menüpunkt 1</a></li>
        <li><a href="#">Menüpunkt 2</a></li>
      </ul>
    </li>
    <li>
      <a href="#">
        Verkehr
      </a>
      <ul>
        <li><a href="#">Menüpunkt 1</a></li>
        <li><a href="#">Menüpunkt 2</a></li>
      </ul>
    </li>
    <li>
      <a href="#">
        Bildung
      </a>
      <ul>
        <li><a href="#">Menüpunkt 1</a></li>
        <li><a href="#">Menüpunkt 2</a></li>
      </ul>
    </li>
    <li>
      <a href="#">
        Gesundheit
      </a>
      <ul>
        <li><a href="#">Menüpunkt 1</a></li>
        <li><a href="#">Menüpunkt 2</a></li>
      </ul>
    </li>
    <li>
      <a href="#">
        Umwelt
      </a>
      <ul>
        <li><a href="#">Menüpunkt 1</a></li>
        <li><a href="#">Menüpunkt 2</a></li>
      </ul>
    </li>
    <li>
      <a href="#">
        Zusammenleben
      </a>
      <ul>
        <li><a href="#">Menüpunkt 1</a></li>
        <li><a href="#">Menüpunkt 2</a></li>
      </ul>
    </li>
    <li>
      <a href="#">
        Stadtentwicklung
      </a>
      <ul>
        <li><a href="#">Menüpunkt 1</a></li>
        <li><a href="#">Menüpunkt 2</a></li>
      </ul>
    </li>
    <li>
      <a href="#">
        Politik
      </a>
      <ul>
        <li><a href="#">Menüpunkt 1</a></li>
        <li><a href="#">Menüpunkt 2</a></li>
      </ul>
    </li>
    <li>
      <a href="#">
        Wirtschaft
      </a>
      <ul>
        <li><a href="#">Menüpunkt 1</a></li>
        <li><a href="#">Menüpunkt 2</a></li>
      </ul>
    </li>
  </ul>
  <div>
    <wm-list type="horizontal">
      <ul>
        <li><a href="https://facebook.com/wien.at" class="wm-no-external-icon" target="_blank"><wm-icon iconid="facebook">Facebook</wm-icon></a></li>
        <li><a href="https://instagram.com/stadtwien" class="wm-no-external-icon" target="_blank"><wm-icon iconid="instagram">Instagram</wm-icon></a></li>
        <li><a href="https://x.com/Stadt_Wien" class="wm-no-external-icon" target="_blank"><wm-icon iconid="twitter">X (Twitter)</wm-icon></a></li>
        <li><a href="https://tiktok.com/@stadtwien" class="wm-no-external-icon" target="_blank"><wm-icon iconid="tiktok">TikTok</wm-icon></a></li>
        <li><a href="https://youtube.com/channel/UCGLOly45we_1ZTXAXF7TZDA" class="wm-no-external-icon" target="_blank"><wm-icon iconid="youtube">YouTube</wm-icon></a></li>
        <li><a href="https://www.wien.gv.at/bot/" class="wm-no-external-icon" target="_blank"><wm-icon iconid="wien-bot">Wienbot</wm-icon></a></li>
      </ul>
    </wm-list>
    <p>
      <a href="#">
        <strong>NEWSLETTER</strong>
      </a>
    </p>
  </div>
</wm-nav-main>

Die aktive Seite wird mittels des aria-current-Attributs auf dem passenden Link markiert. 

<li><a href="#" aria-current="page">Menüpunkt 1</a></li>
<li><a href="#">Menüpunkt 2</a></li>

Der Hauptinhalt

Der Hauptinhalt der Seite wird mit dem main-Element ausgezeichnet. Wichtig ist hier die id, deren Wert dem Pfad im Skip-Link (siehe Anforderung Skip-Link) entsprechen muss. 

<main id="EINZIGARTIGE_ID_SKIPLINK">
  …
</main>

Am Anfang des Hauptinhalts befindet sich die Stage <wm-stage>, die zumindest aus einer h1 besteht. Alle weiteren Inhalte folgen der Stage. Eine Ausnahme ist die Startseite wien.gv.at. Eine Übersicht aller Varianten und Konfigurationen findet sich in der Pattern-Library. 

<script src="./wienermelange/assets/js/components/Stage/Stage.js" type="module"></script>
<main id="EINZIGARTIGE_ID_SKIPLINK">
  <wm-stage>
    <h1 slot="content">Frisches Quellwasser aus Wien</h1>
  </wm-stage>

  <!-- Inhalte der Seite folgen hier-->

</main>

Der Footer

Der Footer befindet sich am Ende der Seite und stellt das letzte sichtbare Element dar. Darin befinden sich ein Bereich für Copyright-Informationen, die automatisch aus Bildern extrahiert werden, und weiterführende Links. Die Links zum Impressum, zum Datenschutz und zur Barrierefreiheit sind verpflichtend. Für die Darstellung verwenden wir das Listen-Pattern "Horizontale Liste mit Trennstrich" (<wm-list>). Außerdem kann auch ein Button "Zum Seitenanfang springen" eingebunden werden. Dieser wird nur angezeigt, wenn die Seite gescrollt wurde. 

<script src="./wienermelange/assets/js/components/List/List.js" type="module"></script>
<script src="./wienermelange/assets/js/components/Copyright/Copyright.js" type="module"></script>
<script src="./wienermelange/assets/js/components/Button/Button.js" type="module"></script>
<footer>
  <!-- Copyright-Information wird aus Bildern extrahiert und automatisch angezeigt-->
  <wm-copyright></wm-copyright>

  <!-- Weiterführende Links -->
  <wm-list type="horizontal" separator="pipe" alignment="center">
    <ul>
        <li>
          <a href="https://www.wien.gv.at/info/impressum.html">
            <strong>
              Impressum
            </strong>
          </a>
        </li>
      
        <li>
          <a href="https://www.wien.gv.at/info/datenschutz/index.html">
            <strong>
              Datenschutz
            </strong>
          </a>
        </li>
      
        <li>
          <a href="https://www.wien.gv.at/info/barrierefreiheit.html">
            <strong>
              Barrierefreiheit
            </strong>
          </a>
        </li>
      </ul>

  </wm-list>

  <p><small>© Stadt Wien, Rathaus, A-1010 Wien</small></p>

  <!-- Button zum Seitenanfang springen-->
  <wm-button kind="secondary" round id="wm-button-to-top">
    <a class="wm-e-button" href="#IDMITSPRUNGPUNKTSEITENANFANG"><wm-icon iconid="chevron-up" width="28">Zum Seitenanfang</wm-icon></a>
  </wm-button>
</footer>

Live-Region und Modal

Viele Elemente benötigen eine Live-Region, um Änderungen im DOM für Screen-Reader ankündigen zu können. Es empfiehlt sich, die Live-Region immer einzubinden, auch wenn potenziell kein Pattern verwendet wird, das davon Gebrauch macht. Die wm-h-vh-Hilfsklasse stellt sicher, dass die Live-Region nicht auf der Seite angezeigt wird. 

<!-- Live-Region -->
<div role="status" class="wm-h-vh"></div>

Für die Verwendung des Modal-Patterns muss das <wm-modal>-Element einmal in die Seite eingebunden werden. 

<script src="./wienermelange/assets/js/components/Modal/Modal.js" type="module"></script>
<footer>
  …
</footer>
<!-- Live-Region -->
<div role="status" class="wm-h-vh"></div>
<!-- Wrapper für Modals -->
<wm-modal></wm-modal>

Weitere Tutorials

Kontakt

Haben Sie noch Fragen, Feedback oder brauchen Sie ein Element, das die Pattern Library noch nicht bietet?

handbuch@ma53.wien.gv.at