Beispiel:HTML5-Grundstruktur.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> body{ margin: .5em auto; max-width: 60em; font-family: sans-serif; color: #333333; }
header, nav, main, article, section, aside, footer { border-radius: 0 0.5em 0.5em; border: thin solid; padding: .5em; margin: .5em; }
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; } /* Grundlayout für SELFHTML-Beispiele */ h1 { position: relative; padding-left: 3em; } h1:before { position: absolute; left: 0; content: ""; width: 2rem; border: thin solid transparent; aspect-ratio: 1/1; background: url("https://wiki.selfhtml.org/images/4/45/SELF-Logo.svg") no-repeat; background-size: cover; } </style> <title>HTML5-Seite mit Grundstruktur</title> </head>
<body> <header>
Inhaltsverzeichnis
Titel
<nav>
- <a href="#link_1.html">Startseite</a>
- <a href="#link_2.html">Unterseite 1</a>
- <a href="#link_3.html">Unterseite 2</a>
- <a href="#link_4.html">Kontakt</a>
</nav> </header>
<main> <article>
CSS-basierte Layouts
HTML-Struktur ohne CSS
Diese Seite enthält zunächst nur die Struktur und den Inhalt. Das Aussehen wird erst in folgenden Beispielen über CSS definiert.
Dennoch ist diese Seite schon nutzbar und wird vom Browser entsprechend dessen Voreinstellungen bereits sinnvoll angezeigt.
Sehen Sie sich den Quellcode dieser Seite an.
(Kontextmenu: Quelltext betrachten)
</article>
<aside>
Weiterführende Links
- <a href="#link_1.html">Blog</a>
- <a href="#link_2.html">Doku</a>
- <a href="#link_3.html">Forum</a>
</aside> </main>
<footer> <a href="#kontakt.html">Kontakt</a>
© 2014 SELFHTML
</footer> </body> </html>
