diff options
Diffstat (limited to 'files/de/web/html/block-level_elemente/index.html')
| -rw-r--r-- | files/de/web/html/block-level_elemente/index.html | 108 |
1 files changed, 108 insertions, 0 deletions
diff --git a/files/de/web/html/block-level_elemente/index.html b/files/de/web/html/block-level_elemente/index.html new file mode 100644 index 0000000000..ed5cd1af79 --- /dev/null +++ b/files/de/web/html/block-level_elemente/index.html @@ -0,0 +1,108 @@ +--- +title: Block-Level Elemente +slug: Web/HTML/Block-level_elemente +tags: + - Anfänger + - Beginner + - Elemente + - Guide + - HTML + - HTML Elemente + - Referenzen + - Web Programmierung +translation_of: Web/HTML/Block-level_elements +--- +<p>Block- und <a href="/de/docs/Web/HTML/Inline_elemente" title="/en-US/docs/HTML/inline_elements">Inline-Elemente</a> sind die zwei ursprünglichen Kategorien der darstellenden HTML-Elemente.</p> + +<p>Block-Elemente nehmen typischerweise die gesamte verfügbare Breite ihres Elternelements ein und grenzen ihren Inhalt vertikal durch je einen Zeilenumbruch gegenüber den vor- und nachfolgenden Elementen ab. Auf diese Weise erzeugen sie den rechteckigen Block, der ihnen den Namen gibt.</p> + +<p>Block-Elemente stellen inhaltlich einen zusammenhängenden Bereich dar und geben ihm eine semantische Bedeutung. Prominentes Beispiel für ein Block-Element ist {{ HTMLElement("p") }}, das einen Textabsatz (Englisch: paragraph) umfasst und mit Abständen darüber und darunter von anderen Bereichen des Dokuments trennt.<br> + Einzige Ausnahme ist von dieser Regel ist {{ HTMLElement("div") }}; dieses hat keine semantische Bedeutung und dient lediglich dem Zugriff auf den betreffenden Bereich mittels CSS oder Javascript.</p> + +<p>Gemeinhin können Block-Elemente Inline- und meist auch weitere Block-Elemente enthalten. Dieser strukturellen Unterscheidung liegt die Idee zugrunde, dass auf Block-Ebene größere Strukturen definiert werden als auf Inline-Ebene.<br> + Die höchste Ebene für Block-Elemente selbst ist das Element {{ HTMLElement("body") }}.</p> + +<p>Die einfache Unterscheidung zwischen Block- und Inline-Ebene wird in HTML-Spezifikationen bis einschließlich Version 4.01 verwendet. In HTML 5 wird diese Zweiteilung zu einem komplexeren Satz von <a href="/en-US/docs/HTML/Content_categories" title="/en-US/docs/HTML/Content_categories">Inhaltskategorien</a> ergänzt. Hierbei entspricht die Block-Ebene in HTML 5 grob der Kategorie <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="/en-US/docs/HTML/Content_categories#Flow_content">fließender Inhalte</a>, während die Inline-Ebene der Kategorie <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="/en-US/docs/HTML/Content_categories#Phrasing_content">gestaltender Inhalte</a> gleichkommt. Darüber hinaus existieren weitere Kategorien.</p> + +<h2 id="Elemente">Elemente</h2> + +<p>Die nachfolgende Liste zeigt eine komplette Übersicht aller HTML-Block-Elemente (die neuen HTML-5-Elemente sind technisch gesehen nicht als Block-Elemente definiert).</p> + +<div class="threecolumns"> +<dl> + <dt>{{ HTMLElement("address") }}</dt> + <dd>Kontaktinformation.</dd> + <dt>{{ HTMLElement("article") }} {{ HTMLVersionInline(5) }}</dt> + <dd>Inhalt eines Artikels.</dd> + <dt>{{ HTMLElement("aside") }} {{ HTMLVersionInline(5) }}</dt> + <dd>Anmerkungen.</dd> + <dt>{{ HTMLElement("audio") }} {{ HTMLVersionInline(5) }}</dt> + <dd>Audio-Wiedergabe.</dd> + <dt>{{ HTMLElement("video") }} {{ HTMLVersionInline(5) }}</dt> + <dd>Video-Wiedergabe.</dd> + <dt>{{ HTMLElement("blockquote") }}</dt> + <dd>Zitat in Form eines eigenständigen Absatzes.</dd> + <dt>{{ HTMLElement("canvas") }} {{ HTMLVersionInline(5) }}</dt> + <dd>Bereich zum Zeichnen und Malen.</dd> + <dt>{{ HTMLElement("dd") }}</dt> + <dd>Definition, Beschreibung.</dd> + <dt>{{ HTMLElement("div") }}</dt> + <dd>Allgemeine Unterteilung ohne semantische Aussage.</dd> +</dl> + + + +<dl> + <dt></dt> + <dt>{{ HTMLElement("dl") }}</dt> + <dd>Definitionsliste.</dd> +</dl> + +<dl> + <dt>{{ HTMLElement("fieldset") }}</dt> + <dd>Gruppe von Elementen im Formular oder Reiter im Dialog.</dd> + <dt>{{ HTMLElement("figcaption") }} {{ HTMLVersionInline(5) }}</dt> + <dd>Beschreibung einer Grafik.</dd> + <dt>{{ HTMLElement("figure") }} {{ HTMLVersionInline(5) }}</dt> + <dd>Grafik mit Beschreibung (siehe {{ HTMLElement("figcaption") }}).</dd> + <dt>{{ HTMLElement("footer") }} {{ HTMLVersionInline(5) }}</dt> + <dd>Fußbereich.</dd> + <dt>{{ HTMLElement("form") }}</dt> + <dd>Eingabeformular.</dd> + <dt>{{ HTMLElement("h1") }}, {{ HTMLElement("h2") }}, {{ HTMLElement("h3") }}, {{ HTMLElement("h4") }}, {{ HTMLElement("h5") }}, {{ HTMLElement("h6") }}</dt> + <dd>Überschriften in Abstufung 1 bis 6.</dd> + <dt>{{ HTMLElement("header") }} {{ HTMLVersionInline(5) }}</dt> + <dd>Kopfbereich.</dd> + <dt>{{ HTMLElement("hgroup") }} {{ HTMLVersionInline(5) }}</dt> + <dd>Gruppe mehrerer Überschriften.</dd> + <dt></dt> + <dt>{{ HTMLElement("hr") }}</dt> + <dd>Horizontrale Trennlinie.</dd> + <dt>{{ HTMLElement("noscript") }}</dt> + <dd>Ersatzinhalt, falls JavaScript deaktiviert ist.</dd> + <dt>{{ HTMLElement("ol") }}</dt> + <dd>Geordnete Liste.</dd> + <dt>{{ HTMLElement("output") }} {{ HTMLVersionInline(5) }}</dt> + <dd>Dynamisch erzeugte Ausgaben.</dd> + <dt>{{ HTMLElement("p") }}</dt> + <dd>Textabsatz.</dd> + <dt>{{ HTMLElement("pre") }}</dt> + <dd><span class="short_text" id="result_box" lang="de"><span class="hps">Vorformatierter </span></span>Text.</dd> + <dt>{{ HTMLElement("section") }} {{ HTMLVersionInline(5) }}</dt> + <dd>Abschnitt einer Seite.</dd> + <dt>{{ HTMLElement("table") }}</dt> + <dd>Tabelle.</dd> + <dt>{{ HTMLElement("tfoot") }}</dt> + <dd>Fußbereich der Tabelle.</dd> + <dt>{{ HTMLElement("ul") }}</dt> + <dd>Ungeordnete Liste.</dd> +</dl> +</div> + +<h3 id="See_also" name="See_also"></h3> + +<h2 id="See_also" name="See_also">Siehe auch</h2> + +<ul> + <li><a href="/de/docs/Web/HTML/Inline_elemente" title="en/HTML/Inline_elements">Inline-Elemente</a></li> +</ul> |