HTML - Layout-Elemente: Aufbau der Struktur Ihrer Webseite
Hallo da draußen, angehende Web-Entwickler! Heute tauchen wir in die aufregende Welt der HTML-Layout-Elemente ein. Am Ende dieses Tutorials werden Sie Webseiten wie ein Profi strukturieren können, indem Sie beautiful und organisierte Layouts erstellen, die Ihre Inhalte erstrahlen lassen. Also, rollen wir die Ärmel hoch und fangen an!
Visuelle Darstellung einer Layoutstruktur
Bevor wir uns dem Code widmen, nehmen wir uns einen Moment Zeit, um uns vorzustellen, was wir anstreben. Stellen Sie sich Ihre Webseite wie eine Zeitung vor. Genau wie eine Zeitung verschiedene Abschnitte hat - Überschriften, Artikel, Seitenleisten und Fußzeilen - kann auch Ihre Webseite in ähnliche Abschnitte unterteilt werden. Diese Abschnitte helfen dabei, Ihre Inhalte zu organisieren und den Besuchern die Navigation auf Ihrer Webseite zu erleichtern.
Hier ist eine einfache visuelle Darstellung einer häufigen Webseiten-Layoutstruktur:
+------------------+
| Header |
+------------------+
| Nav |
+------------------+
| | |
| | Section |
|A | |
|s +-------------+|
|i | Article ||
|d | ||
|e +-------------+|
| | |
+------------------+
| Footer |
+------------------+Nun, da wir eine visuelle Vorstellung haben, lassen Sie uns jeden dieser Elemente im Detail erkunden.
Header-Element des HTML-Layouts
Das <header>-Element ist wie die Kopfzeile einer Zeitung. Es enthält typischerweise einführende Inhalte für die Seite, wie ein Logo, den Seitentitel oder ein Navigationsmenü.
Hier ist ein Beispiel:
<header>
<h1>Willkommen auf meiner großartigen Webseite</h1>
<img src="logo.png" alt="Mein Logo">
</header>In diesem Beispiel haben wir eine Hauptüberschrift und ein Logo-Bild in unsere Kopfzeile aufgenommen. Dies erscheint oben auf unserer Webseite und gibt den Besuchern einen sofortigen Eindruck davon, worum es auf der Seite geht.
Nav-Element des HTML-Layouts
Das <nav>-Element ist die Landkarte Ihrer Webseite. Es enthält die Hauptnavigationlinks für Ihre Seite.
Fügen wir ein Navigationsmenü zu unserer Seite hinzu:
<nav>
<ul>
<li><a href="#home">Startseite</a></li>
<li><a href="#about">Über uns</a></li>
<li><a href="#services">Dienste</a></li>
<li><a href="#contact">Kontakt</a></li>
</ul>
</nav>Dieser Code erstellt eine einfache Liste von Links, die die Besucher zur Navigation auf Ihrer Webseite verwenden können. Es ist wie das Inhaltsverzeichnis in einem Buch, das den Nutzern hilft, genau das zu finden, wonach sie suchen.
Section-Element des HTML-Layouts
Das <section>-Element ist ein vielseitiger Behälter für thematische Inhalte. Stellen Sie es sich wie ein Kapitel in einem Buch vor, das verwandte Inhalte gruppiert.
Hier ist ein Beispiel:
<section id="about">
<h2>Über uns</h2>
<p>Wir sind ein passioniertes Team von Web-Entwicklern, das sich der Erstellung großartiger Webseiten widmet.</p>
</section>Dieser Abschnitt bietet Informationen über das Unternehmen oder die Person hinter der Webseite. Sie können mehrere Abschnitte auf einer Seite haben, jeder mit einem anderen Thema oder einer anderen Thematik.
Article-Element des HTML-Layouts
Das <article>-Element ist perfekt für selbstständige Inhalte, die allein stehen könnten, wie eine Nachrichtenstory oder ein Blogbeitrag.
Fügen wir einen Artikel zu unserer Seite hinzu:
<article>
<h2>Die Bedeutung von semantischen HTML-Elementen</h2>
<p>Die Verwendung semantischer HTML-Elemente wie article, section und nav hilft Suchmaschinen, Ihre Inhalte besser zu verstehen, was die SEO Ihrer Webseite verbessert.</p>
<p>Es macht Ihren Code auch lesbarer und wartbarer.</p>
</article>Dieser Artikel könnte Teil eines Blogs oder einer Nachrichtenrubrik auf Ihrer Webseite sein. Er hat seine eigene Überschrift und Absätze, die eine vollständige, unabhängige inhaltliche Einheit bilden.
Aside-Element im HTML-Layout
Das <aside>-Element ist für Inhalte gedacht, die tangential zum Hauptinhalt gehören. Es ist wie eine Seitenleiste in einem Magazin, die zusätzliche Informationen oder Links bietet.
Hier ist ein Beispiel:
<aside>
<h3>Quick Facts</h3>
<ul>
<li>HTML steht für HyperText Markup Language</li>
<li>HTML5 ist die neueste Version</li>
<li>Es arbeitet Hand in Hand mit CSS für das Styling</li>
</ul>
</aside>Dieser Aside bietet einige schnelle Fakten zu HTML, die den Hauptinhalt der Seite ergänzen, ohne ein Kernbestandteil davon zu sein.
Footer-Element des HTML-Layouts
Das <footer>-Element enthält typischerweise Informationen über den Autor, Copyright-Hinweise oder Links zu verwandten Dokumenten. Es ist wie der kleine Druck am Ende eines Dokuments.
Fügen wir eine Fußzeile zu unserer Seite hinzu:
<footer>
<p>© 2023 Meine großartige Webseite. Alle Rechte vorbehalten.</p>
<nav>
<a href="#privacy">Datenschutzerklärung</a> |
<a href="#terms">Nutzungsbedingungen</a>
</nav>
</footer>Diese Fußzeile enthält eine Copyright-Angabe und einige zusätzliche Navigationslinks. Es ist ein großartiger Ort, um Informationen bereitzustellen, die von jeder Seite Ihrer Webseite aus zugänglich sein sollen.
Erstellen von HTML-Layouts - Verwendung von Layout-Elementen
Nun, da wir jedes Element einzeln untersucht haben, lassen Sie uns alles zusammenfügen, um ein vollständiges HTML-Layout zu erstellen:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Meine großartige Webseite</title>
</head>
<body>
<header>
<h1>Willkommen auf meiner großartigen Webseite</h1>
<img src="logo.png" alt="Mein Logo">
</header>
<nav>
<ul>
<li><a href="#home">Startseite</a></li>
<li><a href="#about">Über uns</a></li>
<li><a href="#services">Dienste</a></li>
<li><a href="#contact">Kontakt</a></li>
</ul>
</nav>
<main>
<section id="about">
<h2>Über uns</h2>
<p>Wir sind ein passioniertes Team von Web-Entwicklern, das sich der Erstellung großartiger Webseiten widmet.</p>
</section>
<article>
<h2>Die Bedeutung von semantischen HTML-Elementen</h2>
<p>Die Verwendung semantischer HTML-Elemente wie article, section und nav hilft Suchmaschinen, Ihre Inhalte besser zu verstehen, was die SEO Ihrer Webseite verbessert.</p>
<p>Es macht Ihren Code auch lesbarer und wartbarer.</p>
</article>
<aside>
<h3>Schnelle Fakten</h3>
<ul>
<li>HTML steht für HyperText Markup Language</li>
<li>HTML5 ist die neueste Version</li>
<li>Es arbeitet Hand in Hand mit CSS für das Styling</li>
</ul>
</aside>
</main>
<footer>
<p>© 2023 Meine großartige Webseite. Alle Rechte vorbehalten.</p>
<nav>
<a href="#privacy">Datenschutzerklärung</a> |
<a href="#terms">Nutzungsbedingungen</a>
</nav>
</footer>
</body>
</html>Und dort haben Sie es! Ein vollständiges HTML-Layout mit semantischen Elementen. Diese Struktur bietet eine solide Grundlage für Ihre Webseite, die sowohl für Nutzer als auch für Suchmaschinen leicht zu stylen und zu navigieren ist.
Erinnern Sie sich daran, Übung macht den Meister. Versuchen Sie, verschiedene Layouts zu erstellen, experimentieren Sie mit der Platzierung von Elementen, und bald werden Sie beautiful, gut strukturierte Webseiten mit Leichtigkeit gestalten können.
Happy Coding, zukünftige Web-Zauberer!
| Element | Zweck | Beispiel |
|---|---|---|
<header> |
Enthält einführende Inhalte oder Navigation für seinen nächsten Abschnittsinhalt oder Abschnittswurzelelement | <header><h1>Seitentitel</h1></header> |
<nav> |
Enthält die Hauptnavigationfunktion der Seite | <nav><ul><li><a href="#home">Startseite</a></li></ul></nav> |
<main> |
Enthält den zentralen Inhalt, der einzigartig für diese Seite ist | <main><article>Seiteninhalt</article></main> |
<section> |
Vertreibt einen unabhängigen Abschnitt von Inhalt | <section><h2>Über uns</h2><p>Unternehmensinformationen</p></section> |
<article> |
Vertreibt eine selbstständige Komposition in einem Dokument | <article><h2>Blog-Beitragstitel</h2><p>Beitragsinhalt</p></article> |
<aside> |
Vertreibt Inhalte, die tangential zum umgebenden Inhalt gehören | <aside><h3>Verwandte Links</h3><ul><li><a href="#">Link</a></li></ul></aside> |
<footer> |
Enthält Informationen über den Autor, Copyright oder Links zu verwandten Dokumenten | <footer><p>© 2023 Meine Seite</p></footer> |
Credits: Image by storyset