Erste Schritte
Dies ist eine alte Version des Handbuchs und der Pattern Library (v1). Bitte wechseln Sie zur aktuellen Version (v2).
Basis Template
Je nach Einsatzgebiet können HTML-Dokumente simpel gehalten oder komplexer aufgebaut werden. Unterhalb finden Sie 2 Vorschläge, wie so ein HTML-Dokument aussehen kann.
Empfohlene Struktur
Code ohne Kommentare
<!DOCTYPE html>
<html lang="de" class="wm-no-js wm-has-ms-nav">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>Seitentitel</title>
<script>
document.documentElement.classList.remove('wm-no-js');
document.documentElement.classList.add('wm-js');
if ('noModule' in HTMLScriptElement.prototype) {
document.documentElement.classList.add('wm-jsm');
}
if (localStorage.getItem('notification')) {
document.documentElement.classList.add('no-notification')
}
</script>
<link rel="stylesheet" href="/assets/130/css/main.min.css">
<link rel="stylesheet" href="/assets/130/css/main-medium.min.css" media="(min-width: 48em)">
<link rel="stylesheet" href="/assets/130/css/main-large.min.css" media="(min-width: 52.8125em)">
<link rel="stylesheet" href="/assets/130/css/print.min.css" media="print">
<link rel="stylesheet" href="/assets/130/css/motion.min.css" media="(prefers-reduced-motion: no-preference)">
<link rel="preload" href="/assets/130/fonts/WienerMelangeVF.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="/images/home-stage-l.jpg" as="image" media="(max-width: 769px)">
<link rel="preload" href="/images/home-stage-m.jpg" as="image" media="(min-width: 481px) and (max-width: 768px)">
<link rel="preload" href="/images/home-stage-s.jpg" as="image" media="(max-width: 480px)">
<meta name="description" content="Beschreibung der Seite">
<meta name="theme-color" content="#FF0000">
<link rel="icon" href="/favicon.ico">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/wien.webmanifest">
<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">
<link rel="canonical" href="https://pfad/zur/seite">
</head>
<body class="js-wm-site">
<div class="wm-site-wrapper js-wm-site-wrapper" data-wm-site-wrapper>
<header class="wm-site-header js-wm-site-header wm-site-header--no-margin">
<div class="wm-skip-links js-wm-skip-links wm-h-vh">
<a href="#content" class="wm-btn wm-btn--small js-wm-skip-link">
Zum Inhalt springen
</a>
<a href="https://www.wien.gv.at/info/barrierefreiheit.html" class="wm-btn wm-btn--small wm-btn--i js-wm-skip-link">
Barrierefreiheit auf wien.gv.at
</a>
</div>
<div class="wm-site-header__inner">
<div class="wm-site-header__title">
<a href="/" class="wm-link--unstyled">
Titel
</a>
</div>
<span class="wm-site-header__logo">
<a class="wm-site-header__logo-link" href="https://www.wien.gv.at">
<span class="wm-h-vh">Startseite wien.gv.at</span>
<svg viewBox="0 0 311 142" width="80" class="wm-logo" aria-hidden="true" focusable="false">
<path class="wm-logo__image" 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 class="wm-logo__text" fill="#292929" 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" />
</svg>
</a>
</span>
</div>
<div data-wm-nav-main-wrapper class="wm-nav-wrapper wm-nav-wrapper--init wm-nav-wrapper--h wm-nav-wrapper--morgenrot ">
<div class="wm-nav-wrapper__inner wm-nav-wrapper__inner--h">
<nav class="wm-nav-main wm-nav-main--h" data-wm-nav-main="true" aria-labelledby="mainnav_title">
<span hidden id="mainnav_title">Haupt</span>
<a href="/pattern-library/pages/inhalt/menue/" class="wm-nav-main__toggle wm-nav-main-btn" data-wm-nav-main-toggle>
<span class="wm-nav-main-btn__text wm-nav-main-btn__text--burger wm-h-vh">
Menü
</span>
<span>
<svg class="wm-icon wm-nav-main-btn__icon wm-nav-main-btn__icon--open" width="28" height="28" aria-hidden="true" focusable="false">
<use xlink:href="/assets/110/icons/svg/sprite.symbol.svg#burger"/>
</svg>
<svg class="wm-icon wm-nav-main-btn__icon wm-nav-main-btn__icon--close" width="28" height="28" aria-hidden="true" focusable="false">
<use xlink:href="/assets/110/icons/svg/sprite.symbol.svg#close"/>
</svg>
</span>
</a>
<div class="wm-nav-main__header" data-wm-nav-main-header></div>
<div class="wm-nav-main__inner" data-wm-nav-main-inner tabindex="-1">
<div class="wm-nav-main__content" id="nav_content">
<div class="wm-nav-main__lists">
<ol class="wm-nav-main__list wm-nav-main__list--1 ">
<li>
<a href="#link" class="wm-nav-main__link">
<span>Link</span>
</a>
</li>
</ol>
</div>
</div>
</div>
</nav>
</div>
</div>
</header>
<main class="wm-site-content" data-wm-site-content>
<div id="content" tabindex="-1">
<div class="wm-stage">
<div class="wm-stage__content">
<div class="wm-stage__text">
<h1 class="wm-stage__heading">
Überschrift
</h1>
</div>
</div>
</div>
<div class="wm-section">
<div class="wm-section__content">
<div class="wm-row">
<div class="wm-block">
<!-- Inhalt -->
</div>
</div>
</div>
</div>
</div>
</main>
<footer class="wm-site-footer">
<div class="wm-section__content">
<div class="wm-photo-credits js-wm-photo-credits" hidden>
<strong>Foto-Credits:</strong><br>
</div>
<ul class="wm-h-links--noline wm-u-mbxxs wm-list--reset wm-list--pipe-lg">
<li>
<a href="#">
Impressum
</a>
</li>
<li>
<a href="#">
Datenschutz
</a>
</li>
<li>
<a href="#">
Barrierefreiheit
</a>
</li>
</ul>
<div>
© Stadt Wien, Rathaus, A-1010 Wien
</div>
</div>
</footer>
</div>
<script src="/assets/130/js/main.min.js"></script>
<script src="/assets/130/js/components/site.min.js" type="module" crossorigin="use-credentials"></script>
</body>
</html>Code mit Kommentaren
<!-- Dokument standardkonform rendern -->
<!DOCTYPE html>
<!-- Sprache anpassen, wenn das Dokument nicht auf Deutsch ist. -->
<html lang="de" class="wm-no-js wm-has-ms-nav">
<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">
<!-- Seitentitel, muss einzigartig sein. -->
<title>Seitentitel</title>
<!-- Wenn JavaScript aktiv ist, werden gewisse Basiskomponenten anders dargestellt. Dafür braucht es eine eigene Klasse. -->
<script>
document.documentElement.classList.remove('wm-no-js');
document.documentElement.classList.add('wm-js');
// Wenn JavaScript Module unterstützt werden, werden gewisse Komponenten anders dargestellt. Dafür braucht es eine weitere Klasse.
if ('noModule' in HTMLScriptElement.prototype) {
document.documentElement.classList.add('wm-jsm');
}
// Checken, ob globale Ankündigungen bereits weggeclickt worden sind.
if (localStorage.getItem('notification')) {
document.documentElement.classList.add('no-notification')
}
</script>
<!-- Basis Style Sheets -->
<link rel="stylesheet" href="/assets/130/css/main.min.css">
<link rel="stylesheet" href="/assets/130/css/main-medium.min.css" media="(min-width: 48em)">
<link rel="stylesheet" href="/assets/130/css/main-large.min.css" media="(min-width: 52.8125em)">
<!-- Print Style Sheet-->
<link rel="stylesheet" href="/assets/130/css/print.min.css" media="print">
<!-- Style Sheet mit Animationen und Übergängen -->
<link rel="stylesheet" href="/assets/130/css/motion.min.css" media="(prefers-reduced-motion: no-preference)">
<!-- Download des Wiener Melange Fonts vorziehen. -->
<link rel="preload" href="/assets/130/fonts/WienerMelangeVF.woff2" as="font" type="font/woff2" crossorigin>
<!-- Vorladen von Stagebildern -->
<link rel="preload" href="/images/home-stage-l.jpg" as="image" media="(max-width: 769px)">
<link rel="preload" href="/images/home-stage-m.jpg" as="image" media="(min-width: 481px) and (max-width: 768px)">
<link rel="preload" href="/images/home-stage-s.jpg" as="image" media="(max-width: 480px)">
<!-- Beschreibung der Seite, maximal 150 Zeichen lang, muss einzigartig sein. -->
<meta name="description" content="Beschreibung der Seite">
<!-- Farbe des UI im Browser (Aktuell nur Chrome Android, Safari, Brave und Samsung Internet). -->
<meta name="theme-color" content="#FF0000">
<!-- Favicon für ältere Browser -->
<link rel="icon" href="/favicon.ico">
<!-- 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">
<!-- PWA-Info + Icons für Android -->
<link rel="manifest" href="/wien.webmanifest">
<!-- Social Media Allgemein -->
<!-- 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">
<!-- Twitter -->
<!-- Großes Vorschaubild auf Twitter -->
<meta name="twitter:card" content="summary_large_image">
<!-- Twitterhandle der Site -->
<meta name="twitter:site" content="@StadtWien">
<!-- Kanonische URL -->
<link rel="canonical" href="https://pfad/zur/seite">
</head>
<body class="js-wm-site">
<div class="wm-site-wrapper js-wm-site-wrapper" data-wm-site-wrapper>
<!-- Header auf jeder Seite -->
<header class="wm-site-header js-wm-site-header wm-site-header--no-margin">
<!-- Skip-Links zum Hauptinhalt und zum Barrierefreiheit-Statement -->
<div class="wm-skip-links js-wm-skip-links wm-h-vh">
<a href="#content" class="wm-btn wm-btn--small js-wm-skip-link">
Zum Inhalt springen
</a>
<a href="https://www.wien.gv.at/info/barrierefreiheit.html" class="wm-btn wm-btn--small wm-btn--i js-wm-skip-link">
Barrierefreiheit auf wien.gv.at
</a>
</div>
<div class="wm-site-header__inner">
<!-- Dieses div kann auf der Startseite auch eine h1 sein -->
<div class="wm-site-header__title">
<!-- Titel der Seite -->
<a href="/" class="wm-link--unstyled">
Titel
</a>
</div>
<!-- Stadt Wien Logo, linkt immer zur wien.gv.at Startseite -->
<span class="wm-site-header__logo">
<a class="wm-site-header__logo-link" href="https://www.wien.gv.at">
<span class="wm-h-vh">Startseite wien.gv.at</span>
<svg viewBox="0 0 311 142" width="80" class="wm-logo" aria-hidden="true" focusable="false">
<path class="wm-logo__image" 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 class="wm-logo__text" fill="#292929" 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" />
</svg>
</a>
</span>
</div>
<!-- Navigation -->
<div data-wm-nav-main-wrapper class="wm-nav-wrapper wm-nav-wrapper--init wm-nav-wrapper--h wm-nav-wrapper--morgenrot ">
<div class="wm-nav-wrapper__inner wm-nav-wrapper__inner--h">
<nav class="wm-nav-main wm-nav-main--h" data-wm-nav-main="true" aria-labelledby="mainnav_title">
<!-- Titel der Navigation -->
<span hidden id="mainnav_title">Haupt</span>
<!-- Burger-Button: Ist per default ein Link, wird dann via JS mit einem <button> ausgetauscht -->
<a href="/pattern-library/pages/inhalt/menue/" class="wm-nav-main__toggle wm-nav-main-btn" data-wm-nav-main-toggle>
<span class="wm-nav-main-btn__text wm-nav-main-btn__text--burger wm-h-vh">
Menü
</span>
<span>
<!-- Burger-Icon -->
<svg class="wm-icon wm-nav-main-btn__icon wm-nav-main-btn__icon--open" width="28" height="28" aria-hidden="true" focusable="false">
<use xlink:href="/assets/110/icons/svg/sprite.symbol.svg#burger"/>
</svg>
<!-- Schließen-Icon -->
<svg class="wm-icon wm-nav-main-btn__icon wm-nav-main-btn__icon--close" width="28" height="28" aria-hidden="true" focusable="false">
<use xlink:href="/assets/110/icons/svg/sprite.symbol.svg#close"/>
</svg>
</span>
</a>
<!-- Kann Begrüßungen, o.ä. für eingeloggte User enthalten -->
<div class="wm-nav-main__header" data-wm-nav-main-header></div>
<!-- Menüpunkte -->
<div class="wm-nav-main__inner" data-wm-nav-main-inner tabindex="-1">
<div class="wm-nav-main__content" id="nav_content">
<div class="wm-nav-main__lists">
<ol class="wm-nav-main__list wm-nav-main__list--1 ">
<li>
<a href="#link" class="wm-nav-main__link">
<span>Link</span>
</a>
</li>
</ol>
</div>
</div>
</div>
</nav>
</div>
</div>
</header>
<!-- Hauptinhalt der Seite -->
<main class="wm-site-content" data-wm-site-content>
<div id="content" tabindex="-1">
<!-- Stage mit Hauptüberschrift -->
<div class="wm-stage">
<div class="wm-stage__content">
<div class="wm-stage__text">
<h1 class="wm-stage__heading">
Überschrift
</h1>
</div>
</div>
</div>
<!-- Größere inhaltliche Blöcken werden in sections geteilt -->
<div class="wm-section">
<div class="wm-section__content">
<!-- Textinhalt sollte in einer row und einem block gewrapped werden -->
<div class="wm-row">
<div class="wm-block">
<!-- Inhalt -->
</div>
</div>
</div>
</div>
</div>
</main>
<!-- Der Footer enthält die notwendigen Links und Copyright-Information -->
<footer class="wm-site-footer">
<div class="wm-section__content">
<!-- Wenn Quellen für Bilder angegeben wurden, werden diese automatisch hier aufgelistet -->
<div class="wm-photo-credits js-wm-photo-credits" hidden>
<strong>Foto-Credits:</strong><br>
</div>
<ul class="wm-h-links--noline wm-u-mbxxs wm-list--reset wm-list--pipe-lg">
<li>
<a href="#">
Impressum
</a>
</li>
<li>
<a href="#">
Datenschutz
</a>
</li>
<li>
<a href="#">
Barrierefreiheit
</a>
</li>
</ul>
<div>
© Stadt Wien, Rathaus, A-1010 Wien
</div>
</div>
</footer>
</div>
<!-- JS, das in jedem Browser ausgeführt werden soll -->
<script src="/assets/130/js/main.min.js"></script>
<!-- JS Komponenten, die nur in modernen Browsern ausgeführt werden -->
<script src="/assets/130/js/components/site.min.js" type="module" crossorigin="use-credentials"></script>
</body>
</html>Minimale Struktur
Code ohne Kommentaren
<!DOCTYPE html>
<html lang="de" class="wm-no-js wien">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>Seitentitel</title>
<link rel="stylesheet" href="/assets/130/css/main.min.css">
<link rel="stylesheet" href="/assets/130/css/main-medium.min.css" media="(min-width: 48em)">
<link rel="stylesheet" href="/assets/130/css/main-large.min.css" media="(min-width: 52.8125em)">
<link rel="stylesheet" href="/assets/130/css/print.min.css" media="print">
<link rel="stylesheet" href="/assets/130/css/motion.min.css" media="(prefers-reduced-motion: no-preference)">
<meta name="description" content="Beschreibung der Seite">
</head>
<body>
<header class="wm-site-header js-wm-site-header">
<div class="wm-site-header__inner">
<div class="wm-site-header__title">
<a href="/" class="wm-link--unstyled">
Titel
</a>
</div>
<span class="wm-site-header__logo">
<a class="wm-site-header__logo-link" href="https://www.wien.gv.at">
<span class="wm-h-vh">Startseite wien.gv.at</span>
<svg viewBox="0 0 311 142" width="80" class="wm-logo" aria-hidden="true" focusable="false">
<path class="wm-logo__image" 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 class="wm-logo__text" fill="#292929" 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" />
</svg>
</a>
</span>
</div>
</header>
<main class="wm-site-content" data-wm-site-content>
<div id="content" tabindex="-1">
<div class="wm-stage">
<div class="wm-stage__content">
<div class="wm-stage__text">
<h1 class="wm-stage__heading">
Überschrift
</h1>
</div>
</div>
</div>
<div class="wm-section">
<div class="wm-section__content">
<div class="wm-row">
<div class="wm-block">
<!-- Inhalt -->
</div>
</div>
</div>
</div>
</div>
</main>
<footer class="wm-site-footer">
<div class="wm-section__content">
<div>
© Stadt Wien, Rathaus, A-1010 Wien
</div>
</div>
</footer>
</body>
</html>Code mit Kommentaren
<!DOCTYPE html>
<!-- Sprache anpassen, wenn das Dokument nicht auf Deutsch ist. -->
<html lang="de" class="wm-no-js 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">
<!-- Seitentitel, muss einzigartig sein. -->
<title>Seitentitel</title>
<!-- Basis Style Sheets -->
<link rel="stylesheet" href="assets/css/main.min.css">
<link rel="stylesheet" href="assets/css/main-medium.min.css" media="(min-width: 48em)">
<link rel="stylesheet" href="assets/css/main-large.min.css" media="(min-width: 52.8125em)">
<!-- Print Style Sheet-->
<link rel="stylesheet" href="assets/css/print.min.css" media="print">
<!-- Style Sheet mit Animationen und Übergängen -->
<link rel="stylesheet" href="assets/css/motion.min.css" media="(prefers-reduced-motion: no-preference)">
<!-- Beschreibung der Seite, maximal 150 Zeichen lang, muss einzigartig sein. -->
<meta name="description" content="Beschreibung der Seite">
</head>
<body>
<!-- Header auf jeder Seite -->
<header class="wm-site-header js-wm-site-header">
<div class="wm-site-header__inner">
<!-- Dieses div kann auf der Startseite auch eine h1 sein -->
<div class="wm-site-header__title">
<!-- Titel der Seite -->
<a href="/" class="wm-link--unstyled">
Titel
</a>
</div>
<!-- Stadt Wien Logo, linkt immer zur wien.gv.at Startseite -->
<span class="wm-site-header__logo">
<a class="wm-site-header__logo-link" href="https://www.wien.gv.at">
<span class="wm-h-vh">Startseite wien.gv.at</span>
<svg viewBox="0 0 311 142" width="80" class="wm-logo" aria-hidden="true" focusable="false">
<path class="wm-logo__image" 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 class="wm-logo__text" fill="#292929" 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" />
</svg>
</a>
</span>
</div>
</header>
<!-- Hauptinhalt der Seite -->
<main class="wm-site-content" data-wm-site-content>
<div id="content" tabindex="-1">
<!-- Stage mit Hauptüberschrift -->
<div class="wm-stage">
<div class="wm-stage__content">
<div class="wm-stage__text">
<h1 class="wm-stage__heading">
Überschrift
</h1>
</div>
</div>
</div>
<!-- Größere inhaltliche Blöcken werden in sections geteilt -->
<div class="wm-section">
<div class="wm-section__content">
<!-- Textinhalt sollte in einer row und einem block gewrapped werden -->
<div class="wm-row">
<div class="wm-block">
<!-- Inhalt -->
</div>
</div>
</div>
</div>
</div>
</main>
<!-- Der Footer enthält die notwendigen Links und Copyright-Information -->
<footer class="wm-site-footer">
<div class="wm-section__content">
<div>
© Stadt Wien, Rathaus, A-1010 Wien
</div>
</div>
</footer>
</body>
</html>CSS
Das CSS für die Website ist in 5 Dateien aufgeteilt, die je nach Viewport-Breite oder Medium angewendet werden. Neben Komponenten-spezifischen Klassen, gibt es eine Reihe von Utility- und Hilfsklassen, die frei verwendet werden können.
JavaScript
Grundsätzlich sind alle Inhalte auch ohne JavaScript zugänglich, wobei die User Experience mit dynamischen Komponenten besser ist.
Meta-Tags
Jedes Dokument muss zumindest aus den folgenden 4 Meta-Tags oder Tags, die das Dokument beschreiben, bestehen. Die Reihenfolge, in der die Elemente im Dokument vorkommen, muss eingehalten werden.
-
Encoding der Seite
Muss im Dokument vor dem
<title>kommen.<meta charset="UTF-8"> -
Viewport Meta Tag
Grundlage für responsive Designs. Muss so früh wie möglich im Dokument vorkommen.
<meta name="viewport" content="width=device-width"> -
Seitentitel
Muss einzigartig sein.
<title>Seitentitel</title> -
Seitenbeschreibung
Maximal 150 Zeichen lang, muss einzigartig sein.
<meta name="description" content="Beschreibung der Seite">
Alle weiteren Meta-Tags sind optional und können frei vergeben werden. Im Dokument sollten sie erst nach <script> und <link rel="stylesheet"> Elementen eingebunden werden. Hinsichtlich Ausmaß und Wahl der Tags steht die Qualität des Dokuments an 1. Stelle. Das bedeutet, dass Tags so gewählt werden sollten, dass …
- das Dokument für Suchmaschinen optimiert ist.
- das Dokument in sozialen Medien und Chat-Programmen mit Titel, Beschreibung und Vorschau-Bild richtig dargestellt wird.
- die Performance weitestgehend optimiert ist.
- Icons und Vorschau-Bilder richtig dargestellt werden, wenn das Dokument als Favorit oder auf dem Homescreen von Smartphones gespeichert wird.
Einen Vorschlag für den Aufbau eines Dokuments, der vieles davon schon berücksichtigt, finden Sie im Kapitel Empfohlene Struktur.