HTML5 und CSS3
Inhaltsübersicht:
HTML5 zur Strukturierung
Mit HTML5 wird die Struktur nochmals optimiert. Es gibt neue semantische Elemente, größtenteils um Standardbereiche, die auf jeder Website vorliegen, zu konkretisieren:
<header>: Kopfbereich<nav>: Navigationsbereich<article>: Inhaltsbereich<section>: Unterbereich<aside>: Nebenbereich<footer>: Fußbereich
Diese Elemente können bisherige <div>-Container ersetzen und die Interpretation für
zugreifende Software und Hardware erleichtern.
Grundgerüst einer HTML5-Datei
<!DOCTYPE html>
<html lang="de">
<head>
<title>Titel der Datei</title>
<meta charset="UTF-8">
<meta name="author" content="Name des Autors">
<meta name="description"
content="Seitenbeschreibung">
<meta name="keywords"
content="Komma, getrennte, Schlüsselwörter">
</head>
<body>
<!-- Kopfbereich -->
<header>
<h1>Überschrift der gesamten Seite</h1>
<nav>Navigation im Kopfbereich</nav>
</header>
<!-- Inhaltsbereich -->
<article>
<h1>Überschrift des Artikelbereiches</h1>
<!-- Navigationsbereich -->
<nav>Weiterer Navigationsbereich</nav>
<!-- Weitere Inhalte -->
[... Absätze, Listen, Bilder usw. ...]
<!-- Unterbereich -->
<section>
<h1>Überschrift des Artikelbereiches</h1>
<!-- Weitere Inhalte -->
[... Absätze, Listen, Bilder usw. ...]
</section>
</article>
<!-- Nebenbereich -->
<aside>
[... weitere Inhalte ...]
</aside>
<!-- Fußbereich -->
<footer>
<h1>Überschrift des Fußbereiches</h1>
<nav>Navigation im Fußbereich</nav>
</footer>
</body>
</html>
Weitere neue Elemente:
<hgroup>: Gruppierung von Überschriftenelementen<figure>mit<figcaption>: eigenständiger, selbsterklärender Inhalt (z.B. Bild, Video oder Text) mit optionaler Überschrift<time>: Daums-/Zeitangabe<mark>: hervorgehobener, als markierter gemeinter Text (z.B. bei Suchergebnissen)<video>und<audio>: Multimedia-Elemente<progress>und<meter>: Fortschrittsbalken<details>mit<summary>: Auf-/Zuklappbares Widget
Der Internet Explorer unterstützt HTML5-Elemente erst ab Version 9. Für ältere Internet Explorer-Browser, die mit den neuen Elementen nicht umgehen können, gibt es die freie Javascript-Lösung html5shiv. Diese ermöglicht ein Anzeigen der Seite auch ohne dass der Browser von sich aus die Elemente kennt.
Javascript-Lösung für ältere Internet Explorer-Browser
<!--[if lt IE 9]>
<script language="javascript"
type="text/javascript"
src="[Pfadangabe]/html5shiv.js"></script>
<![endif]-->
Hinweis: Das <script>-Element muss geschlossen werden, ansonsten wird nur eine weiße Seite
angezeigt!
Auch ein paar bereits archivierte Elemente sind wieder da. Allerdings nicht um von Hause aus ein Format zuzuweisen, sondern um die Bedeutung des ausgezeichneten Wortes oder Bereiches hervorzuheben:
<b>als bedeutungstragendes Element, z.B. Firmenname, Stichwörter
(frühere Bedeutung: Fettschrift)<i>für Fachausdrücke, Phrasen oder z.B. Eigennamen
(frühere Bedeutung: Kursivschrift)<small>für das "Kleingedruckte", z.B. Urheberrechtshinweis
Weitere Hinweise auf Änderungen befinden sich in den jeweiligen Artikeln, vor allem im Bereich Umsetzung - hervorgehoben in einem solchen Kasten wie diesem hier.
Und dann gibt es auch noch neue Attribute!
input/textarea placeholder: Temorärer Text für Eingabefeld- diverse input types:
color | date | datetime | datetime-local | email | file | image | month | number | password | range | search | tel | time | url | week link type: Zieldateityp eines Verweises, wenn kein HTML-Dokumentsizes: Attribut imLink-Element in Verbindung mitrel="icon"
CSS3 zur Formatierung
Um das vorgesehene Standard-Verhalten bei den neuen Elementen wirklich sicherzustellen, ist (zumindest übergangsweise) die Formatierung per CSS empfehlenswert:
Standard-Verhalten bei neuen Elementen sicherstellen
header, nav, section, article, aside, footer {
display: block;
}
time, mark {
display: inline;
}
Auch in Formatierungsangelegenheiten geht es weiter voran. Die nun dritte offizielle Version (CSS3) versucht natürlich ebenfalls mit der Zeit zu gehen. Wie immer heißt es abwarten, was davon die Browser interpretieren - und wann.
Ein Ausblick:
- Silbentrennung:
hyphens: auto; hyphenate-limit-chars: ZAHL; hyphenate-limit-lines: ZAHL; - Text mehrspaltig darstellen (Spaltenanzahl, Linie und Abstand zwischen den Spalten):
column-count: 3; column-rule: 1px solid #000; column-gap: 2em; - Größe vom Benutzer veränderbar:
resize: both | inherit | horizontal | none | vertical - Mehrere Hintergrundbilder und weitere Optionen:
background-clip,background-origin,background-size - Rahmen und Innenabstand bzgl. Elementgröße:
box-sizing - Transparenz-Level:
opacity - Schriftarten serverbasiert einbinden:
@font-face - Endgeräte-spezifische Anweisungen, sog. Media Queries
- Selektoren
:nth-child(),:last-child,:first-of-type - Transformationen:
rotating,scaling - Schatten-Effekte:
box-shadow,text-shadow - Texttrennungen, Umbrüche:
word-break,overflow-wrap - Und vieles mehr, z.B. Animationen, Rahmenbilder, Farbverläufe:
animation,border-images,gradients,transitions
Einen Überblick der Unterstützung von HTML5 und
CSS3 in den verschiedensten
Browser-Umsetzungen und -Versionen findet sich auf Can I use....
Einige theoretisch mögliche Angaben sind noch nirgens implementiert, andere nur mit entsprechendem
Browser-Präfix. Also heißt es: dran bleiben, ausprobieren, beobachten. Immerhin
funktionieren runde Ecken (border-radius) mittlerweile in jedem aktuellen Browser.
Weiterführende Literatur:
- Gull, Clemens und Münz, Stefan
- HTML5-Handbuch,
Franzis Verlag, Auflage: 2. (28. November 2011),
ISBN 3645601511
Auch online verfügbar: HTML5-Handbuch (Online-Version)
http://webkompetenz.wikidot.com/docs:html-handbuch, - W3C:
- HTML5-Spezifikation,
http://dev.w3.org/html5/spec/single-page.html, World Wide Web Consortium, 2012