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.
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>