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
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
|
---
title: '<section>: um Abschnitten zu erstellen'
slug: Web/HTML/Element/section
tags:
- Element
- HTML
- HTML 5
- HTML section
- Unterteilung
translation_of: Web/HTML/Element/section
---
<div>{{HTMLRef}}</div>
<h2 id="Übersicht">Übersicht</h2>
<p>Das <em>HTML Element Section </em>(<code><section></code>) stellt eine allgemeine Unterteilung des Dokumentes dar, z.B. eine thematische Gruppierung des Inhaltes typischerweise mit einer Überschrift. Jeder <code><section></code> Abschnitt sollte identifizierbar sein, üblicherweise durch Einfügen einer Überschrift (<code><a href="http://www.w3.org/html/wg/drafts/html/master/sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements">h1</a></code>-<code><a href="http://www.w3.org/html/wg/drafts/html/master/sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements">h6</a></code> Element) als Kindelement des <code><section></code> Elementes.</p>
<p>Zum Beispiel sollte jedes Navigationsmenü in ein <code><nav></code> Element eingebettet sein, eine Liste von Suchergebnissen und eine Anzeige einer Karte hat kein solch spezifisches Element und könnte daher in eine <code><section></code> eingebettet werden.</p>
<div class="note">
<p><em>Hinweis zur Benutzung:</em></p>
<ul>
<li>Wenn der Inhalt des {{HTMLElement("section")}} Elementes sinnvoll getrennt zu syndizieren ist, benutzt man stattdessen das {{HTMLElement("article")}} Element.</li>
<li>{{HTMLElement("section")}} soll nicht als allgemeines Containerelement benutzt werden; dafür gibt es {{HTMLElement("div")}}. Insbesondere gilt dies, wenn die Einteilung ausschließlich für CSS-Zwecke gedacht ist. Als Faustformel gilt, dass ein mit {{HTMLElement("section")}} ausgezeichneter Abschnitt auch in der Gliederung des Dokumentes erscheinen sollte.</li>
</ul>
</div>
<table class="properties">
<tbody>
<tr>
<th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Inhaltskategorien</a></th>
<td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Fließender Inhalt</a>, <a href="/en-US/docs/Web/HTML/Content_categories#Sectioning_content">Abschnitte</a>, greifbarer Inhalt.</td>
</tr>
<tr>
<th scope="row">Erlaubter Inhalt</th>
<td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Fließender Inhalt</a>.</td>
</tr>
<tr>
<th scope="row">Tag omission</th>
<td>{{no_tag_omission}}</td>
</tr>
<tr>
<th scope="row">Erlaubte Elternelemente</th>
<td>Jedes Element das <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">flow content</a> erlaubt. Beachte, dass das {{HTMLElement("section")}} kein Nachkomme des {{HTMLElement("address")}} Elementes sein darf.</td>
</tr>
<tr>
<th scope="row">DOM Schnittstelle</th>
<td>{{domxref("HTMLElement")}}</td>
</tr>
</tbody>
</table>
<h2 id="Attribute">Attribute</h2>
<p>Dieses Element enthält nur <a href="/en-US/docs/Web/HTML/Global_attributes">globale Attribute</a>.</p>
<h2 id="Beispiele">Beispiele</h2>
<pre class="brush: html"><section>
<h1>Heading</h1>
<p>Bunch of awesome content</p>
</section>
</pre>
<h2 id="Beispiel_2">Beispiel 2</h2>
<h3 id="Bisher">Bisher</h3>
<pre class="brush: html"><div>
<h2>Heading</h2>
<img>some image</img>
</div>
</pre>
<h3 id="Jetzt">Jetzt</h3>
<pre class="brush: html"><section>
<h2>Heading</h2>
<img>some image</img>
</section>
</pre>
<h2 id="sect1"></h2>
<h2 id="Spezifikationen">Spezifikationen</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Spezifikation</th>
<th scope="col">Status</th>
<th scope="col">Kommentar</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('HTML WHATWG', 'sections.html#the-section-element', '<section>')}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName('HTML5.1', 'sections.html#the-section-element', '<section>')}}</td>
<td>{{Spec2('HTML5.1')}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName('HTML5 W3C', 'sections.html#the-section-element', '<section>')}}</td>
<td>{{Spec2('HTML5 W3C')}}</td>
<td></td>
</tr>
</tbody>
</table>
<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
<div>{{CompatibilityTable}}</div>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Chrome</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
</tr>
<tr>
<td>Basic support</td>
<td>5</td>
<td>{{CompatGeckoDesktop("2.0")}}</td>
<td>9.0</td>
<td>11.10</td>
<td>4.1</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Android</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Mobile</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Basic support</td>
<td>2.2</td>
<td>{{CompatGeckoMobile("2.0")}}</td>
<td>9.0</td>
<td>11.0</td>
<td>5.0 (iOS 4.2)</td>
</tr>
</tbody>
</table>
</div>
<h2 id="Siehe_auch">Siehe auch</h2>
<ul>
<li>Andere mit Section verwandte Elemente: {{HTMLElement("body")}}, {{HTMLElement("nav")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("address")}};</li>
<li><a href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document">Sections and outlines of an HTML5 document</a>.</li>
</ul>
|
