Blockelement-Tags

3.1 Element <p>

Blockelemente in HTML werden verwendet, um die Struktur und Organisation von Webseiteninhalten zu schaffen. Sie helfen dabei, den Inhalt in logische Blöcke und Segmente zu unterteilen. Diese Elemente beginnen eine neue Zeile und nehmen die gesamte verfügbare Breite ein. Schauen wir uns genauer drei häufig verwendete Tags an: <p>, <div>, und <span>.

Tag <p>

Das Tag <p> wird zur Erstellung von Textabsätzen verwendet. Es ist ein Blockelement, was bedeutet, dass jeder Absatz mit einer neuen Zeile beginnt und oben und unten Abstände hat.

Beispiel für die Verwendung:

    
      <p>
        Dies ist der erste Absatz des Textes. Absätze werden verwendet, um den Text in logische Blöcke zu unterteilen
        und somit die Lesbarkeit zu verbessern.
      </p>
      <p>Dies ist der zweite Absatz des Textes. Jeder Absatz beginnt mit einer neuen Zeile.</p>
    
  

Eigenschaften:

• Blockelement: Beginnt auf einer neuen Zeile und nimmt die gesamte verfügbare Breite ein.
• Automatische Abstände: Browser fügen normalerweise Abstände vor und nach dem Absatz hinzu.
• Verschachtelung: Das Tag <p> kann keine anderen Blockelemente enthalten.

Stilisierung mit CSS:

    
      p {
        color: #333;
        font-size: 16px;
        line-height: 1.5;
        margin-bottom: 15px;
      }
    
  

3.2 Element <div>

Das Tag <div> ist ein universeller Blockcontainer, der verwendet wird, um andere Elemente zu gruppieren und ihnen Stile zuzuweisen. Es hat keine eingebauten Stile und wird ausschließlich zur Strukturierung von Inhalten eingesetzt.

Beispiel für die Verwendung:

    
      <div class="container">
        <h2>Blocküberschrift</h2>
        <p>Einige Texte innerhalb des div-Blocks.</p>
      </div>
    
  

Eigenschaften:

• Blockelement: Beginnt auf einer neuen Zeile und nimmt die gesamte verfügbare Breite ein
• Universalität: Kann alle anderen Elemente enthalten, einschließlich Block- und Inline-Elemente
• Stilisierung und Skripte: Wird häufig für die Anwendung von CSS-Stilen und JavaScript-Skripten verwendet

Stilisierung mit CSS:

    
      .container {
        border: 1px solid #ccc;
        padding: 20px;
        background-color: #f9f9f9;
      }
    
  

3.3 Element <span>

Das Tag <span> ist ein Inline-Element und wird verwendet, um Teile von Text oder anderen Inhalten innerhalb von Blockelementen hervorzuheben. Es hat keine eingebauten Stile und dient dazu, CSS-Stile und JavaScript-Skripte auf bestimmte Teile des Textes anzuwenden.

Beispiel für die Verwendung:

    
      <p>Dieser Text enthält ein hervorgehobenes <span class="highlight">Wort</span>, das sich vom übrigen Text unterscheidet.</p>
    
  

Eigenschaften:

• Inline-Element: Erstellt keine neue Zeile und nimmt nur die notwendige Breite ein
• Flexibilität: Wird verwendet, um Stile auf einzelne Teile des Textes oder anderer Elemente anzuwenden
• Häufig in Kombination mit CSS und JavaScript verwendet: Hilft, Teile des Textes präzise zu stylen oder zu manipulieren

Stilisierung mit CSS:

    
      .highlight {
        color: red;
        font-weight: bold;
      }
    
  

3.4 Vergleich <div> und <span>

<div>:

• Blockelement
• Beginnt mit einer neuen Zeile
• Kann andere Block- und Inline-Elemente enthalten
• Wird zur Gruppierung und Strukturierung von Inhalten verwendet

<span>:

• Inline-Element
• Stört den Textfluss nicht
• Wird für die Stilisierung einzelner Teile des Textes verwendet
• Wird oft für Hervorhebungen und Arbeiten mit JavaScript verwendet

Beispiel für kombinierte Verwendung von <div> und <span>:

    
      .article {
        border: 1px solid #ddd;
        padding: 10px;
      }

      .keyword {
        color: blue;
        font-style: italic;
      }
    
  

    
      <div class="article">
        <h2>Artikelüberschrift</h2>
        <p>
          Dies ist ein Absatz des Artikeltextes mit einem Schlüssel<span class="keyword">wort</span>, das zur Betonung hervorgehoben ist.
        </p>
      </div>
    
  

Die Tags <p>, <div> und <span> sind grundlegende Bausteine in HTML, die es ermöglichen, strukturierte, stilisierte und interaktive Webseiten zu erstellen. Das Verständnis ihrer Eigenschaften und die richtige Verwendung helfen, benutzerfreundliche und funktionale Schnittstellen zu kreieren.