Informatik

Block- und Inline-Elemente

HTML-Elemente können entweder Block- oder Inline-Elemente sein. Block-Elemente beginnen auf einer neuen Zeile und nehmen die volle Breite des Elternelements ein. Inline-Elemente hingegen nehmen nur so viel Platz ein, wie sie benötigen, und beginnen nicht auf einer neuen Zeile.

Div-Elemente

Das <div>-Element ist ein Block-Element, das dazu verwendet wird, um andere Elemente zu gruppieren. Es wird oft verwendet, um Abschnitte einer Webseite zu definieren, die mit CSS formatiert werden sollen.

Überschrift

Das ist ein Absatz.

Unterüberschrift

Das ist ein weiterer Absatz.

div { background-color: lightgray; padding: 10px; }

Span-Elemente

Das <span>-Element ist ein Inline-Element, das dazu verwendet wird, um Text innerhalb eines Blocks zu formatieren. Es wird oft verwendet, um Textabschnitte hervorzuheben oder mit CSS zu formatieren.

Das ist ein roter Text.

Das ist ein fetter Text.

Auflistung von Block- und Inline-Elementen

Die ist eine nicht vollständige Liste von Block- und Inline-Elementen in HTML. Wie du siehst, gibt es viele verschiedene Elemente, die entweder Block- oder Inline-Elemente sind. Alle haben unterschiedliche Verwendungszwecke und können mit CSS formatiert werden. Die vollständige Liste findest du in der HTML-Spezifikation.

  • Block-Elemente:
    • <div>
    • <h1> bis <h6>
    • <p>
    • <ul>
    • <ol>
    • <li>
    • <table>
    • <form>
    • <header>
    • <footer>
    • <section>
    • <article>
    • <nav>
    • <aside>
    • <main>
    • <blockquote>
    • <hr>
    • <pre>
    • <address>
    • <figure>
    • <figcaption>
    • <fieldset>
    • <legend>
    • <details>
    • <summary>
    • <dialog>
    • <menu>
    • <article>
    • <header>
    • <footer>
    • <section>
    • <aside>
    • <main>
    • <blockquote>
    • <hr>
    • <pre>
    • <address>
    • <figure>
    • <figcaption>
    • <fieldset>
    • <legend>
    • <details>
    • <summary>
    • <dialog>
    • <menu>
  • Inline-Elemente:
    • <span>
    • <a>
    • <strong>
    • <em>
    • <code>
    • <img>
    • <br>
    • <input>
    • <label>
    • <select>
    • <option>
    • <textarea>
    • <button>
    • <abbr>
    • <cite>
    • <dfn>
    • <kbd>
    • <mark>
    • <q>
    • <samp>
    • <sub>
    • <sup>
    • <time>
    • <var>
    • <small>
    • <b>
    • <i>
    • <u>
    • <s>
    • <del>
    • <ins>
    • <strong>
    • <em>
    • <code>
    • <img>
    • <br>
    • <input>
    • <label>
    • <select>
    • <option>
    • <textarea>
    • <button>
    • <abbr>
    • <cite>
    • <dfn>
    • <kbd>
    • <mark>
    • <q>
    • <samp>
    • <sub>
    • <sup>
    • <time>
    • <var>
    • <small>
    • <b>
    • <i>
    • <u>
    • <s>
    • <del>
    • <ins>
Block- und Inline-Elemente