CSS Tutorial und HTML Beispiele

CSS (Cascading Style Sheets) Basics Tutorial. Dazu Beispiele mit HTML in Verbindung mit CSS.

HTML5 Dokument

Für die Ansicht eines HTML5 Dokuments benötigt man in der minimalen Konfiguration folgende HTML Elemente, um eine HTML5 Grundstruktur aufzubauen.

<!doctype html>
<html>
    <head>
        <title>
Titel der HTML5 Seite</title>
    </head>
    <body>
    </body>
</html>

Entscheidend für die Deklaration eines HTML Dokuments als HTML5, ist die erste Zeile in der HTML Grundstruktur: <!doctype html>. Diese Dokumenttyp-Deklaration wird als aktueller Standard für HTML5 verwendet. Der Aufbau des HTML5 Grundgerüsts kann/sollte ab diesem Punkt mit wichtigen HTML Elementen im head-Bereich erweitert werden. Angaben zur Sprache, der Zeichenkodierung und des Viewport sollten fester Bestandteil sein, damit User und Browser die HTML5 Seite einordnen können.

<!doctype html>
<html lang="de">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Titel der HTML5 Seite</title>
    </head>
    <body>
    </body>
</html>

Die Sprache die im HTML5 Dokument verwendet wird, kommt direkt in den html-Tag. Die Meta-Angaben zum Charset und des Viewport, müssen im Head festgehalten werden.

HTML5 Elemente zum Aufbau der Dokumentstruktur

Um eine gewisse Content-Struktur in einem HTML Dokument aufzubauen, gibt es einige HTML5 Elemente, die es erlauben die Inhalte der Seite in Abschnitte oder Sektionen zu unterteilen. Das Beispiel zeigt, wie die neuen HTML5 Elemente header, nav, section und footer zur Inhaltsgliederung benutzt werden könnten.

<!doctype html>
<html lang="de">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Sektionen einer HTML5 Seite</title>
    </head>
    <body>
        <header>
            <p>HTML5 header-Element als Überschrift</p>
        </header>
        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Blog</a></li>
                <li><a href="#">HTML5 Navigations-Menü</a></li>
                <li><a href="#">Kontakt</a></li>
            </ul>
        </nav>
        <section>
            <h1>HTML 5 Sektionen</h1>
            <p>Erläuterungen und Hinweise zu HTML5</p>
        </section>
        <footer>
            <p>HTML5 footer-Element für Copyright oder Footer-Menü</p>
        </footer>
    </body>
</html>

HTML 5 bietet neben HTML Elementen zur Textstrukturierung, viele weitere Neuerungen für eingebettete Inhalte, Formulare oder semantische Textauszeichnungen, die das Ausgabespektrum eines normalen HTML Dokuments hilfreich erweitern.