<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0;" />
		<style>
			body{
				margin: 10px auto;
				max-width: 60em;
				font-family: sans-serif;
				color: #333333;
			}

			header, nav, main, article, section, aside, footer {
				border-radius: 0px 0.5em 0.5em;
				border: 1px solid;
				padding: 10px;
				margin: 10px;
			}

			header {
				background: #F1F3F4;
				border-color: #d5d5d5;
			}

			nav {
				background: #fffbf0;
				border-color: #e7c157;
			}

			section {
				background: #F1F3F4;
				border-color: slateblue;
			}

			main {
                                display: block;  /* für IE */
				background: #c4ced3;
				border-color: #8a9da8;
			}

			article {
				background: #ffede0;
				border-color: #df6c20;
			}

			aside {
				background: #ebf5d7;
				border-color: #8db243;
			}

			footer {
				background: #e4ebf2;
				border-color: #8a9da8;
			}
		</style>
		<title>HTML5-Seite mit Grundstruktur</title>
	</head>

	<body>
		<header>
			<img src="/images/9/99/Selfhtml-beispiel-logo.png" alt="logo">
			<h1>Titel</h1>
			<nav>
				<ul>
					<li><a href="#link_1.html">Startseite</a></li>
					<li><a href="#link_2.html">Unterseite 1</a></li>
					<li><a href="#link_3.html">Unterseite 2</a></li>    
					<li><a href="#link_4.html">Kontakt</a></li>
				</ul>
			</nav>
		</header>

		<main>
			<article>
				<h2>CSS-basierte Layouts</h2>
				<h3>HTML-Struktur ohne CSS</h3>
				<p>Diese Seite enthält zunächst nur die Struktur und den Inhalt.
					Das Aussehen wird erst in folgenden Beispielen über CSS definiert.
				</p>
				<p>Dennoch ist diese Seite schon nutzbar und wird vom Browser
					entsprechend dessen Voreinstellungen bereits sinnvoll angezeigt.
				</p>
				<p>Sehen Sie sich den Quellcode dieser Seite an.<br>
					(Kontextmenu: Quelltext betrachten)</p>
			</article>

			<aside>
				<h2>Weiterführende Links</h2>
				<ul>
					<li><a href="#link_1.html">Blog</a></li>
					<li><a href="#link_2.html">Doku</a></li>
					<li><a href="#link_3.html">Forum</a></li>
				</ul>
			</aside>
		</main>

		<footer>
			<a href="#kontakt.html">Kontakt</a>
			<p>© 2014 SELFHTML</p>
		</footer>
	</body>
</html>