HTML5 und CSS3 für Einsteiger: Die Grundlagen des Webdesigns

HTML5: Die Struktur des Webs

HTML ist die Abkürzung für „Hypertext Markup Language“ und bildet das unverzichtbare Grundgerüst des World Wide Web. Es ist die Sprache, die Webentwickler verwenden, um die Struktur und den Inhalt von Webseiten zu definieren. Mit der Einführung von HTML5 hat sich das Webdesign grundlegend gewandelt und es sind viele aufregende Verbesserungen und Funktionen hinzugekommen, die die Art und Weise, wie wir Webinhalte erstellen, revolutioniert haben.

HTML5 geht über seine Vorgängerversionen hinaus, indem es eine breite Palette von neuen Elementen und Funktionen einführt, die das Erstellen von Webseiten effizienter und leistungsfähiger machen. Diese neuen Möglichkeiten reichen von Multimedia-Integration bis zur Verbesserung der semantischen Strukturierung von Inhalten.

Gehen wir nun genauer auf die Grundlagen von HTML5 ein und finden heraus, wie du diese Markup-Sprache nutzen kannst, um beeindruckende Webseiten zu erstellen.

Überschriften und Absätze

In HTML5 sind Überschriften und Absätze fundamentale Elemente, die dir helfen, deinen Text inhaltlich zu strukturieren und zu formatieren. Diese Elemente tragen zur Lesbarkeit deiner Webseite bei und sind entscheidend für Suchmaschinenoptimierung (SEO) und die Benutzererfahrung.

Überschriften (<h1>-<h6>)

Überschriften werden verwendet, um Textabschnitte in deinem Dokument hervorzuheben und ihre Hierarchie darzustellen. HTML5 bietet verschiedene Überschriften-Tags, die von <h1> (die höchste Hierarchie) bis <h6> (die niedrigste Hierarchie) reichen. Hier ein Beispiel dazu:

Überschriften sind nicht nur visuell hervorgehoben, sondern tragen auch dazu bei, den Inhalt für Suchmaschinen zu strukturieren. Suchmaschinen erkennen, dass <h1> eine wichtigere Überschrift ist als <h2> usw. Verwende Überschriften sorgfältig, um die Hierarchie deiner Informationen deutlich zu machen und die Lesbarkeit zu verbessern. Du solltest auch darauf achten, dass eine <h1> nur einmal pro Seite vorkommt. Das ist wichtig für die Suchmaschinenoptimierung und die Semantik der Seite. Auch um die Barrierefreiheit zu gewährleisten, sollte nur eine <h1> existieren. Sonst könnte es für Screenreader zu Navigations- und Verständnisproblemen kommen. <h2>- bis <h6>-Überschriften können übrigens beliebig oft verwendet werden. Achte nur darauf, dass du auch hier auf die Reihenfolge achtest.

Absätze (<p>)

Absätze ermöglichen es dir, Textabschnitte klar voneinander zu trennen und zu formatieren. Du kannst das <p>-Element verwenden, um Textpassagen zu erstellen:

Absätze fügen automatisch einen vertikalen Abstand zwischen den Textabschnitten hinzu, um die Lesbarkeit zu verbessern. Wenn du mehrere Absätze verwendest, wird der Text auf deiner Webseite übersichtlicher und benutzerfreundlicher.

Überschriften und Absätze sind grundlegende Elemente in HTML, die dazu beitragen, den Inhalt deiner Webseite zu organisieren und für deine Besucher sowie Suchmaschinen verständlicher zu gestalten. Wenn du sie richtig einsetzt, trägst du erheblich zur Qualität deiner Webseite bei.

Listenelemente

In HTML gibt es zwei Hauptarten von Listen: ungeordnete (bulleted) und geordnete (numbered) Listen. Beide Arten von Listen ermöglichen es dir, Informationen auf strukturierte und leicht verständliche Weise darzustellen. Lass uns genauer darauf eingehen:

Ungeordnete Listen (<ul>)

Ungeordnete Listen werden verwendet, um eine Sammlung von Elementen oder Punkten darzustellen, die keine spezifische Reihenfolge besitzen. Jeder Punkt in einer ungeordneten Liste wird normalerweise mit einem Aufzählungszeichen, wie einem kleinen Punkt oder einem Kreis, gekennzeichnet.

In diesem Beispiel wird eine <ul>-Liste erstellt, die drei Punkte enthält. Jeder Punkt wird mit <li> (List-Item) gekennzeichnet. Die Darstellung der Aufzählungszeichen (zum Beispiel Punkte oder Kreise) erfolgt automatisch durch den Browser.

Geordnete Listen (<ol>)

Geordnete Listen werden verwendet, wenn die Reihenfolge der Elemente oder Punkte wichtig ist. Anders als bei ungeordneten Listen wird in einer geordneten Liste jeder Punkt normalerweise mit einer aufsteigenden Nummer gekennzeichnet.

In diesem Beispiel wird eine <ol>-Liste erstellt, die ebenfalls drei Punkte enthält. Jeder Punkt wird erneut mit <li> gekennzeichnet. Die Nummerierung erfolgt automatisch und in aufsteigender Reihenfolge.

Verschachtelte Listen

Du kannst auch verschachtelte Listen erstellen, indem du eine Liste innerhalb einer anderen Liste platzierst. Das ist besonders nützlich, wenn du Unterpunkte oder Unterebenen in deiner Liste darstellen möchtest.

In diesem Beispiel ist eine ungeordnete Liste mit einem Unterpunkt unter dem zweiten Punkt verschachtelt.

Listen sind ein leistungsstarkes Mittel, um Informationen strukturiert darzustellen. Sie werden häufig für Navigationselemente, Schritt-für-Schritt-Anleitungen, Produktmerkmale und vieles mehr verwendet. Du kannst Listen auch mit CSS gestalten, um das Aussehen und die Anordnung deiner Listenpunkte weiter anzupassen.

Insgesamt bieten HTML-Listen eine effektive Möglichkeit, Inhalte auf deiner Webseite zu organisieren und zu präsentieren, indem sie eine klare und gut lesbare Struktur schaffen.