<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> (en-US) i <template> (en-US). |
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 (en-US) |
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>
(en-US) lub<nav>
(en-US)).
Przykłady
Prosty przykład
<div>
<p>Any kind of content here. Such as
<p>, <table>. 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
- Semantic sectioning elements:
<section>
,<article>
(en-US),<nav>
(en-US),<header>
(en-US),<footer>
(en-US) <span>
element for styling of phrasing content