Was ist HTML?
HTML (HyperText Markup Language) ist die Sprache des Webs und die Grundlage aller Websites, die du besuchst. Es handelt sich um eine Auszeichnungssprache, die Struktur und Formatierung von Webinhalten definiert.
Was HTML tut
HTML ist kein Programmiersprache, sondern eher ein Regelwerk, das bestimmt, wie dein Browser den Inhalt anzeigt. Es gibt deinem Browser Anweisungen, wie Text, Bilder, Videos und andere Elemente auf einer Webseite dargestellt werden sollen.
Struktur eines HTML-Dokuments
Ein HTML-Dokument beginnt mit dem <html>-Tag und endet mit dem </html>-Tag. Innerhalb dieses Tags befinden sich zwei Hauptabschnitte: <head> und <body>:
- : Enthält Metadaten über die Webseite, wie z. B. den Titel, die Beschreibung und die Verknüpfung zu externen Dateien wie Stylesheets.
- : Hier befindet sich der sichtbare Inhalt der Webseite, einschließlich Text, Bildern und anderen Elementen.
HTML-Elemente und Tags
HTML-Elemente sind die Bausteine von Webseiten. Sie werden durch Tags definiert, die dem Browser mitteilen, wie der Inhalt angezeigt werden soll. Beispielsweise wird der Text in einer Überschrift durch den <h1>-Tag gekennzeichnet.
Vorteile der Verwendung von HTML
- Einfach zu erlernen
- Weit verbreitet und von allen großen Browsern unterstützt
- Grundlage für alle Websites
*Ermöglicht dir die Erstellung ansprechender und interaktiver Webseiten
Aufbau eines HTML-Dokuments
Der Aufbau eines HTML-Dokuments folgt einem standardisierten Framework, das die Anzeige deiner Website im Browser ermöglicht.
Deklaration und Dokumenttyp
Jedes HTML-Dokument beginnt mit einer Deklaration, die die verwendete HTML-Version angibt:
<!DOCTYPE html>
Dies informiert den Browser über die Regeln, die für die Interpretation des Dokuments gelten.
HTML-Element
Das Hauptelement eines HTML-Dokuments ist das <html>-Element, das den gesamten Inhalt umschließt. Innerhalb dieses Elements befinden sich andere Elemente, die verschiedene Teile der Website definieren.
Kopfbereich
Der <head>-Abschnitt enthält Metadaten über das Dokument, die nicht auf der Website angezeigt werden. Dazu gehören:
-
<title>-Element: Definiert den Titel der Website -
<meta>-Elemente: Stellen Informationen über die Website bereit (z. B. Autor, Beschreibung)
Hauptteil
Der <body>-Abschnitt enthält den eigentlichen Inhalt der Website, den du siehst, wenn du sie öffnest. Hier platzierst du Text, Bilder, Links und andere Elemente.
Dokumentstruktur
Die verschiedenen Elemente in deinem HTML-Dokument werden in einer hierarchischen Struktur organisiert, wobei jedes Element in andere Elemente verschachtelt ist. Dies ermöglicht dir, die Inhalte deiner Website zu strukturieren und zu organisieren.
Beispiel
Ein einfaches HTML-Dokument mit einem Titel und einer Überschrift sieht folgendermaßen aus:
<!DOCTYPE html>
<html>
<head>
<title>Meine Website</title>
</head>
<body>
<h1>Willkommen auf meiner Website!</h1>
</body>
</html>
HTML-Elemente und Tags
HTML-Elemente sind die Bausteine deines HTML-Dokuments. Sie definieren den Inhalt und die Struktur deiner Webseite. Jedes Element wird durch ein Tag definiert, das mit spitzen Klammern < und > umgeben ist.
Tag-Syntax
Tags bestehen aus zwei Teilen:
-
Öffnendes Tag: Definiert den Beginn eines Elements, z. B.
<p>. -
Schließendes Tag: Definiert das Ende eines Elements, z. B.
</p>.
Zwischen den öffnenden und schließenden Tags steht der Inhalt des Elements.
Arten von Elementen
Es gibt zwei Arten von Elementen:
-
Container-Elemente: Enthalten anderen Inhalt, wie z. B.
<div>oder<section>. -
Inline-Elemente: Sind in andere Elemente eingebettet, wie z. B.
<span>oder<a>.
Allgemeine Elemente
Hier sind einige der am häufigsten verwendeten HTML-Elemente:
-
<p>: Definiert einen Absatz. -
<h1>bis<h6>: Definieren Überschriften mit unterschiedlicher Größe. -
<span>: Spannt Text für Styling oder andere Zwecke. -
<a>: Definiert einen Link. -
<img>: Definiert ein Bild.
Attribute
Elemente können Attribute haben, die zusätzliche Informationen zum Element bereitstellen. Attribute werden innerhalb des öffnenden Tags definiert, z. B.:
<p id="intro">
Hier ist das Attribut "id" mit dem Wert "intro". Attribute können verwendet werden, um Elemente zu identifizieren, CSS-Styles anzuwenden oder Verhalten zu steuern.
Elemente verschachteln
Elemente können verschachtelt werden, d. h. ineinander eingebettet werden. Dies ermöglicht die Erstellung komplexer Layouts. Beispielsweise kann ein <div>-Element mehrere <p>-Elemente enthalten.
Fazit
HTML-Elemente und Tags sind die Grundlage für jede Webseite. Durch das Verstehen der verschiedenen Typen von Elementen und der Verwendung von Attributen kannst du beginnen, die Struktur und den Inhalt deiner Webseiten zu definieren.
Formatierung von Text und Überschriften
Text formatieren
Du kannst mithilfe von HTML-Tags den Text in deinen Dokumenten formatieren. Hier sind einige gebräuchliche Tags:
-
<b>und</b>: Fettdruck -
<i>und</i>: Kursivdruck -
<sup>und</sup>: Hochgestellt -
<sub>und</sub>: Tiefgestellt -
<pre>: Formatierten Text anzeigen -
<mark>: Text markieren
Überschriften erstellen
Überschriften sind wichtig, um deinen Inhalt zu strukturieren und für Lesbarkeit zu sorgen. HTML bietet sechs Überschriftsebenen, von <h1> bis <h6>. Je niedriger die Zahl, desto größer und wichtiger die Überschrift.
<h1>Hauptüberschrift</h1>
<h2>Unterüberschrift</h2>
<h6>Fein abgestufte Überschrift</h6>
Text mit Überschriften verknüpfen
Du kannst Text mit Überschriften verknüpfen, indem du id-Attribute zu Überschriften und href-Attribute zu Links verwendest.
<h2 id="mein-abschnitt">Mein Abschnitt</h2>
<p><a href="#mein-abschnitt">Gehe zu meinem Abschnitt</a></p>
Tipps für die Formatierung
- Verwende Formatierung sparsam, um die Leserlichkeit zu verbessern.
- Kombiniere verschiedene Formatierungsoptionen, um Effekte zu erzielen.
- Verwende semantische Tags wie
<strong>und<em>anstelle von Präsentations-Tags wie<b>und<i>. - Berücksichtige die Barrierefreiheit, sodass auch Nutzer mit eingeschränkter Sehfähigkeit deine Inhalte lesen können.
Listen und Tabellen erstellen
Listen und Tabellen sind zwei wichtige Elemente, mit denen du Inhalte in deinem HTML-Dokument strukturieren und organisieren kannst.
Listen
Eine Liste ist eine geordnete oder ungeordnete Folge von Elementen.
-
Ungeordnete Listen (
<ul>): Du erstellst eine ungeordnete Liste mit dem<ul>-Tag. Die einzelnen Elemente werden dann mit dem<li>-Tag definiert. -
Geordnete Listen (
<ol>): Eine geordnete Liste erstellst du mit dem<ol>-Tag. Die Elemente werden mit dem<li>-Tag definiert und automatisch nummeriert.
Tabellen
Eine Tabelle ist eine Sammlung von Daten, die in Zeilen und Spalten organisiert sind.
-
Tabellen erstellen (
<table>): Du erstellst eine Tabelle mit dem<table>-Tag. Jede Zeile wird mit dem<tr>-Tag definiert und jede Spalte mit dem<td>-Tag.
Formatierungsoptionen
Sowohl Listen als auch Tabellen bieten verschiedene Formatierungsoptionen:
-
Textformatierung: Du kannst den Text in Listenelementen oder Tabellenzellen mit HTML-Tags formatieren, wie z. B. , und
. - Ausrichtung: Du kannst die Ausrichtung der Elemente in einer Liste oder Tabelle mit Attributen wie "align" festlegen.
- Rahmen und Zellenabstand: Du kannst mit Attributen wie "border" und "cellspacing" Rahmen und den Abstand zwischen Zellen in einer Tabelle festlegen.
Tipps für die Verwendung von Listen und Tabellen
- Verwende Listen, um verwandte Elemente wie Aufzählungen oder Schritte einer Aufgabe aufzulisten.
- Verwende Tabellen, um Daten in einem strukturierten Format zu organisieren, z. B. Produktinformationen oder Veranstaltungszeiten.
- Mache deine Listen und Tabellen für barrierefreien Zugriff zugänglich, z. B. durch Bereitstellung von Alternativtext für Bilder.
- Verwende CSS, um den Stil von Listen und Tabellen anzupassen und deren Aussehen zu verbessern.
Ressourcen zum Weiterlernen
Links und Bilder einfügen
Hyperlinks erstellen
Mit HTML-Hyperlinks kannst du anklickbare Links zu anderen Websites oder Seiten erstellen. So geht’s:
<a href="URL">Anzuzeigender Text</a>
Ersetze "URL" durch die Adresse der Zielseite und "Anzuzeigender Text" durch den Text, der im Link angezeigt werden soll.
Bilder einfügen
Verwende das <img>-Tag, um Bilder in dein HTML-Dokument einzufügen. Das Tag hat zwei wichtige Attribute:
- src: Gibt den Pfad oder die URL des Bildes an
- alt: Gibt einen alternativen Text an, der angezeigt wird, wenn das Bild nicht geladen werden kann
<img src="bild.jpg" alt="Beschreibung des Bildes">
Bildabmessungen angeben
Du kannst die Breite und Höhe eines Bildes mit den Attributen width und height angeben, um sicherzustellen, dass es korrekt auf der Seite angezeigt wird.
<img src="bild.jpg" alt="Beschreibung des Bildes" width="200px" height="100px">
Bilder zentrieren
Um ein Bild in der Mitte der Seite zu zentrieren, verwende das CSS-text-align-Attribut zusammen mit dem <div>-Container.
<div style="text-align: center;">
<img src="bild.jpg" alt="Beschreibung des Bildes">
</div>
Häufige Fehler beim Einfügen von Links und Bildern
Achte darauf, dass:
- Die URL korrekt ist
- Der angezeigte Text für den Link relevant ist
- Der alternative Text für Bilder eine genaue Beschreibung des Bildes liefert
- Die Abmessungen des Bildes korrekt sind
HTML-Strukturen für Layouts
HTML bietet verschiedene Strukturen, mit denen du das Layout deiner Webseite definieren kannst. Diese Strukturen helfen dir, den Inhalt deiner Seite zu organisieren und ein visuell ansprechendes Erlebnis für Benutzer zu schaffen.
Container-Elemente
Container-Elemente bilden den Grundrahmen für dein Layout. Sie ermöglichen es dir, verschiedene Bereiche der Seite zu definieren, z. B. Header, Hauptbereich und Footer. Zu den gängigsten Container-Elementen gehören:
-
<header>: Definiert den Header-Bereich der Seite. -
<main>: Definiert den Hauptinhaltsbereich der Seite. -
<footer>: Definiert den Footer-Bereich der Seite. -
<section>: Definiert einen Abschnitt innerhalb des Hauptinhaltsbereichs. -
<div>: Ein allgemeines Container-Element, das zur Gruppierung von Elementen verwendet werden kann.
Block-Elemente
Block-Elemente sind Elemente, die den gesamten verfügbaren horizontalen Platz einnehmen. Sie beginnen in einer neuen Zeile und können andere Elemente enthalten. Zu den gängigsten Block-Elementen gehören:
-
<p>: Definiert einen Absatztext. -
<h1>–<h6>: Definieren Überschriften verschiedener Ebenen. -
<ul>und<ol>: Definieren ungeordnete und geordnete Listen. -
<form>: Definiert ein Formular.
Inline-Elemente
Inline-Elemente belegen nur so viel Platz wie nötig und umschließen keinen Text. Sie können innerhalb von Block-Elementen platziert werden. Zu den gängigsten Inline-Elementen gehören:
-
<a>: Definiert einen Link. -
<strong>und<em>: Hervorheben Text als fett oder kursiv. -
<span>: Wird verwendet, um Inline-Elemente zu formatieren, ohne sie semantisch zu markieren.
Kombinationen verwenden
Durch die Kombination von Container-, Block- und Inline-Elementen kannst du komplexe Layouts erstellen. Beispielsweise kannst du einen Header-Bereich mit einem Logo, einem Navigationsmenü und einem Anmeldeformular definieren. Der Hauptinhaltsbereich könnte mehrere Abschnitte sowie Spalten für Text und Bilder enthalten.
Tipps für Layout-Strukturen
- Verwende semantische Elemente, um den Inhalt deiner Seite korrekt zu markieren.
- Teile deinen Inhalt in logische Abschnitte auf.
- Berücksichtige die Zugänglichkeit und stelle sicher, dass deine Layouts für alle Benutzer zugänglich sind.
- Experimentiere mit verschiedenen Layouttechniken, um das optimale Design für deine Seite zu finden.
Tipps für Anfänger zur Optimierung von HTML-Code
Während du HTML erlernst, ist es wichtig, dir schon früh gute Gewohnheiten anzueignen, die dir helfen, sauberen und effizienten Code zu schreiben. Hier sind einige Tipps, die dir dabei helfen:
Semantischer Code
- Verwende semantische HTML-Elemente, um den Inhalt deines Dokuments korrekt zu beschreiben. Dies erleichtert es Browsern und Bildschirmleseprogrammen, den Inhalt zu interpretieren.
- Vermeide die Verwendung von präsentierenden Elementen (wie
<font>und<center>) und verwende stattdessen CSS für die Formatierung.
Modulare Struktur
- Teile dein Dokument in kleinere, wiederverwendbare Module auf. Dies macht es einfacher, deinen Code zu pflegen und zu aktualisieren.
- Verwende
<section>-,<article>– und<header>-Elemente, um Inhalte logisch zu gruppieren.
Verschachtelung minimieren
- Halte die Verschachtelung von Tags auf ein Minimum. Dies verbessert die Lesbarkeit und Wartbarkeit deines Codes.
- Vermeide es, mehrere Inline-Elemente innerhalb eines Block-Elements zu verschachteln.
Konsistenz und Standardisierung
- Halte dich an HTML-Standards und Best Practices. Dies stellt sicher, dass dein Code in verschiedenen Browsern und Geräten konsistent dargestellt wird.
- Verwende ein HTML-Validierungs-Tool, um sicherzustellen, dass dein Code den Standards entspricht.
Automatisierung nutzen
- Erwäge die Verwendung eines Code-Editors oder -IDE mit HTML-Autovervollständigung und Validierungsfunktionen.
- Verwende Tools wie HTML-Minifizierer, um die Größe deines HTML-Codes zu reduzieren.
Performance-Berücksichtigung
- Entferne unnötige oder doppelte Elemente.
- Komprimiere deinen HTML-Code, um die Ladezeiten zu verkürzen.
- Vermeide die Verwendung großer Bilder oder Videos, die die Ladezeit verlangsamen können.
Barrierefreiheit
- Stelle sicher, dass dein HTML-Code für Benutzer mit Behinderungen zugänglich ist.
- Verwende ordnungsgemäße Titel und Alternativtexte für Bilder.
- Vermeide es, Farbkontraste zu verwenden, die für Benutzer mit Sehschwäche schwer zu unterscheiden sind.
Häufige Fehler und wie man sie vermeidet
Wenn du mit HTML anfängst, ist es üblich, einige gängige Fehler zu machen. Hier sind ein paar häufige Fallstricke und wie du sie vermeiden kannst:
Vergessen von abschließenden Tags
Jedes HTML-Element muss mit einem öffnenden und schließenden Tag versehen sein. Wenn du z. B. einen Absatz erstellen möchtest, musst du sowohl <p> als auch </p> verwenden. Vergiss nicht, deine Tags richtig zu verschachteln, da sonst deine Seite möglicherweise nicht ordnungsgemäß angezeigt wird.
Falsche Groß-/Kleinschreibung
HTML-Tags sind case-sensitive. Dies bedeutet, dass <P> nicht dasselbe ist wie <p>. Verwende immer die richtige Groß-/Kleinschreibung, um Fehler zu vermeiden.
Fehlen von Attributen
Manche HTML-Elemente erfordern bestimmte Attribute, damit sie ordnungsgemäß funktionieren. Beispielsweise benötigt das <img>-Element ein src-Attribut, das den Pfad zum Bild angibt. Stelle sicher, dass du alle erforderlichen Attribute angibst, damit deine Seite wie erwartet angezeigt wird.
Verwendung veralteter oder nicht unterstützter Tags
HTML entwickelt sich ständig weiter und einige Tags werden im Laufe der Zeit veraltet oder nicht mehr unterstützt. Vermeide die Verwendung veralteter Tags, da sie zu Anzeigeproblemen in neueren Browsern führen können.
Übermäßige Verschachtelung
Die Verschachtelung von HTML-Elementen kann deinen Code schwer lesbar und wartbar machen. Versuche, deine Verschachtelung auf ein Minimum zu beschränken und stattdessen Klassen oder IDs zu verwenden, um Elemente zu formatieren.
Ungültige Zeichen im Code
HTML-Code darf keine ungültigen Zeichen enthalten, wie z. B. Anführungszeichen oder Sonderzeichen. Verwende immer escaped character Entities, um diese Zeichen in deinem Code darzustellen.
Fehlende oder ungültige Zeichenkodierung
Die Zeichenkodierung gibt an, welcher Zeichensatz in deinem HTML-Dokument verwendet wird. Wenn die Zeichenkodierung fehlt oder ungültig ist, kann dies zu Anzeigeproblemen in Browsern führen. Stelle sicher, dass du die richtige Zeichenkodierung für dein Dokument angibst, z. B. UTF-8.
Fehlende Alt-Attribute für Bilder
Alt-Attribute sind wichtig, um Bilder für Benutzer mit Behinderungen zugänglich zu machen. Sie beschreiben den Inhalt eines Bildes, wenn es nicht geladen werden kann. Stelle sicher, dass du für jedes Bild ein aussagekräftiges Alt-Attribut angibst.
Ressourcen zum Weiterlernen von HTML
Um dein HTML-Wissen zu erweitern, stehen dir zahlreiche Ressourcen zur Verfügung. Hier sind einige hilfreiche Quellen:
Online-Kurse
- Coursera: Bietet verschiedene HTML-Kurse für Anfänger und Fortgeschrittene an.
- Udemy: Bietet eine Vielzahl von HTML-Kursen, die von erfahrenen Webentwicklern unterrichtet werden.
- Pluralsight: Bietet umfangreiche Lernpfade und Kurse, die dich durch die HTML-Grundlagen führen.
Online-Tutorials
- W3Schools: Kostenlose und umfassende Online-Tutorials zu HTML und anderen Webtechnologien.
- MDN Web Docs: Die offizielle Dokumentation von Mozilla, die detaillierte HTML-Spezifikationen und Anleitungen enthält.
- Codecademy: Interaktive Übungen und Projekte, die dir dabei helfen, HTML-Konzepte praktisch zu erlernen.
Bücher
- "HTML & CSS: Das umfassende Handbuch" von Jon Duckett
- "HTML und CSS für Anfänger" von Robin Nixon
- "HTML5 und CSS3 für Einsteiger" von Elisabeth Robson
Online-Communities und Foren
- Stack Overflow: Eine große Community von Entwicklern, die Fragen zu HTML und anderen technischen Themen beantworten.
- HTML Forum: Ein dediziertes Forum für HTML, in dem du diskutieren und Fragen stellen kannst.
- W3C Forum: Das offizielle Forum des World Wide Web Consortium, in dem du dich über die neuesten HTML-Standards informieren kannst.
HTML-Editoren
- Visual Studio Code: Ein beliebter Code-Editor mit integrierter HTML-Unterstützung.
- Sublime Text: Ein leistungsstarker Texteditor mit erweiterter Syntaxhervorhebung für HTML.
- Atom: Ein quelloffener und anpassbarer Code-Editor, der für die Webentwicklung optimiert ist.
Indem du diese Ressourcen nutzt, kannst du dein HTML-Wissen erweitern, deine Fähigkeiten verbessern und komplexe Websites erstellen.