HTML5-Tags Übersicht
HTML5 bietet eine Vielzahl von Tags, die für die Strukturierung, Darstellung und Interaktivität von Webseiten verwendet werden. Die Standard-Tags in HTML5 sind essenzielle Bausteine zur Gestaltung von Inhalten wie Texte, Bilder, Links und Benutzeroberflächenelemente. Diese Tags werden in fast jedem Webprojekt eingesetzt, um die grundlegende Struktur und das Design zu schaffen. Die folgende Tabelle (Spickzettel) gibt einen Überblick über diese Standard-Tags, beschreibt ihre Funktion und zeigt ein Beispiel für ihre Verwendung.
| Tag | Funktion | Beispiel |
|---|---|---|
| <html> | Wurzelelement eines HTML-Dokuments | <html lang=“de“>…</html> |
| <head> | Metadaten des Dokuments | <head><title>Titel</title></head> |
| <title> | Definiert den Titel des Dokuments | <title>Meine Webseite</title> |
| <body> | Inhalt des Dokuments | <body>…</body> |
| <header> | Kopfbereich eines Dokuments oder Abschnitts | <header><h1>Überschrift</h1></header> |
| <footer> | Fußbereich eines Dokuments oder Abschnitts | <footer>Copyright 2024</footer> |
| <nav> | Navigationselement | <nav><a href=“#“>Link</a></nav> |
| <main> | Hauptinhalt des Dokuments | <main>Hauptinhalt hier</main> |
| <section> | Abschnitt des Inhalts | <section><h2>Thema</h2></section> |
| <article> | Eigenständiger Artikel | <article>Ein Artikel</article> |
| <aside> | Zusätzliche Inhalte, z. B. Sidebar | <aside>Weitere Informationen</aside> |
| <h1> bis <h6> | Überschriftenebenen | <h1>Titel</h1> |
| <p> | Absatz | <p>Ein Absatz</p> |
| <a> | Hyperlink | <a href=“https://example.com“>Link</a> |
| <img> | Bild | <img src=“bild.jpg“ alt=“Beschreibung“> |
| <ul> und <li> | Ungeordnete Liste | <ul><li>Element</li></ul> |
| <ol> und <li> | Geordnete Liste | <ol><li>Element</li></ol> |
| <table> | Tabelle | <table><tr><td>Zelle</td></tr></table> |
| <form> | Formular | <form><input type=“text“></form> |
| <input> | Eingabefeld | <input type=“text“> |
| <button> | Schaltfläche | <button>Klicken</button> |
| <video> | Video einbetten | <video controls><source src=“video.mp4″></video> |
| <audio> | Audio einbetten | <audio controls><source src=“audio.mp3″></audio> |
Standard Tags von HTML5
| Tag | Funktion | Beispiel |
|---|---|---|
| <div> | Container für Inhalte oder andere Elemente | <div>Inhalt</div> |
| <p> | Absatz | <p>Ein Absatz</p> |
| <span> | Inline-Container für Text oder andere Elemente | <span>Hervorhebung</span> |
| <a> | Hyperlink | <a href=“https://example.com“>Link</a> |
| <img> | Bild | <img src=“bild.jpg“ alt=“Beschreibung“> |
| <br> | Zeilenumbruch | Text<br>neue Zeile |
| <strong> | Betonung, wichtig | <strong>Wichtig</strong> |
| <em> | Kursiv, Betonung | <em>Betonung</em> |
| <ul> und <li> | Ungeordnete Liste | <ul><li>Element</li></ul> |
| <ol> und <li> | Geordnete Liste | <ol><li>Element</li></ol> |
| <table> und <tr>, <td> | Tabelle mit Zeilen und Zellen | <table><tr><td>Zelle</td></tr></table> |
| <input> | Eingabefeld | <input type=“text“> |
| <button> | Schaltfläche | <button>Klicken</button> |
| <label> | Beschriftung für ein Eingabefeld | <label for=“name“>Name:</label><input id=“name“ type=“text“> |
| <blockquote> | Blockzitat | <blockquote>Zitat</blockquote> |
| <code> | Code-Element | <code>console.log(‚Hallo‘);</code> |
| <pre> | Vorformatierter Text | <pre>Vorformatierter Text</pre> |
Die hier vorgestellten Standard-Tags sind die Grundlage jeder HTML Seite und ermöglichen es Entwicklern, Inhalte klar zu strukturieren und benutzerfreundliche Webseiten zu erstellen. Durch die Kombination dieser grundlegenden Elemente mit erweiterten HTML5-Tags und modernen Techniken wie CSS und JavaScript können leistungsstarke und ansprechende Webanwendungen entwickelt werden. Nutzen Sie diese Übersicht als Referenz, um die Basis Ihres nächsten Projekts effizient zu gestalten.
Letzte Bearbeitung am Montag, 30. Dezember 2024 – 11:54 Uhr von Alex, Webmaster für Google und Bing SEO.
