HTML5 ist die neueste Version der Hypertext Markup Language und stellt einen entscheidenden Standard für die Erstellung von Webseiten dar. Es umfasst eine Vielzahl von Tags, die es Webentwicklern ermöglichen, strukturierte und interaktive Inhalte zu kreieren. Die Kenntnis der grundlegenden HTML-Tags ist für jeden Webentwickler unabdingbar, denn sie bilden das Fundament für jede Webseite. Der korrekte Einsatz dieser Tags gewährleistet, dass Webseiten sowohl funktional als auch ästhetisch ansprechend sind.
Zur Grundstruktur eines HTML-Dokuments gehören Tags, die die Basis für jede Webseite bilden. Dazu zählen der DOCTYPE, der den Dokumenttyp definiert und den Browsern kommuniziert, welche Version von HTML verwendet wird. Das html-Tag umschließt den gesamten Inhalt eines Dokuments und leitet somit jedes HTML-Dokument ein. Innerhalb dessen teilen die Tags head und body das Dokument in zwei Teile: den Kopfbereich, der Metadaten und Skripte enthält, und den Körper, in dem der sichtbare Inhalt der Webseite platziert wird.
Es ist essenziell, dass Webentwickler ein tiefgreifendes Verständnis dafür haben, wie diese Tags zusammenwirken, um leistungsfähige und zugängliche Webanwendungen zu schaffen. Die korrekte Anwendung der HTML-Strukturelemente wie header, footer, section, und article trägt dazu bei, dass Inhalte logisch strukturiert und für die Nutzer klar verständlich sind. Des Weiteren erlauben semantische Tags wie nav für Navigation und figure für Abbildungen eine genauere Bedeutungszuweisung von Teilen einer Webseite, was sowohl Suchmaschinen als auch assistiven Technologien zu Gute kommt.
Contents
HTML-Dokumente sind durch eine klare Struktur gekennzeichnet, welche die Basis für das Design und den Inhalt einer Webseite darstellt. Dieses Grundgerüst sorgt für Ordnung und erleichtert Browsern sowie Entwicklern die Arbeit.
Die Dokumenttypdeklaration leitet jedes HTML-Dokument ein und spezifiziert die HTML-Version, wodurch Browser den Inhalt korrekt darstellen können. Ein standardmäßiges Grundgerüst besteht aus dem <html>-Element, welches den Inhalt in <head> und <body> unterteilt.
Der <head>-Teil beinhaltet den <title> der Seite und Metadaten wie <meta>-Tags, welche Suchmaschinen und Browsern Informationen bereitstellen. Die Metadaten können unter anderem Charakterkodierung, Autor, Beschreibung und Ansichtseinstellungen beinhalten.
Innerhalb des <body>-Elements wird der eigentliche Inhalt der Webseite dargestellt. Das <header>-Element kann für die Einführung der Seite verwendet werden, <nav> für die Navigation, <section>, <article> und <footer> dienen der strukturierten Aufteilung des Inhaltes.
Zur Strukturierung des Textes nutzen Entwickler Überschrift-Tags (<h1> bis <h6>). Der <h1>-Tag definiert meist den wichtigsten Titel der Seite, während <h2> bis <h6> für Unterüberschriften verwendet werden.
Listen sind wichtige Elemente, um Inhalte zu strukturieren. Geordnete Listen (<ol>) bringen Elemente in eine numerische Reihenfolge, ungeordnete Listen (<ul>) verwenden Aufzählungspunkte. Jedes Listenelement wird mit einem <li>-Tag markiert.
Hyperlinks (<a>-Tag mit href-Attribut) bilden das Fundament des World Wide Web. Sie verbinden Inhalte durch klickbare Text- oder Bildelemente und ermöglichen die Navigation zwischen verschiedenen Webseiten oder Seitenbereichen.
Bilder (<img>-Tag mit src und alt-Attributen) und andere Multimedia-Elemente bereichern den Inhalt, indem sie Informationen visuell unterstützen. Das alt-Attribut ist wichtig für die Barrierefreiheit und Suchmaschinenoptimierung.
Die korrekte Anwendung von HTML-Tags zur Textformatierung ist entscheidend, um Inhalten die gewünschte Struktur und Betonung zu geben. Hier werden spezifische Tags betrachtet, die für die Gestaltung von Texten unerlässlich sind.
HTML bietet verschiedene Tags, um Textabsätze und Zeilenumbrüche zu definieren. Das <p>-Tag erstellt einen Textabsatz, während <br> für einen Zeilenumbruch ohne Erzeugung eines neuen Absatzes steht. Für horizontale Trennlinien wird <hr> verwendet.
Schriftarten können durch den Einsatz spezifischer Tags hervorgehoben werden:
<b> und <strong> geben Texten Gewicht, wobei <strong> zusätzlich eine semantische Bedeutung trägt.<i> und <em> kennzeichnen Texte, die betont werden sollen, wobei <em> semantische Betonung impliziert.<u>-Tag unterstreicht Text, sollte jedoch sparsam verwendet werden.<s> zeigt an, dass der Text nicht mehr aktuell ist, während <del> und <ins> für gelöschten beziehungsweise eingefügten Text stehen.Größe und Hervorhebung:
<big> und <small> verändern die Textgröße, sind jedoch veraltet und werden nicht empfohlen.<sub> und <sup> erzeugen tief- bzw. hochgestellten Text.Zur Feinabstimmung des Textflusses dienen Phrasenelemente und Auszeichnungen:
<q> für kurze Zitate innerhalb eines Absatzes, wobei das Element Anführungszeichen um den Text setzt.<code> für die Darstellung von Code-Elementen.<span> ermöglicht die Stilisierung von Textabschnitten ohne semantische Bedeutung.<zeit> zur semantisch korrekten Markierung von Zeitelementen, sollte jedoch durch das standardisierte Tag <time> ersetzt werden.Für die Strukturierung von Inhalten in Tabellenform stehen spezielle Tags zur Verfügung:
<table> definiert eine Tabelle.<tr> steht für eine Tabellenzeile.<th> beschreibt die Kopfzelle einer Tabelle und impliziert eine fettgedruckte und zentrierte Formatierung.<td> kennzeichnet die Standardzellen einer Tabelle.Für eine bessere Strukturierung lassen sich Tabellen weiter untergliedern:
<thead> bildet den Kopfbereich der Tabelle.<tbody> umfasst den Hauptinhalt.<tfoot> definiert den Fußbereich.
HTML-Formulare sind entscheidend für die Interaktion mit Benutzern, da sie die Eingabe und Übermittlung von Daten ermöglichen. Sie vereinen eine Vielfalt von Eingabeelementen, die präzise auf die Bedürfnisse der Nutzer abgestimmt werden können.
Ein Formular wird in HTML mit dem <form>-Element erstellt, welches verschiedene Attribute wie action und method enthält. Das action-Attribut definiert, wohin die Daten des Formulars gesendet werden sollen, während method die Art der Übermittlung (zum Beispiel GET oder POST) vorgibt. Innerhalb eines Formulars dürfen Eingabeelemente wie <input>, <textarea>, <button>, <select>, und deren dazugehörige <option>s nicht fehlen. Um Gruppen von Elementen zu strukturieren, wird das <fieldset>-Element verwendet, das mit <legend> eine Überschrift für die jeweilige Gruppe definiert.
| Element | Zweck |
|---|---|
<form> |
Definiert ein HTML-Formular zur Dateneingabe. |
action |
Spezifiziert, wohin Formulardaten gesendet werden sollen. |
method |
Gibt an, wie Daten übermittelt werden (GET, POST). |
<fieldset> |
Gruppiert verwandte Elemente innerhalb eines Formulars. |
<legend> |
Definiert eine Überschrift für eine <fieldset>-Gruppe. |
Für die Eingabe von Text steht das <input>-Element in verschiedenen Typen zur Verfügung, wie text, password, oder email, die unterschiedliche Arten von Texteingaben ermöglichen. Die Verwendung des <label>-Elements ist wichtig, weil es die Zuordnung von Beschreibungen zu den jeweiligen Eingabefeldern erleichtert und für Barrierefreiheit sorgt. <textarea> ist für größere Textmengen vorgesehen und kann mit Attributen wie cols und rows in der Größe angepasst werden. Für Entscheidungen stehen Elemente wie <button>, <select> mit <option> für Dropdown-Menüs oder Eingaben wie radio und checkbox unter dem <input>-Element zur Verfügung.
| Element | Typ | Zweck |
|---|---|---|
<input> |
text |
Ermöglicht die Eingabe eines einzelnen Textzeile. |
<input> |
password |
Erlaubt die verdeckte Eingabe eines Passwortes. |
<input> |
email |
Spezialisiert auf die Eingabe einer E-Mail-Adresse. |
<label> |
– | Bietet eine textuelle Beschreibung für ein Eingabeelement. |
<textarea> |
– | Dient der Eingabe von mehrzeiligem Text. |
<select> |
– | Erstellt ein Dropdown-Menü. |
<option> |
– | Definiert Auswahlmöglichkeiten innerhalb eines <select>. |
<button> |
– | Definiert einen klickbaren Button. |
Bei der erweiterten Layout-Gestaltung liegt der Fokus auf der präzisen Strukturierung der Inhalte sowie der Anpassung visueller Stilmerkmale wie Farben, Breite und Höhe durch CSS. Webentwickler nutzen HTML-Tags und CSS, um ein anspruchsvolles und responsives Layout zu erstellen, das die Websitenutzer anspricht.
Elemente wie div und span sind essentiell für die Strukturierung von Inhalten innerhalb einer Webseite. div ist ein Blockelement und eignet sich hervorragend, um größere Inhaltsblöcke zu gruppieren. span hingegen ist ein Inline-Element und wird verwendet, um kleinere Teile des Inhalts zu gruppieren oder um einzelne Textteile zu formatieren.
CSS-Stile spielen eine entscheidende Rolle bei der Definition von Farben, Breite, Höhe und dem gesamten Layout. Über das style Attribut können Stile direkt in HTML-Elemente eingebunden werden, während externe CSS-Dateien ein umfassendes Styling über Klassen und IDs ermöglichen.
In diesem Abschnitt werden zwei spezifische Aspekte von HTML, die für Entwickler wichtig sind, genauer betrachtet: die Verwendung von Entity-Referenzen und die neuen Besonderheiten von HTML5.
Entity-Referenzen sind essenziell für das Einbinden spezieller Zeichen in HTML, die ansonsten von der Sprache selbst verwendet werden. Zum Beispiel muss das Zeichen < als < dargestellt werden, um eine Verwechslung mit einem HTML-Tag zu vermeiden. Hier sind einige häufig verwendete Entity-Referenzen:
& - &> - >" - "' - 'HTML5 hat eine Reihe von Änderungen und Verbesserungen gegenüber seinen Vorgängern eingeführt, die Entwickler kennen sollten. Zum Beispiel unterstützt HTML5 neue semantische Elemente wie <article>, <section>, <nav> und <header>, die eine klarere Strukturierung von Webseiten ermöglichen. Ebenso sind neue Formulartypen wie email, date und time hinzugekommen, um die Datenvalidierung auf Clientseite zu vereinfachen. Interaktive Elemente wie <video> und <audio> erlauben eine native Einbettung von Multimedia-Inhalten ohne externe Plugins.
Vereinbaren Sie einen kostenlosen Beratungstermin.
Wir sind eine Full-Service-Agentur für maßgeschneiderte Webprojekte mit WordPress und entwickeln individuelle Lösungen, die präzise auf die unterschiedlichsten Anforderungen abgestimmt sind.
