Lektionen
Start
Jetzt lernen
CodeGym /Java Kurs /Frontend SELF DE /Blockmodell von HTML

Blockmodell von HTML

Frontend SELF DE
Level 7 , Lektion 4
Verfügbar

9.1 Blockelemente

Das HTML-Blockmodell — ist ein Konzept, das die Struktur und Darstellung von HTML-Elementen in einem Dokument beschreibt. Es hilft Entwicklern zu verstehen, wie Elemente miteinander interagieren und wie sie auf der Seite positioniert sind. Das Verständnis des Blockmodells ist wichtig, um strukturierte und ästhetisch ansprechende Webseiten zu erstellen.

Das HTML-Blockmodell besteht aus zwei Haupttypen von Elementen: Block und Inline. Diese Elemente spielen eine Schlüsselrolle im Web-Design.

Blockelemente

HTML-Tag Beschreibung
<div> Hauptcontainer zur Gruppierung anderer Elemente.
<p> Absatz von Text.
<h1> – <h6> Überschriften verschiedener Ebenen.
<ul>, <ol> Ungeordnete und geordnete Listen.
<li> Listenelement.
<section> Semantischer Container für einen Abschnitt eines Dokuments.
<article> Unabhängiger Block von Inhalten.
<aside> Inhalt, der mit dem Hauptinhalt in Verbindung steht (Seitenleiste).
<header> Einleitender oder navigativer Teil einer Seite oder eines Abschnitts.
<footer> Unterer Teil einer Seite oder eines Abschnitts.
<nav> Navigationslinks.
<main> Hauptinhalt des Dokuments.
Java university

Beispiel eines Blockelements:

HTML
    
      <div>
        <h1>Titel</h1>
        <p>Das ist ein Absatz Text innerhalb des Blockelements div.</p>
      </div>

9.2 Inline-Elemente

Inline-Elemente beanspruchen nur die Breite, die für ihren Inhalt erforderlich ist und beginnen nicht in einer neuen Zeile. Sie können nur andere Inline-Elemente oder Text enthalten. Beispiele für Inline-Elemente:

HTML-Tag Beschreibung
<span> Hauptcontainer zur Gruppierung von Inline-Inhalten.
<a> Hyperlink.
<strong>, <b> Text-Hervorhebung (fett).
<em>, <i> Text-Hervorhebung (kursiv).
<img> Bilder einfügen.
<code> Code-Hervorhebung.
<label> Verbindung zwischen einem Label und einem Formularelement.
<input>, <select>, <textarea> Formularelemente.

Beispiel eines Inline-Elements:

HTML
    
      <span>Dies ist ein Absatz mit <strong>fetter Schrift</strong> und <em>kursivem Text</em>.</span>

9.3 Komponenten des Blockmodells

Komponenten des Blockmodells

Jedes Element im Blockmodell kann in Form eines rechteckigen Blocks dargestellt werden, der aus folgenden Teilen besteht:

  • Content: Innerer Inhalt des Elements, wie Text oder Bild
  • Padding: Raum zwischen dem Inhalt und dem Rand des Elements
  • Border: Linie, die das Padding und den Inhalt umgibt
  • Margin: Raum zwischen dem Rand des Elements und angrenzenden Elementen

Visualisierung des Blockmodells:

CSS
    
      .element {
        width: 200px;           /* Breite des Inhalts */
        padding: 10px;          /* Padding */
        border: 2px solid red;  /* Rand */
        margin: 20px;           /* Margin */
      }

Beispiel eines HTML mit Blockmodell:

In diesem Beispiel hat das Element <div> mit der Klasse "box" eine Breite von 200px, Padding von 10px, einen Rand von 2px und einen Margin von 20px. Diese Eigenschaften bestimmen, wie das Element auf der Seite angezeigt wird und mit anderen Elementen interagiert.

CSS
    
      .box {
        width: 200px;
        padding: 10px;
        border: 2px solid red;
        margin: 20px;
      }
HTML
    
      <div class="box">
        Dies ist ein Beispiel für ein Blockmodell.
      </div>
Kommentare
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION