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
|
---
title: '<div>: The Content Division element'
slug: Web/HTML/Element/div
translation_of: Web/HTML/Element/div
---
<div>{{HTMLRef}}</div>
<p><span class="seoSummary"><strong>HTML Content Division element</strong> (<strong><code><div></code></strong>) jest rodzajem pojemnika na </span>treść<span class="seoSummary">. Nie ma on żadnego wpływu na treść ani układ graficzny, dopóki nie zostanie ostylizowany z użyciem CSS. </span> Element <code><div></code> jako "czysty" pojemnik niczego nie reprezentuje. Zamiast tego, jest on używany do grupowania zawartości, dzięki czemu można go łatwo stylizować za pomocą atrybutu {{htmlattrxref("class")}} lub {{htmlattrxref("id")}}, oznaczające część dokumentu jako napisaną w innym języku (używając atrybutu {{htmlattrxref("lang")}}), i tak dalej.</p>
<table class="properties">
<tbody>
<tr>
<th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Kategorie zawartości</a></th>
<td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Tekst lub treść osadzona</a>, namacalna zawartosć.</td>
</tr>
<tr>
<th scope="row">Dopuszczalna zawartość</th>
<td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Tekst lub treść osadzona</a>.<br>
Lub (w <a href="/en-US/docs/Glossary/WHATWG">WHATWG</a> HTML): Jeżeli rodzic jest elementem {{HTMLElement("dl")}}: jednego lub więcej elementów {{HTMLElement("dt")}}, po których następuje jeden lub więcej elementów {{HTMLElement("dd")}}, opcjonalnie zmieszanych z elementami {{HTMLElement("script")}} i {{HTMLElement("template")}}.</td>
</tr>
<tr>
<th scope="row">Pominięcie znacznika</th>
<td>Brak, zarówno znacznik początku, jak i końca jest obowiązkowy.</td>
</tr>
<tr>
<th scope="row">Dozwoleni rodzice </th>
<td>Każdy element akceptujący <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">tekst lub treść osadzoną</a>.<br>
Lub (w <a href="/en-US/docs/Glossary/WHATWG">WHATWG</a> HTML): element {{HTMLElement("dl")}}.</td>
</tr>
<tr>
<th scope="row">Wsparcie <a href="/pl/docs/Web/Accessibility/ARIA">ARIA</a></th>
<td>Tak</td>
</tr>
<tr>
<th scope="row">Interfejs DOM</th>
<td>{{domxref("HTMLDivElement")}}</td>
</tr>
</tbody>
</table>
<h2 id="Atrybuty">Atrybuty</h2>
<p>Element ten obejmuje <a href="/en-US/docs/Web/HTML/Global_attributes">atrybuty globalne</a>.</p>
<p>Atrybut <code>align</code> jest przestarzały; nie używaj go już dłużej. Zamiast tego należy użyć właściwości lub technik CSS takich jak <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid</a> lub <a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">CSS Flexbox</a> do wyrównania i pozycjonowania elementów <code><div></code> na stronie.</p>
<h2 id="Wskazówki_dot._użytkowania">Wskazówki dot. użytkowania</h2>
<ul>
<li>Element <code><div></code> należy stosować tylko wtedy, gdy nie może go zastąpić żaden inny element semantyczny (np. {{HTMLElement("article")}} lub {{HTMLElement("nav")}}).</li>
</ul>
<h2 id="Przykłady">Przykłady</h2>
<h3 id="Prosty_przykład">Prosty przykład</h3>
<pre class="brush: html"><div>
<p>Any kind of content here. Such as
&lt;p&gt;, &lt;table&gt;. You name it!</p>
</div> </pre>
<p>Rezultat wygląda tak:</p>
<p>{{EmbedLiveSample("A_simple_example", 650, 60)}}</p>
<h3 id="Przykład_z_użyciem_stylów">Przykład z użyciem stylów</h3>
<p>Ten przykład tworzy cieniowane pole, stosując styl dla <code><div></code> za pomocą CSS. Zwróć uwagę na użycie atrybutu {{htmlattrxref("class")}} na elemencie <code><div></code> aby zastosować styl o nazwie <code>"shadowbox"</code>.</p>
<h4 id="HTML">HTML</h4>
<pre class="brush: html"><div class="shadowbox">
<p>Here's a very interesting note displayed in a
lovely shadowed box.</p>
</div></pre>
<h4 id="CSS">CSS</h4>
<pre class="brush: css">.shadowbox {
width: 15em;
border: 1px solid #333;
box-shadow: 8px 8px 5px #444;
padding: 8px 12px;
background-image: linear-gradient(180deg, #fff, #ddd 40%, #ccc);
}</pre>
<h4 id="Rezultat">Rezultat</h4>
<p>{{EmbedLiveSample("A_styled_example", 650, 120)}}</p>
<h2 id="Specyfikacje">Specyfikacje</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('HTML WHATWG', 'grouping-content.html#the-div-element', '<div>')}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td>No changes since the latest snapshot</td>
</tr>
<tr>
<td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-div-element', '<div>')}}</td>
<td>{{Spec2('HTML5 W3C')}}</td>
<td>Obsoleted <strong>align</strong></td>
</tr>
<tr>
<td>{{SpecName('HTML4.01', 'struct/global.html#h-7.5.4', '<div>')}}</td>
<td>{{Spec2('HTML4.01')}}</td>
<td> </td>
</tr>
</tbody>
</table>
<h2 id="Kompatybilność_z_przeglądarkami">Kompatybilność z przeglądarkami</h2>
<p>{{Compat("html.elements.div")}}</p>
<h2 id="Zobacz_także">Zobacz także</h2>
<ul>
<li>Semantic sectioning elements: {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("nav")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}</li>
<li>{{HTMLElement("span")}} element for styling of phrasing content</li>
</ul>
|
