<div>: The Content Division element

HTML Content Division element (<div>) jest rodzajem pojemnika na treść. Nie ma on żadnego wpływu na treść ani układ graficzny, dopóki nie zostanie ostylizowany z użyciem CSS.  Element <div> 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 class lub id, oznaczające część dokumentu jako napisaną w innym języku (używając atrybutu lang), i tak dalej.

Atrybuty

Element ten obejmuje atrybuty globalne.

Atrybut align 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 CSS Grid lub CSS Flexbox do wyrównania i pozycjonowania elementów <div> na stronie.

Wskazówki dot. użytkowania

• Element <div> należy stosować tylko wtedy, gdy nie może go zastąpić żaden inny element semantyczny (np. <article> lub <nav>).

Przykłady

Prosty przykład

<div>
  <p>Any kind of content here. Such as
  &lt;p&gt;, &lt;table&gt;. You name it!</p>
</div> 

Rezultat wygląda tak:

Przykład z użyciem stylów

Ten przykład tworzy cieniowane pole, stosując styl dla <div> za pomocą CSS. Zwróć uwagę na użycie atrybutu class na elemencie <div> aby zastosować styl o nazwie "shadowbox".

HTML

<div class="shadowbox">
  <p>Here's a very interesting note displayed in a
  lovely shadowed box.</p>
</div>

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);
}

Rezultat

Specyfikacje

Kompatybilność z przeglądarkami

Zobacz także

• Semantic sectioning elements: <section>, <article>, <nav>, <header>, <footer>
• <span> element for styling of phrasing content