HTML5 hat viele neue Tags, Attribute und APIs eingeführt, die das Webdesign und die Webentwicklung wesentlich verbessert haben. Hier sind einige der wichtigsten neuen HTML5-Befehle (Tags) mit Beispielen:
1. Neue Struktur-Tags
HTML5 hat semantische Tags eingeführt, die die Struktur und Lesbarkeit des Codes verbessern.
<header>
Definiert den Kopfbereich einer Seite oder eines Abschnitts.
<header> <h1>Meine Website</h1> <nav> <ul> <li><a href="#home">Home</a></li> <li><a href="#about">Über uns</a></li> <li><a href="#contact">Kontakt</a></li> </ul> </nav> </header><nav>
Kennzeichnet einen Navigationsbereich.
<nav> <ul> <li><a href="#home">Home</a></li> <li><a href="#services">Dienste</a></li> <li><a href="#contact">Kontakt</a></li> </ul> </nav><section>
Definiert einen Abschnitt einer Seite, der thematisch zusammengehörige Inhalte enthält.
<section> <h2>Unsere Geschichte</h2> <p> Hier steht unsere Geschichte...</p> </section><article>
Stellt einen eigenständigen Inhalt dar, der eigenständig verteilt oder wiederverwendet werden kann.
<article> <h2> Blog Post </h2> <p> Dies ist ein Blog-Beitrag. </p> </article><footer>
Definiert den Fußbereich einer Seite oder eines Abschnitts.
<footer> <p>© 2024 Meine Website. Alle Rechte vorbehalten.</p> </footer>2. Medientags
HTML5 hat native Unterstützung für Multimedia-Inhalte eingeführt.
<audio>
Integriert Audiodateien direkt in das HTML-Dokument.h
<audio controls> <source src="song.mp3" type="audio/mpeg"> Ihr Browser unterstützt das Audio-Element nicht. </audio><video>
Ermöglicht die Einbettung von Videos.
<video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> Ihr Browser unterstützt das Video-Element nicht. </video>3. Formular-Tags
HTML5 hat neue Eingabefelder und Funktionen für Formulare hinzugefügt.
<input type="date">
Ermöglicht die Eingabe von Datumswerten.
<label for="birthday"> Geburtsdatum:</label> <input type="date" id="birthday" name="birthday"><input type="range">
Erstellt einen Schieberegler.
<label for="volume"> Lautstärke:</label> <input type="range" id="volume" name="volume" min="0" max="100"><input type="email">
Validiere E-Mail-Adressen.
<label for="email"> E-Mail:</label> <input type="email" id="email" name="email"><input type="color">
Erlaubt die Auswahl einer Farbe.
<label for="favcolor"> Lieblingsfarbe:</label> <input type="color" id="favcolor" name="favcolor" value="#ff0000">4. Canvas-Element
Das <canvas>
-Tag ermöglicht die dynamische Generierung von Grafiken und Animationen.
<canvas>: Definiert eine Zeichenfläche für 2D-Grafiken.
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas> <script> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.fillStyle = "#FF0000"; ctx.fillRect(0, 0, 150, 75); </script>5. SVG (Scalable Vector Graphics)
HTML5 ermöglicht die Integration von Vektorgrafiken direkt im HTML-Code.
<svg>
Wird verwendet, um Vektorgrafiken zu definieren.
<svg width="100" height="100"> <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" /> </svg>6. Neue API-Elemente
HTML5 hat viele neue APIs eingeführt, darunter:
Geolocation API: Bestimmt den Standort des Benutzers.
<button onclick="getLocation()"> Mein Standort</button> <p id="demo"></p> <script> function getLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition); } else { document.getElementById("demo").innerHTML = "Geolocation wird von diesem Browser nicht unterstützt."; } } function showPosition(position) { document.getElementById("demo").innerHTML = "Breitengrad: " + position.coords.latitude + "<br>Längengrad: " + position.coords.longitude; } </script>7. Lokale Speicherung
HTML5 bietet die Möglichkeit, Daten lokal im Browser zu speichern.
localStorage: Speichert Daten ohne Verfallsdatum.
<script> localStorage.setItem("name", "Max Mustermann"); document.getElementById("demo").innerHTML = localStorage.getItem("name"); </script>