Erste Schritte
Um mit der wien.gv.at Pattern Library arbeiten zu können, benötigen Sie 3 Dinge.
Zugang zu den Assets
Alle aktuellen JavaScript- und CSS-Dateien sind über unser Frontend-Delivery-Network (FDN) zugänglich. Wir empfehlen, die Dateien direkt über das FDN zu referenzieren.
<link rel="https://assets.wien.gv.at/theme/latest/css/wiener-melange.bundle.min.css">
<script src="https://assets.wien.gv.at/theme/latest/js/components/Accordion/Accordion.js" type="module"></script>
Das Segment
"latest"
im Pfad zeigt immer auf die neueste Version des Themes und wird automatisch aktualisiert. Die Assets können Sie
bedenkenlos auf diese Art einbinden, da es in Updates keine Breaking-Changes, sondern nur Bug-Fixes und Ergänzungen
gibt. Es ist aber auch möglich, zu einer fixen Version zu referenzieren.
Die aktuelle Version ist: 2.0.2
<link rel="https://assets.wien.gv.at/theme/202/css/wiener-melange.bundle.min.css">
<script src="https://assets.wien.gv.at/theme/202/js/components/Accordion/Accordion.js" type="module"></script>Wenn Sie die Dateien lokal ablegen oder anders einbinden wollen, kontaktieren Sie uns bitte per E-Mail handbuch@ma53.wien.gv.at.
Basis-Struktur für Sonderauftritte
Unser Frontend nutzt Web-Components, insbesondere Custom-Elements und verwandte APIs. Viele Funktionen und Styles sind nur verfügbar, wenn JavaScript im Browser aktiviert ist. Das Wiener Melange-Theme bietet jedoch auch ohne JavaScript grundlegendes Styling und Basis-Funktionalität. Für einfache Seiten sind keine speziellen CSS-Klassen erforderlich, da das Styling automatisch basierend auf der HTML-Struktur erfolgt.
Struktur mit und ohne Web-Components
Wir empfehlen Web-Components für die Grundstruktur Ihrer Website. So stellen Sie eine optimale Benutzer*innenerfahrung sicher.
HTML Grundstruktur ohne Web-Components
<!DOCTYPE html>
<!-- Natürliche Sprache des Dokuments. Anpassen, wenn das Dokument nicht auf Deutsch ist. -->
<html lang="de">
<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>Title der Seite | Titel der Site | 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>
<!-- 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/erste-schritte/">
<!-- Beschreibung der Seite, maimal 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>
<!-- Header auf jeder Seite -->
<header>
<!-- Erste Zeile im Header. Trägt den Titel und das Logo. -->
<div>
<!-- Titel der Website -->
<div>
<a href="/development/basis-template/">
Titel der Site
</a>
</div>
<!-- Stadt Wien Logo, 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>
</div>
<!-- Zweite Zeile im Header. Trägt die Navigation, sonstige Buttons oder die Suche. -->
<div>
<nav>
<ul>
<li>
<a href="#">Link</a>
</li>
<li>
<!-- Aktive Seite -->
<a href="#" aria-current="page">Link 2</a>
</li>
<li>
<a href="#">Link 3</a>
</li>
</ul>
</nav>
</div>
</header>
<!-- Hauptinhalt der Seite -->
<main id="content">
<!-- Titel der Seite -->
<h1>Titel der Seite</h1>
<!-- Mehr Dummy Inhalte -->
</main>
<!-- Der Footer enthält die notwendigen Links und Copyright-Information -->
<footer>
<ul>
<li><a href="#"><strong>Impressum</strong></a></li>
<li><a href="#"><strong>Datenschutz</strong></a></li>
<li><a href="#"><strong>Barrierefreiheit</strong></a></li>
<li><a href="#"><strong>Öffentliche Verlautbarungen</strong></a></li>
<li><a href="#"><strong>Medienservice</strong></a></li>
</ul>
© Stadt Wien, Rathaus, A-1010 Wien
</footer>
</body>
</html><!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title der Seite | Titel der Site | Stadt Wien</title>
<link rel="stylesheet" href="https://assets.wien.gv.at/theme/202/css/wiener-melange.bundle.min.css">
<link rel="preload" href="https://assets.wien.gv.at/theme/202/fonts/WienerMelangeVF.woff2" as="font" type="font/woff2" crossorigin>
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="canonical" href="https://handbuch.wien.gv.at/development/erste-schritte/">
<meta name="description" content="Beschreibung der Seite">
<meta name="theme-color" content="#75cde3">
<meta property="og:title" content="Seitentitel">
<meta property="og:description" content="Beschreibung der Seite">
<meta property="og:image" content="https://handbuch.wien.gv.at/images/meta.png">
<meta property="og:locale" content="de">
<meta property="og:type" content="website">
<meta property="og:url" content="https://wwww.wien.gv.at">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@StadtWien">
</head>
<body>
<header>
<div>
<div>
<a href="/development/basis-template/">
Titel der Site
</a>
</div>
<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>
</div>
<div>
<nav>
<ul>
<li>
<a href="#">Link</a>
</li>
<li>
<a href="#" aria-current="page">Link 2</a>
</li>
<li>
<a href="#">Link 3</a>
</li>
</ul>
</nav>
</div>
</header>
<main id="content">
<h1>Titel der Seite</h1>
<section>
<h2>Überschrift h2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque leo nec magna fermentum, a tincidunt lorem tincidunt. Integer nec odio nec urna fermentum tincidunt. Sed sit amet arcu non nisi tincidunt tincidunt.</p>
<ul>
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
<li>Nullam scelerisque leo nec magna fermentum</li>
</ul>
<blockquote>
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque leo nec magna fermentum."
</blockquote>
<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
<tr>
<td>Data 3</td>
<td>Data 4</td>
</tr>
</tbody>
</table>
<p>Donec vel sapien nec erat tincidunt tincidunt. Integer nec odio nec urna fermentum tincidunt. Sed sit amet arcu non nisi tincidunt tincidunt.</p>
</section>
<section>
<h2>Überschrift h2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sagittis dolor mauris, at elementum ligula tempor eget.</p>
<h3>Überschrift h3</h3>
<p>Nullam scelerisque leo nec magna fermentum, a tincidunt lorem tincidunt. Integer nec odio nec urna fermentum tincidunt. Sed sit amet arcu non nisi tincidunt
<blockquote>
<p>"Innovation distinguishes between a leader and a follower."</p>
<cite>- Steve Jobs</cite>
</blockquote>
<dl>
<dt>Innovation</dt>
<dd>The process of creating value through solutions that meet new requirements.</dd>
<dt>Strategy</dt>
<dd>A careful plan or method for achieving a particular goal usually over a long period of time.</dd>
</dl>
<details>
<summary>Click to learn more about our approach</summary>
<p>Our innovative approach combines cutting-edge technology with sustainable practices to deliver exceptional results.</p>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
<li>Sed do eiusmod tempor incididunt ut labore et dolore</li>
<li>Ut enim ad minim veniam, quis nostrud exercitation</li>
<li>Duis aute irure dolor in reprehenderit voluptate</li>
<li>Excepteur sint occaecat cupidatat non proident</li>
</ul>
</details>
</section>
</main>
<footer>
<ul>
<li><a href="#"><strong>Impressum</strong></a></li>
<li><a href="#"><strong>Datenschutz</strong></a></li>
<li><a href="#"><strong>Barrierefreiheit</strong></a></li>
<li><a href="#"><strong>Öffentliche Verlautbarungen</strong></a></li>
<li><a href="#"><strong>Medienservice</strong></a></li>
</ul>
© Stadt Wien, Rathaus, A-1010 Wien
</footer>
</body>
</html>HTML Grundstruktur mit Web-Components
<!DOCTYPE html>
<!-- Natürliche Sprache des Dokuments. Anpassen, wenn das Dokument nicht auf Deutsch ist. -->
<html lang="de">
<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>Title der Seite | Titel der Site | 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>
<!-- 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>
<!-- Header durch JavaScript angereichert -->
<script src="https://assets.wien.gv.at/theme/202/js/components/Header/Header.js" type="module"></script>
<!-- Erweitert Listen -->
<script src="https://assets.wien.gv.at/theme/202/js/components/List/List.js" type="module"></script>
<!-- Modales Fenster -->
<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>
<!-- Titel der Seite durch JavaScript angereichert -->
<script src="https://assets.wien.gv.at/theme/202/js/components/Stage/Stage.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/erste-schritte/">
<!-- Beschreibung der Seite, maimal 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>
<!-- Header auf jeder Seite -->
<wm-header>
<!-- Erste Zeile im Header. Trägt den Titel und das Logo. -->
<div>
<!-- Titel der Website -->
<div>
<a href="/development/template/">
Titel der Site
</a>
</div>
<!-- Stadt Wien Logo, 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>
</div>
<!-- Zweite Zeile im Header. Trägt die Navigation, sonstige Buttons oder die Suche. -->
<div>
<wm-nav-main microsite>
<ul>
<li>
<a href="#">Link</a>
</li>
<li>
<a href="#" aria-current="page">Link 2</a>
</li>
<li>
<a href="#">Link 3</a>
</li>
</ul>
</wm-nav-main>
</div>
</wm-header>
<!-- Hauptinhalt der Seite -->
<main id="content">
<!-- Titel der Seite -->
<wm-stage>
<h1 slot="content">Titel der Seite</h1>
</wm-stage>
</main>
<!-- Der Footer enthält die notwendigen Links und Copyright-Information -->
<footer>
<!-- Copyright-Information wird aus Bildern extrahiert und automatisch hier angezeigt-->
<wm-copyright></wm-copyright>
<!-- Weiterführende Links -->
<wm-list type="horizontal" alignment="center" separator="pipe">
<ul>
<li><a href="#"><strong>Impressum</strong></a></li>
<li><a href="#"><strong>Datenschutz</strong></a></li>
<li><a href="#"><strong>Barrierefreiheit</strong></a></li>
<li><a href="#"><strong>Öffentliche Verlautbarungen</strong></a></li>
<li><a href="#"><strong>Medienservice</strong></a></li>
</ul>
</wm-list>
© Stadt Wien, Rathaus, A-1010 Wien
</footer>
<!-- Live-Region -->
<div role="status" class="wm-h-vh"></div>
<!-- Wrapper für Modals -->
<wm-modal></wm-modal>
</body>
</html><!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title der Seite | Titel der Site | Stadt Wien</title>
<link rel="stylesheet" href="https://assets.wien.gv.at/theme/202/css/wiener-melange.bundle.min.css">
<link rel="preload" href="https://assets.wien.gv.at/theme/202/fonts/WienerMelangeVF.woff2" as="font" type="font/woff2" crossorigin>
<script src="https://assets.wien.gv.at/theme/202/js/components/Copyright/Copyright.js" type="module"></script>
<script src="https://assets.wien.gv.at/theme/202/js/components/Header/Header.js" type="module"></script>
<script src="https://assets.wien.gv.at/theme/202/js/components/List/List.js" type="module"></script>
<script src="https://assets.wien.gv.at/theme/202/js/components/Modal/Modal.js" type="module"></script>
<script src="https://assets.wien.gv.at/theme/202/js/components/NavMain/NavMain.js" type="module"></script>
<script src="https://assets.wien.gv.at/theme/202/js/components/Stage/Stage.js" type="module"></script>
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="canonical" href="https://handbuch.wien.gv.at/development/erste-schritte/">
<meta name="description" content="Beschreibung der Seite">
<meta name="theme-color" content="#75cde3">
<meta property="og:title" content="Seitentitel">
<meta property="og:description" content="Beschreibung der Seite">
<meta property="og:image" content="https://handbuch.wien.gv.at/images/meta.png">
<meta property="og:locale" content="de">
<meta property="og:type" content="website">
<meta property="og:url" content="https://wwww.wien.gv.at">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@StadtWien">
</head>
<body>
<wm-header>
<div>
<div>
<a href="/development/template/">
Titel der Site
</a>
</div>
<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>
</div>
<div>
<wm-nav-main microsite>
<ul>
<li>
<a href="#">Link</a>
</li>
<li>
<a href="#" aria-current="page">Link 2</a>
</li>
<li>
<a href="#">Link 3</a>
</li>
</ul>
</wm-nav-main>
</div>
</wm-header>
<main id="content">
<wm-stage>
<h1 slot="content">Titel der Seite</h1>
</wm-stage>
</main>
<footer>
<wm-copyright></wm-copyright>
<wm-list type="horizontal" alignment="center" separator="pipe">
<ul>
<li><a href="#"><strong>Impressum</strong></a></li>
<li><a href="#"><strong>Datenschutz</strong></a></li>
<li><a href="#"><strong>Barrierefreiheit</strong></a></li>
<li><a href="#"><strong>Öffentliche Verlautbarungen</strong></a></li>
<li><a href="#"><strong>Medienservice</strong></a></li>
</ul>
</wm-list>
© Stadt Wien, Rathaus, A-1010 Wien
</footer>
<div role="status" class="wm-h-vh"></div>
<wm-modal></wm-modal>
</body>
</html>Mehr Details zu den Inhalten der Seitenstruktur finden Sie im Tutorial "Seitenstruktur".
Patterns
Die wien.gv.at Pattern Library bietet eine Vielzahl von Patterns zur Strukturierung von Seiten und zur Auszeichnung
von Inhalten. Beispiele sind das wm-section-Pattern für die Gruppierung von Inhalten und das
wm-anchor-Pattern für verlinkte Anker. Viele Patterns können über Attribute konfiguriert werden.
<wm-section highlight>
<wm-anchor>
<h2>Trinkbrunnen</h2>
</wm-anchor>
</wm-section>Jedes Pattern ist in einem eigenen Bereich beschrieben. Weitere Informationen finden Sie auf der Seite "Patterns einsetzen".
Hilfe bei der Seitenerstellung erhalten Sie auch in den Tutorials.
Kontakt
Haben Sie noch Fragen, Feedback oder brauchen Sie ein Element, das die Pattern Library noch nicht
bietet?
handbuch@ma53.wien.gv.at