zurück zur Glossar-Übersicht
Webdesign Glossar: HTML Grundbegriffe
Veröffentlicht von: Alexander Gildernstern
Kurz und knapp: Was ist HTML?
HTML steht für Hypertext Markup Language und bildet das Grundgerüst jeder Website. Einfach gesagt ist HTML die Sprache, mit der Inhalte im Web strukturiert werden. Hier fassen wir die wichtigsten HTML-Grundbegriffe kurz zusammen – vom Aufbau einer HTML-Seite bis zur Einbindung von Links und Bildern.
Inhaltsverzeichnis
Wie ist der grundsätzliche Aufbau einer HTML-Seite?
Eine HTML-Datei folgt einer festen Grundstruktur. Zuerst steht die Dokumenttyp-Deklaration (z. B. <!DOCTYPE html> für HTML5). Danach folgt das <html>-Element als Wurzel, das alle weiteren Inhalte umschließt. Innerhalb von <html> gibt es zwei wichtige Bereiche: den <head>– und den <body>-Bereich. Im <head> werden Metadaten und Seiteneinstellungen definiert – etwa der Zeichensatz und der Seitentitel mittels <title>. Dieser Kopfbereich ist für den Nutzer unsichtbar. Im <body> steht der sichtbare Inhalt der Webseite, also Texte, Überschriften, Bilder oder Links. Diese Grundstruktur ist essenziell, damit Browser den Seiteninhalt korrekt interpretieren und darstellen können.
Das Grundgerüst jeder Webseite
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta id="viewport" name="viewport" content="width=device-width, initial-scale=1.0">
<title>Der Seitentitel</title>
</head>
<body>
<p>Ein simpler Paragraph mit beliebigem Text.</p>
</body>
</html>
Kostenloses
Webdesign Beratungsgespräch
Wir gestalten deine Webseite so, wie du sie dir schon lange wünschst.
100 % Transparenz
Alle Leistungen und Preise sind von Anfang an transparent für dich einsehbar.
Langfristig an deiner Seite
Auf Wunsch übernehmen wir die fortlaufende Betreuung deiner Website und reagieren schnell auf Änderungen oder technische Fehler.
Google Bewertungen
Basierend auf 5 Bewertungen
Welche grundlegenden HTML-Tags gibt es?
HTML nutzt sogenannte Tags („Markierungen“), um Inhalte zu strukturieren. Ein Tag steht in spitzen Klammern, z. B. <p> für einen Absatz. Viele Elemente besitzen einen öffnenden und einen schließenden Tag (etwa <p>...</p>), dazwischen steht der Inhalt. Es gibt viele HTML-Tags, doch einige Grundelemente sollte man kennen:
<h1>bis<h6>: Überschriften in absteigender Wichtigkeit (Titel bis Unterüberschriften).<p>: Absatz für normalen Fließtext.<strong>und<em>: Text hervorheben (fett bzw. kursiv).<ul>/<ol>mit<li>: Auflistungen (ungeordnete oder nummerierte Listen mit Listeneinträgen).
Mit diesen Basis-Tags lässt sich bereits eine einfache Webseite strukturieren.
Wie fügt man Links in HTML ein?
Hyperlinks verbinden Webseiten miteinander. In HTML wird ein Link mit dem <a>-Tag erstellt. Dieses Element erhält ein href-Attribut, das die Zieladresse angibt. Der Text oder Inhalt zwischen <a> und </a> wird im Browser als klickbarer Verweis angezeigt. So kann man z. B. schreiben: <a href="https://www.beispiel.de">Beispielseite</a>, damit der Linktext „Beispielseite“ auf die externe Adresse beispiel.de führt.
Links können auf externe Websites (durch vollständige URLs mit http:// oder https://) oder auf interne Seiten (relative Pfade) verweisen. Standardmäßig öffnet ein Klick den Link im gleichen Browser-Tab. Soll sich eine Verknüpfung in einem neuen Tab öffnen, kann man das Attribut target="_blank" einsetzen.
Wie fügt man Bilder in HTML ein?
Bilder machen Webseiten anschaulicher. Eingebunden werden Grafiken in HTML mit dem <img>-Tag. Dieses einzelne Tag enthält alle notwendigen Informationen als Attribute, da es kein schließendes Tag besitzt. Das wichtigste Attribut ist src (Source), das den Pfad oder die URL zur Bilddatei angibt. Zusätzlich sollte immer ein aussagekräftiges alt-Attribut gesetzt werden, das eine kurze Beschreibung des Bildes enthält. Falls ein Bild nicht geladen werden kann, wird dieser Alternativtext angezeigt, was auch für Barrierefreiheit (Screenreader) wichtig ist. Ein Beispiel: <img src="foto.jpg" alt="Beschreibung des Fotos">.
Bilder können sowohl aus dem eigenen Verzeichnis als auch über externe URLs eingebunden werden. Optional lassen sich Attribute wie width und height (Breite und Höhe in Pixel) vergeben, um die Anzeigegröße des Bildes festzulegen.
Fazit: HTML-Grundbegriffe für den erfolgreichen Einstieg
Die HTML-Grundbegriffe zu verstehen, ist der erste Schritt in die Webentwicklung. Schon mit diesem Basiswissen lassen sich einfache Webseiten erstellen und Inhalte strukturiert präsentieren. Diese Grundlagen bilden die Basis, um später CSS für das Design und JavaScript für Interaktivität einzusetzen. Mit Übung wird der Umgang mit HTML schnell zur zweiten Natur.