---
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>&lt;div&gt;</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>&lt;div&gt;</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>&lt;div&gt;</code> na stronie.</p>

<h2 id="Wskazówki_dot._użytkowania">Wskazówki dot. użytkowania</h2>

<ul>
 <li>Element <code>&lt;div&gt;</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">&lt;div&gt;
  &lt;p&gt;Any kind of content here. Such as
  &amp;lt;p&amp;gt;, &amp;lt;table&amp;gt;. You name it!&lt;/p&gt;
&lt;/div&gt; </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>&lt;div&gt;</code> za pomocą CSS. Zwróć uwagę na użycie atrybutu {{htmlattrxref("class")}} na elemencie <code>&lt;div&gt;</code> aby zastosować styl o nazwie <code>"shadowbox"</code>.</p>

<h4 id="HTML">HTML</h4>

<pre class="brush: html">&lt;div class="shadowbox"&gt;
  &lt;p&gt;Here's a very interesting note displayed in a
  lovely shadowed box.&lt;/p&gt;
&lt;/div&gt;</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', '&lt;div&gt;')}}</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', '&lt;div&gt;')}}</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', '&lt;div&gt;')}}</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>