HTML - Seitenaufbau

HTML-Layoutelemente

HTML bietet Elemente, die bei der Erstellung einer strukturierten und semantischen Anordnung von Webseiten helfen. Zu diesen Elementen gehören:

• <div>-Element: Das <div>-Element ist ein Container, der Inhalte gruppieren und gestalten kann. Es wird als Baustein für Layouts verwendet, da es mit CSS gestaltet werden kann, um seine Größe, Position und Erscheinungsbild zu steuern.

• <header>-Element: Das <header>-Element stellt einleitende Inhalte dar, wie ein Logo, Navigationsmenü oder ein Banner. Es wird normalerweise am oberen Rand einer Webseite oder eines Abschnitts platziert.

• <nav>-Element: Das <nav>-Element enthält Navigationslinks zu anderen Seiten oder Abschnitten innerhalb derselben Seite. Es wird für die Hauptnavigation der Website verwendet, kann aber auch für Inhaltsverzeichnisse oder andere Arten der Navigation eingesetzt werden.

• <main>-Element: Das <main>-Element stellt den Hauptinhalt einer Webseite dar, ohne Kopf- und Fußzeilen oder Seitenleisten. Es sollte für jede Seite einzigartig sein und den primären Inhalt enthalten.

• <section>-Element: Das <section>-Element gruppiert zusammengehörige Inhalte. Es kann verwendet werden, um den Hauptinhalt in Abschnitte zu unterteilen, wie Kapitel, Themen oder Themenbereiche.

• <article>-Element: Das <article>-Element stellt eine in sich geschlossene Komposition dar, wie einen Blogbeitrag, einen Nachrichtenartikel oder eine Produktbewertung. Es sollte für sich allein Sinn ergeben und unabhängig verteilt werden können.

• <aside>-Element: Das <aside>-Element enthält Inhalte, die mit dem Hauptinhalt in Beziehung stehen, wie Seitenleisten, Zitate oder Werbeanzeigen. Es wird normalerweise neben dem Hauptinhalt platziert.

• <footer>-Element: Das <footer>-Element enthält Informationen, die typischerweise am unteren Rand einer Webseite oder eines Abschnitts erscheinen, wie Copyright-Hinweise, Kontaktinformationen oder Links zu verwandten Dokumenten.

Diese HTML-Layoutelemente bieten eine Möglichkeit, eine strukturierte und aussagekräftige Anordnung für Webseiten zu erstellen. Durch die angemessene Verwendung dieser Elemente können Sie die Zugänglichkeit, SEO und Wartbarkeit Ihrer Websites verbessern.

Layouts mit HTML erstellen

HTML-Layoutelemente bieten die Bausteine zur Strukturierung einer Webseite. Durch den strategischen Einsatz dieser Elemente können Sie Layouts erstellen, die gut organisiert, semantisch aussagekräftig und zugänglich sind.

Um eine Webseite zu strukturieren, beginnen Sie damit, die Hauptabschnitte Ihres Inhalts zu identifizieren. Verwenden Sie das <header>-Element für einleitende Inhalte wie ein Logo oder ein Navigationsmenü. Das <nav>-Element kann innerhalb des Headers verwendet werden, um Navigationslinks zu gruppieren. Das <main>-Element sollte den Hauptinhalt der Seite enthalten, während <section>-Elemente verwendet werden können, um verwandte Inhalte innerhalb des Hauptinhaltsbereichs zu gruppieren. Verwenden Sie <article>-Elemente für in sich geschlossene Kompositionen wie Blogbeiträge oder Produktrezensionen. Das <aside>-Element ist nützlich für Inhalte, die mit dem Hauptinhalt verwandt, aber nicht Teil davon sind, wie Seitenleisten oder hervorgehobene Zitate. Das <footer>-Element kann Informationen enthalten, die typischerweise am unteren Rand einer Webseite erscheinen, wie Urheberrechtshinweise oder Kontaktinformationen.

Für komplexere Designs können Sie Layoutelemente ineinander verschachteln.

<main>
   <section>
      <h1>Abschnitt 1</h1>
      <p>Inhalt für Abschnitt 1.</p>
   </section>
   <section>
      <h1>Abschnitt 2</h1>
      <p>Inhalt für Abschnitt 2.</p>
   </section>
</main>

Dies ermöglicht es Ihnen, hierarchische Beziehungen zwischen verschiedenen Teilen Ihres Inhalts zu erstellen.

Bei der Verwendung von HTML-Layoutelementen ist es wichtig, ihre semantische Bedeutung zu berücksichtigen. Semantische Elemente beschreiben die Bedeutung des Inhalts, den sie enthalten, und nicht nur seine Darstellung. Dies hilft Suchmaschinen, Screenreadern und anderen Tools, die Struktur und den Zweck Ihres Inhalts zu verstehen.

<article>
   <h1>Blogbeitrag-Titel</h1>
   <p>Dies ist ein Blogbeitrag.</p>
</article>

Die Verwendung eines <article>-Elements für einen Blogbeitrag vermittelt, dass der Inhalt ein in sich geschlossener Artikel ist, während die Verwendung eines <div>-Elements keine semantische Bedeutung vermittelt.

Barrierefreiheit ist ein weiterer wichtiger Aspekt bei der Erstellung von HTML-Layouts. Durch die angemessene Verwendung semantischer Elemente können Sie Ihren Inhalt für Benutzer mit Behinderungen zugänglicher machen.

<h1>Hauptüberschrift</h1>
<h2>Unterüberschrift</h2>
<p>Einige Inhalte unter der Unterüberschrift.</p>

Screenreader können die semantischen Informationen nutzen, um leichter durch den Inhalt der Seite zu navigieren. Die Verwendung klarer und beschreibender Überschriften (Elemente <h1> bis <h6>) kann Benutzern helfen, die Organisation Ihres Inhalts zu verstehen.

Styling von HTML-Layouts mit CSS

CSS (Cascading Style Sheets) steuert die Positionierung und das Erscheinungsbild von HTML-Layout-Elementen. Mit CSS können Sie Größe, Abstände, Polsterung, Farben, Schriftarten und andere visuelle Eigenschaften von Elementen definieren, um optisch ansprechende und gut strukturierte Layouts zu erstellen.

Das CSS-Box-Modell ist ein grundlegendes Konzept in CSS-Layouts. Jedes HTML-Element wird als Box mit Inhalt, Polsterung, Rändern und Außenabständen behandelt. Durch Anpassung dieser Eigenschaften können Sie die Größe und den Abstand von Elementen steuern.

<div class="box">Inhalt</div>

<style>
.box {
   width: 200px;
   height: 100px;
   padding: 10px;
   border: 1px solid black;
   margin: 20px;
}
</style>

CSS Flexbox ist ein Layout-Modell, das die Erstellung flexibler und reaktionsfähiger Layouts ermöglicht. Mit Flexbox können Sie die Ausrichtung, Reihenfolge und Größe von Elementen innerhalb eines Containers einfach steuern.

<nav class="menu">
   <a href="#">Startseite</a>
   <a href="#">Über uns</a>
   <a href="#">Kontakt</a>
</nav>

<style>
.menu {
   display: flex;
   justify-content: space-between;
}
</style>

CSS Grid ist ein weiteres leistungsstarkes Layout-System, das die Erstellung komplexer, zweidimensionaler Layouts ermöglicht. Mit Grid können Sie Zeilen und Spalten definieren und Elemente präzise innerhalb der Gitterstruktur platzieren.

<div class="grid">
   <header>Kopfzeile</header>
   <nav>Navigation</nav>
   <main>Hauptinhalt</main>
   <aside>Seitenleiste</aside>
   <footer>Fußzeile</footer>
</div>

<style>
.grid {
   display: grid;
   grid-template-columns: 1fr 3fr 1fr;
   grid-template-rows: auto 1fr auto;
   grid-template-areas:
      "header header header"
      "nav main aside"
      "footer footer footer";
}
</style>

Techniken für responsives Design ermöglichen es Ihren Layouts, sich an verschiedene Bildschirmgrößen anzupassen und so eine optimale Darstellung auf allen Geräten zu gewährleisten. Media Queries in CSS ermöglichen es Ihnen, verschiedene Stile basierend auf der Bildschirmgröße oder den Geräteeigenschaften anzuwenden.

<style>
.container {
   display: flex;
   flex-direction: row;
}

@media screen and (max-width: 600px) {
   .container {
      flex-direction: column;
   }
}
</style>

Beispiele und Übungen

Um Ihr Verständnis von HTML-Layouts und CSS-Styling zu vertiefen, schauen wir uns einige Beispiellayouts für gängige Website-Designs an und üben deren Erstellung und Gestaltung.

<header>
   <h1>Mein Blog</h1>
   <nav>
      <ul>
         <li><a href="#">Startseite</a></li>
         <li><a href="#">Kategorien</a></li>
         <li><a href="#">Über uns</a></li>
      </ul>
   </nav>
</header>
<main>
   <article>
      <h2>Blogartikel-Titel</h2>
      <p>Hier steht der Inhalt des Blogartikels...</p>
   </article>
   <article>
      <h2>Ein weiterer Blogartikel</h2>
      <p>Mehr Blogartikel-Inhalt...</p>
   </article>
</main>
<aside>
   <h3>Neueste Beiträge</h3>
   <ul>
      <li><a href="#">Beitrag 1</a></li>
      <li><a href="#">Beitrag 2</a></li>
      <li><a href="#">Beitrag 3</a></li>
   </ul>
</aside>
<footer>
   <p>&copy; 2023 Mein Blog. Alle Rechte vorbehalten.</p>
</footer>

<header>
   <h1>Mein Online-Shop</h1>
   <nav>
      <ul>
         <li><a href="#">Startseite</a></li>
         <li><a href="#">Produkte</a></li>
         <li><a href="#">Warenkorb</a></li>
      </ul>
   </nav>
</header>
<main>
   <section>
      <h2>Ausgewählte Produkte</h2>
      <article>
         <h3>Produkt 1</h3>
         <img src="produkt1.jpg" alt="Produkt 1">
         <p>Produktbeschreibung...</p>
         <button>In den Warenkorb</button>
      </article>
      <article>
         <h3>Produkt 2</h3>
         <img src="produkt2.jpg" alt="Produkt 2">
         <p>Produktbeschreibung...</p>
         <button>In den Warenkorb</button>
      </article>
   </section>
</main>
<footer>
   <p>&copy; 2023 Mein Online-Shop. Alle Rechte vorbehalten.</p>
</footer>

<header>
   <h1>Mein Portfolio</h1>
   <nav>
      <ul>
         <li><a href="#">Startseite</a></li>
         <li><a href="#">Projekte</a></li>
         <li><a href="#">Über mich</a></li>
         <li><a href="#">Kontakt</a></li>
      </ul>
   </nav>
</header>
<main>
   <section>
      <h2>Ausgewählte Projekte</h2>
      <article>
         <h3>Projekt 1</h3>
         <img src="projekt1.jpg" alt="Projekt 1">
         <p>Projektbeschreibung...</p>
      </article>
      <article>
         <h3>Projekt 2</h3>
         <img src="projekt2.jpg" alt="Projekt 2">
         <p>Projektbeschreibung...</p>
      </article>
   </section>
</main>
<footer>
   <p>&copy; 2023 Mein Portfolio. Alle Rechte vorbehalten.</p>
</footer>