blob: da76edc3dd569d5449816d2851b8694e976c9be4 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
|
---
title: Block-Level Elemente
slug: Web/HTML/Block-level_elements
tags:
- Anfänger
- Beginner
- Elemente
- Guide
- HTML
- HTML Elemente
- Referenzen
- Web Programmierung
translation_of: Web/HTML/Block-level_elements
original_slug: Web/HTML/Block-level_elemente
---
<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>
|
