HTML-Elemente

Block-Elemente

Block-Elemente sind HTML-Elemente, die standardmäßig in einer neuen Zeile beginnen und die volle verfügbare Breite einnehmen. Sie erzeugen eine Block-Level-Box, was bedeutet, dass vor und nach dem Element ein Zeilenumbruch erfolgt. Einige häufige Beispiele für Block-Elemente sind <div>, <p> und <h1> bis <h6>.

<div>Dies ist ein Block-Element.</div>

Das <div>-Element ist ein generischer Container, der oft verwendet wird, um andere Elemente zu gruppieren und Stile oder Layouts auf sie anzuwenden. Das <p>-Element stellt einen Textabsatz dar, während die Elemente <h1> bis <h6> verschiedene Überschriftenebenen repräsentieren, wobei <h1> die höchste und <h6> die niedrigste Ebene ist.

Block-Elemente werden verwendet, um die Hauptstruktur einer Webseite zu erstellen, wie Überschriften, Absätze, Abschnitte und mehr. Sie können sowohl andere Block-Elemente als auch Inline-Elemente enthalten.

Inline-Elemente

Inline-Elemente sind HTML-Elemente, die nicht in einer neuen Zeile beginnen und nur so viel Breite einnehmen wie nötig. Sie erzeugen eine Inline-Level-Box, was bedeutet, dass vor oder nach dem Element kein Zeilenumbruch erfolgt. Einige häufige Beispiele für Inline-Elemente sind <span>, <a> und <img>.

<span>Dies ist ein Inline-Element.</span>

Das <span>-Element ist ein generischer Container für Inline-Inhalte und wird oft verwendet, um Stile anzuwenden oder bestimmte Textteile anzusprechen. Das <a>-Element stellt einen Hyperlink dar, der es Benutzern ermöglicht, von einer Webseite zu einer anderen zu navigieren. Das <img>-Element wird verwendet, um Bilder in eine Webseite einzubetten.

<a href="https://example.com">Hier klicken</a>

Inline-Elemente werden verwendet, um bestimmte Teile von Text oder Inhalt innerhalb eines Block-Elements zu formatieren oder zu gestalten. Sie sollten keine Block-Elemente enthalten, können aber innerhalb von ihnen enthalten sein.

Textelemente

Textelemente strukturieren und formatieren Textinhalte auf einer Webseite. Die grundlegendsten Textelemente sind Überschriften und Absätze. Überschriften, dargestellt durch <h1> bis <h6> Tags, definieren die Hierarchie und Wichtigkeit des Inhalts, wobei <h1> die höchste Ebene und <h6> die niedrigste ist. Absätze, dargestellt durch das <p> Tag, gruppieren zusammenhängende Sätze.

Andere Textelemente umfassen Formatierungselemente wie <strong> für fetten Text, <em> für kursiven Text, <sup> für hochgestellten Text und <sub> für tiefgestellten Text. Diese Elemente fügen bestimmten Textteilen Betonung oder besondere Bedeutung hinzu.

Strukturelemente

Strukturelemente definieren die Gesamtstruktur und das Layout einer Webseite. Das <div> Element ist ein allgemeiner Container, der andere Elemente gruppiert und Stile oder Layouts auf sie anwendet. Das <span> Element ähnelt <div>, ist aber ein Inline-Element und wird verwendet, um Stile anzuwenden oder bestimmte Textteile anzusprechen.

Andere Strukturelemente umfassen <header>, <footer>, <nav>, <section> und <article>. Das <header> Element repräsentiert einleitende Inhalte oder eine Gruppe von Navigationslinks, während das <footer> Element Informationen über den Autor, Copyright oder Links zu verwandten Seiten enthält. Das <nav> Element definiert eine Reihe von Navigationslinks. Das <section> Element repräsentiert einen eigenständigen Inhaltsabschnitt, und das <article> Element repräsentiert eine in sich geschlossene Komposition, wie einen Blogbeitrag oder Nachrichtenartikel.

Medienelemente

Medienelemente betten Multimedia-Inhalte in eine Webseite ein. Das <img> Element zeigt Bilder an, während die <video> und <audio> Elemente Video- bzw. Audioinhalte einbetten.

<img src="image.jpg" alt="Eine Beschreibung des Bildes">

Das src Attribut gibt die URL der Mediendatei an, und das alt Attribut bietet alternativen Text für Screenreader und Suchmaschinen.

Listenelemente

Listenelemente erstellen geordnete und ungeordnete Listen. Eine ungeordnete Liste, dargestellt durch das <ul> Tag, wird verwendet, wenn die Reihenfolge der Elemente nicht wichtig ist. Eine geordnete Liste, dargestellt durch das <ol> Tag, wird verwendet, wenn die Reihenfolge der Elemente wichtig ist. Listenelemente, dargestellt durch das <li> Tag, sind die einzelnen Elemente innerhalb einer Liste.

<ul>
  <li>Element 1</li>
  <li>Element 2</li>
  <li>Element 3</li>
</ul>

Tabellenelemente

Tabellenelemente erstellen Tabellen zur Darstellung von Daten in Zeilen und Spalten. Das <table> Element definiert die Tabelle, während <tr> eine Tabellenzeile darstellt, <th> eine Tabellenüberschriftszelle darstellt und <td> eine Tabellendatenzelle darstellt.

<table>
  <tr>
    <th>Überschrift 1</th>
    <th>Überschrift 2</th>
  </tr>
  <tr>
    <td>Zeile 1, Zelle 1</td>
    <td>Zeile 1, Zelle 2</td>
  </tr>
  <tr>
    <td>Zeile 2, Zelle 1</td>
    <td>Zeile 2, Zelle 2</td>
  </tr>
</table>

Formularelemente

Formularelemente erstellen interaktive Formulare für Benutzereingaben. Das <form> Element definiert das Formular, während verschiedene andere Elemente unterschiedliche Arten von Eingaben erstellen. Das <input> Element erstellt Textfelder, Radiobuttons, Checkboxen und mehr, abhängig vom Wert seines type Attributs. Das <label> Element bietet eine Textbeschriftung für ein Eingabefeld und macht es zugänglicher und benutzerfreundlicher.

Andere Formularelemente umfassen <button> zum Erstellen anklickbarer Schaltflächen, <select> zum Erstellen von Dropdown-Menüs und <textarea> zum Erstellen mehrzeiliger Texteingabefelder.

<form>
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">

  <label for="email">E-Mail:</label>
  <input type="email" id="email" name="email">

  <button type="submit">Absenden</button>
</form>