HTML/Tutorials/HTML5-Seitenstrukturierung

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Im vorliegenden Tutorial lernen Sie eine moderne Seitenstruktur mit den neuen HTML5-Elementen kennen, wogegen das HTML-Einstieg-Tutorial die ersten Schritte in HTML erklärt. Ein Grundgerüst finden Sie unter HTML/Tutorials#HTML5-Grundgerüst.

Es gibt gute Gründe, die vielen Vorteile von HTML5 zu nutzen. Die neuen Elemente ermöglichen eine übersichtlichere und semantischere Struktur der Seite.

Inhaltsverzeichnis

[Bearbeiten] header und footer

Beispiel: HTML5-Seitenstruktur
<!doctype html> <html lang="de"> <head> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <title>HTML5-Seite mit Grundstruktur</title> </head> <body> <header> <img src="logo.svg" alt="logo"> <h1>Überschrift</h1> </header> <footer> <a href="kontakt.html">Kontakt</a> <p>© 2014 by selfHTML</p> </footer> </body> </html>

Der body ist der sichtbare Bereich unserer Webseite. Die meisten Webpräsenzen haben oben einen Seitenkopf, den sogenannten header, der Logo, Titel und die Navigationselemente enthält.

Beachten Sie, dass head und header verschiedene HTML-Elemente sind.

Weiterhin gibt es den footer, der Kontakt, Impressum, Copyright und evtl. die Sitemap enthält. Während allein schon der Name eine Position unterhalb des Inhalts suggeriert, ist es in Blogs und Forenpostings üblich, den footer rechts zu positionieren.

Früher wurden diese Elemente durch div-Elemente, denen man spezielle ids oder Klassen gegeben hat, dargestellt. Heute geht das mit header und footer semantischer, einfacher und kürzer.

[Bearbeiten] nav

Beispiel: HTML5-Seitenstruktur
<body> <header> <img src="logo.svg" alt="logo"> <h1>Überschrift</h1> <nav> <ul> <li><a href="#link_1.html">Wiki</a></li> <li><a href="#link_2.html">Blog</a></li> <li><a href="#link_3.html">Forum</a></li> </ul> </nav> </header>

Die Navigation wird durch ein nav-Element umschlossen, das aber auch für Unter-Navigationen verwendet werden kann.

Empfehlung: Überlegen Sie, die Navigation am Ende des Dokuments zu platzieren. Sie können sie dann absolut in den Header positionieren und bei einer Darstellung auf mobilen Geräten die relative Positionierung aktivieren. Markieren Sie den Hauptinhalt der Seite mit <main>, um Screenreader direkt zum Inhalt springen zu lassen.

[Bearbeiten] aside

Beispiel: HTML5-Seitenstruktur
<!doctype html> <html lang="de"> <head> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <title>HTML5-Seite mit Grundstruktur</title> </head> <body> <header> <img src="logo.gif" alt="logo"> <h1>Titel</h1> </header> <h1>Überschrift</h1> <p>Dies ist meine erste HTML5-Seite1</p> ... mehr Inhalt <aside> <h2>Weiterführende Links</h2> <ul> <li><a href="link_1.html">Wiki</a></li> <li><a href="link_2.html">Blog</a></li> <li><a href="link_3.html">Forum</a></li> </ul> </aside> <footer> </footer> </body> </html>

Schon im Buchdruck gab es Seitenleisten und Randnotizen, die in HTML5 mit dem aside-Element dargestellt werden. Dabei ist es uns egal, ob diese Seitenleiste an der (rechten oder linken) Seite oder gar unten platziert ist, da dies später durch die CSS-Eigenschaften bestimmt wird. Wichtig ist nur, dass im aside-Block Informationen zum Inhalt der Webseite stehen, die aber nicht Teil des Inhalts der Webseite sind.

[Bearbeiten] main, article oder section?

Beispiel: HTML5-Seitenstruktur - Elemente für den Inhaltsbereich
<!doctype html> <html lang="de"> <head> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <title>HTML5-Seite mit Grundstruktur</title> </head> <body> <header> <img src="logo.gif" alt="logo"> <h1>Titel</h1> </header> <main> <article> <h1>Überschrift</h1> <p>Dies ist meine erste HTML5-Seite1</p> ... mehr Inhalt </article> <aside> <section> <h2>Kontakt</h2> <ul> <li><a href="link_1.html">Wiki</a></li> <li><a href="link_2.html">Blog</a></li> <li><a href="link_3.html">Forum</a></li> </ul> </section> <section> <h2>Weiterführende Links</h2> <ul> <li><a href="link_1.html">Wiki</a></li> <li><a href="link_2.html">Blog</a></li> <li><a href="link_3.html">Forum</a></li> </ul> </section> </aside> </main> <footer> </footer> </body> </html>

Bis jetzt waren die neuen HTML5-Elemente eine große Vereinfachung, aber für die Auszeichnung des Inhaltsbereichs gibt es nun gleich 3 Elemente:

  • main: der Hauptinhalt der Seite (das role-Attribut ist nicht mehr erforderlich)
  • article: ein in sich geschlossener Artikel, der Überschrift (und evtl. einige sections, einen eigenen header und footer) enthält.
  • section: ein Abschnitt wie ein Kapitel, ein ...

Besonders der Unterschied zwischen article und section ist oft Gegenstand heißer Diskussionen. Im Selfhtml-Blog gibt es einige Beispiele für mögliche Anwendungen (und gegenseitige Verschachtelungen) der beiden Elemente:


Empfehlung:
  • Verwenden Sie article, wenn der Inhalt in sich abgeschlossen ist
  • Verwenden Sie section, wenn es mehrere ähnliche Blöcke gibt ...
… und halten Sie sich nicht weiter an den haarfeinen Unterschieden zwischen den beiden Elementen auf.

[Bearbeiten] Fallback für ältere Internet Explorer

Damit auch ältere Internet Explorer der Versionen 6-8 die neuen HTML5-Elemente darstellen können, kann ein kurzes JavaScript eingebunden werden. Am einfachsten ist es, dieses nicht auf dem eigenen Server vorzuhalten, sondern direkt von einem CDN abzurufen. Dies hat überdies den Vorteil, dass es oft schon im Browser-Cache der Nutzer vorhanden ist.

Der Aufruf erfolgt in einem Conditional Comment, der nur vom Internet Explorer kleiner als Version 9 (lt IE 9) verstanden wird. Alle anderen Browser ignorieren dies als reinen Kommentar.

Beispiel: HTML5-Seitenstruktur
<!doctype html>
<html lang="de">
<head>
  <meta charset="utf-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0>
  <!--[if lt IE 9]>
  <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
  <![endif]-->
  <title>HTML5-Seite mit Grundstruktur</title>
</head>

Hinweis

SelfHTML hatte in seinen Beispielen einen solchen html5shiv verwendet. Allerdings ist der Anteil der Benutzer mit IE8 bereits jetzt (Stand Januar 2016) mit 0.2% aller Benutzer so gering, dass ein weiterer Einsatz nicht mehr nötig ist.[1] Der HTML5-shiv wurde deshalb am 10.01.2016 aus allen Beispielen entfernt.

[Bearbeiten] So sieht das fertige Beispiel aus:

Die gesamte Seite sieht nun so aus:

Beispiel: HTML5-Seite mit Grundstruktur ansehen …
<!doctype html>
<html lang="de">
<head>
  <meta charset="utf-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <style>
    body{
	  margin: 10px auto;
	  max-width: 60em;
	}
	* {
	  padding: 10px;margin:5px;
	}
	header{
	  border: 2px solid #3481cd
	}
	nav{
	  background: skyblue;
	}
	footer{
	  border: 2px solid seagreen;
	}
 
	main{
	  border: 2px solid hotpink;
	}
 
	article{
	  border: 2px solid purple;
	}
	section{
	  border: 2px solid slateblue;
	}
	aside{
	  border: 2px solid tomato;
	}
  </style>
  <title>HTML5-Seite mit Grundstruktur</title>
</head>
 
<body>
  <header>
    <img src="logo.gif" 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>
      <h1>CSS-basierte Layouts</h1>
      <h2>HTML-Struktur ohne CSS</h2>
      <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>
   </article>
 
  <aside>
    <h2>Weiterführende Links</h2>
    <ul>
      <li><a href="#link_1.html">Wiki</a></li>
      <li><a href="#link_2.html">Blog</a></li>
      <li><a href="#link_3.html">Forum</a></li>
    </ul>
  </aside>
  </main>
 
  <footer>
     <a href="#kontakt.html">Kontakt</a>
     <p>© 2014 by selfHTML</p>
  </footer>
</body>
</html>
Beachten Sie: Da die Internetexplorer 10 und 11 das main-Element nicht kennen, benötigen sie die zusätzliche CSS-Angabe main {display: block;}, um es richtig darzustellen.

[Bearbeiten] Wie geht es weiter?

Wahrscheinlich sind Sie jetzt ein bisschen enttäuscht, weil die neue HTML5-Seite noch gar nicht richtig aussieht.

Sie können diese Seitenstruktur aber durch CSS in jede beliebige Form bringen. Unter CSS/Anwendung und Praxis finden Sie einige Tutorials, die ihnen die nächsten Schritte nahebringen:

[Bearbeiten] Quellen

  1. Browser-Statistik: Statistiken der Browser-Versionen
Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Schnell‑Index
Mitmachen
Werkzeuge
Spenden
SELFHTML