<div>
Uniwersalny kontener blokowy bez znaczenia, do grupowania elementów i stylowania.
- Wyświetlanie
- block
- Znacznik zamykający
- Wymagany
- Dozwolona zawartość
- Treść przepływu (flow content)
Przykład
#<div style="display: flex; gap: 12px; align-items: center;">
<div class="box">JS</div>
<div>
<strong>Kurs JavaScript</strong><br>
<small>20 lekcji · 6 godzin nauki</small>
</div>
</div>Definicja i zastosowanie
#Element <div> (od angielskiego division, podział) to uniwersalny kontener blokowy. Grupuje elementy, żeby można je było razem ostylować, ułożyć za pomocą Flexboxa lub Grida albo znaleźć w JavaScripcie. Dla przeglądarki, czytników ekranu i wyszukiwarek nie niesie żadnego znaczenia.
Zanim pojawił się HTML5, całe układy stron budowano z elementów <div> z klasami w rodzaju header czy menu. Dziś do tych zadań są elementy semantyczne: <header>, <nav>, <main>, <article>, <section>, <aside> i <footer>. Dobra zasada: najpierw poszukaj elementu, który opisuje treść, a po <div> sięgnij, gdy żaden nie pasuje.
<div> może zawierać dowolną treść przepływu. Wolno nim też grupować pary <dt> i <dd> w liście definicji <dl>, na przykład żeby ułożyć je w kafelki.
Nie rób z <div> przycisku. <div> z atrybutem onclick nie jest dostępny z klawiatury, a czytnik ekranu nie wie, że da się go kliknąć. Do akcji służy <button>.
Składnia
#<div>
…
</div>Atrybuty
#Ten element nie ma własnych atrybutów. Obsługuje atrybuty globalne, takie jak class, id czy hidden.
Więcej przykładów
#<div class="stage" style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;">
<div class="box">HTML</div>
<div class="box">CSS</div>
<div class="box">JS</div>
<div class="box">React</div>
<div class="box">Python</div>
<div class="box">SQL</div>
</div><div class="header">
<div class="menu">…</div>
</div>
<header>
<nav>…</nav>
</header>Oba fragmenty wyglądają tak samo, ale drugi mówi przeglądarce i czytnikom ekranu, czym jest każda część strony.
Domyślny CSS
#Większość przeglądarek wyświetla ten element z takimi stylami domyślnymi:
div {
display: block;
}Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Najpierw sprawdź, czy nie pasuje element semantyczny, np.
<section>,<article>albo<nav>. - Nie twórz klikalnych
<div>. Przycisk to<button>, a odnośnik to<a>. - Unikaj zbędnych warstw. Każdy
<div>bez konkretnego zadania utrudnia czytanie kodu i stylowanie.
Powiązane hasła
#- <span>Uniwersalny kontener liniowy bez znaczenia, do stylowania fragmentu tekstu.
- <section>Tematyczna część dokumentu, zwykle z własnym nagłówkiem.
- <article>Samodzielna, zamknięta treść, którą można przeczytać i udostępnić osobno.
- <main>Główna, unikalna treść strony. Na stronie jest tylko jeden widoczny.
- <p>Akapit tekstu.
Widzisz błąd albo brakuje przykładu? Napisz do nas.