<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.

Kategorie zawartości Tekst lub treść osadzona, namacalna zawartosć.
Dopuszczalna zawartość Tekst lub treść osadzona.
Lub (w WHATWG HTML): Jeżeli rodzic jest elementem <dl>: jednego lub więcej elementów <dt>, po których następuje jeden lub więcej elementów <dd>, opcjonalnie zmieszanych z elementami <script> i <template>.
Pominięcie znacznika Brak, zarówno znacznik początku, jak i końca jest obowiązkowy.
Dozwoleni rodzice  Każdy element akceptujący tekst lub treść osadzoną.
Lub (w WHATWG HTML): element <dl>.
Wsparcie ARIA Tak
Interfejs DOM HTMLDivElement

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

Specification Status Comment
HTML Living Standard
The definition of '<div>' in that specification.		 Living Standard No changes since the latest snapshot
HTML5
The definition of '<div>' in that specification.		 Recommendation Obsoleted align
HTML 4.01 Specification
The definition of '<div>' in that specification.		 Recommendation  

Kompatybilność z przeglądarkami

BCD tables only load in the browser

Zobacz także