Dokumentacja HTML z przykładami: Div

Q: Jak ustawić dwa divy obok siebie?

Otocz je nadrzędnym divem i nadaj mu display: flex. Dzieci ustawią się wtedy w rzędzie. Dodaj gap dla odstępu między nimi i flex: 1 na dzieciach, żeby dzieliły szerokość po równo.

Q: Używać div czy section?

Używaj , , , , lub , gdy treść pełni taką rolę, bo rozumieją je czytniki ekranu i wyszukiwarki. wybieraj, gdy potrzebujesz tylko pudełka do stylowania lub układu.

Do czego służy znacznik div

<div> (skrót od division, czyli podział) to ogólny kontener. Grupuje elementy, żeby można je było stylizować, pozycjonować lub obsługiwać skryptem jako jedną całość. Sam z siebie nie wygląda jak nic: bez marginesu, bez obramowania, bez specjalnej czcionki. To element blokowy, więc zaczyna się w nowej linii i rozciąga na całą dostępną szerokość.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>div</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    div { border: 2px dashed #2563eb; padding: 8px; margin-bottom: 8px; }
  </style>
</head>
<body>
  <div>
    <h2>A group</h2>
    <p>The dashed border shows the div around the heading and this paragraph.</p>
  </div>
  <div>A second div starts on a new line.</div>
</body>
</html>

Usuń linię z border w stylach, a divy staną się niewidoczne: tak wygląda div domyślnie. Wszystko, co robi wizualnie, pochodzi z CSS.

div class i id

Div zwykle dostaje class, czyli nazwę, w którą celuje twój CSS. Divy z tą samą klasą mają ten sam styl:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>div class</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; background: #f3f4f6; }
    .card { background: white; border: 1px solid #e5e7eb; border-radius: 10px; padding: 16px; margin-bottom: 12px; }
    .card h3 { margin: 0 0 4px; }
    .card.highlight { border-color: #2563eb; box-shadow: 0 0 0 3px #bfdbfe; }
  </style>
</head>
<body>
  <div class="card">
    <h3>Basic</h3>
    <p>class="card"</p>
  </div>
  <div class="card highlight" id="pro">
    <h3>Pro</h3>
    <p>class="card highlight" and id="pro"</p>
  </div>
</body>
</html>

.card stylizuje oba pudełka, a .card.highlight dodaje niebieskie obramowanie divowi, który ma obie klasy. Używaj id, gdy musisz wskazać jeden konkretny div, na przykład jako cel linku (href="#pro"). Strona o atrybutach szczegółowo porównuje class i id.

Divy obok siebie

Divy są blokami, więc układają się jeden pod drugim. Aby ustawić je w rzędzie, zrób z ich rodzica kontener flex:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Divs side by side</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    .row { display: flex; gap: 12px; }
    .col { flex: 1; padding: 12px; border-radius: 8px; background: #e5e7eb; }
    .col.wide { flex: 2; background: #dbeafe; }
  </style>
</head>
<body>
  <div class="row">
    <div class="col">One</div>
    <div class="col wide">Two (twice as wide)</div>
    <div class="col">Three</div>
  </div>
</body>
</html>

display: flex na .row ustawia dzieci w linii, gap rozsuwa je, a wartości flex dzielą szerokość (tutaj 1 : 2 : 1). Ten wzorzec rodzica i dzieci to najczęstsze użycie divów na prawdziwych stronach. O wyśrodkowaniu diva przeczytasz na stronie jak wyśrodkować diva.

Zagnieżdżanie divów

Divy mogą zawierać inne divy na dowolnej głębokości. Każdy poziom to pudełko w pudełku, co widać, gdy każdemu divowi nadasz obramowanie i trochę paddingu:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Nested divs</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    div { border: 2px solid #2563eb; padding: 10px; }
    .page { background: #eff6ff; }
    .sidebar { background: #fef3c7; border-color: #f59e0b; }
    .content { background: white; margin-top: 8px; }
  </style>
</head>
<body>
  <div class="page">
    .page
    <div class="sidebar">.sidebar</div>
    <div class="content">
      .content
      <div>an inner div</div>
    </div>
  </div>
</body>
</html>

Zagnieżdżaj tak płytko, jak pozwala układ. Każdy dodatkowy wrapper to jeszcze jedno pudełko do przeanalizowania, gdy margines lub szerokość nie działa tak, jak oczekujesz.

div czy znacznik semantyczny?

Div nic nie mówi o swojej treści. HTML ma znaczniki, które tak samo grupują, a przy tym mówią, czym jest grupa:

Zamiast	Użyj	Do czego
`<div class="header">`	`<header>`	Wstęp lub górny pasek strony albo sekcji
`<div class="nav">`	`<nav>`	Blok linków nawigacyjnych
`<div class="main">`	`<main>`	Główna treść, raz na stronę
`<div class="post">`	`<article>`	Samodzielny element: wpis, komentarz, karta produktu
`<div class="footer">`	`<footer>`	Stopka strony lub sekcji

Te znaczniki wyglądają dokładnie jak div, dopóki ich nie wystylizujesz, ale czytniki ekranu je ogłaszają i pozwalają między nimi przeskakiwać, a wyszukiwarki odczytują strukturę. Diva używaj do pudełek, które istnieją tylko dla układu lub stylu, jak wrapper .row powyżej. Pełny zestaw opisuje strona semantyczny HTML.

Div to nie przycisk

Div z obsługą kliknięcia wygląda na klikalny dla użytkownika myszy, ale użytkownik klawiatury nie dojdzie do niego klawiszem Tab ani nie naciśnie go Enterem, a czytnik ekranu nie ogłosi go jako przycisku:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>div vs button</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .fake, button { display: inline-block; padding: 8px 14px; border-radius: 6px; border: 0; background: #2563eb; color: white; font: inherit; cursor: pointer; margin: 4px; }
  </style>
</head>
<body>
  <div class="fake" onclick="document.getElementById('out').textContent = 'div clicked'">div</div>
  <button onclick="document.getElementById('out').textContent = 'button clicked'">button</button>
  <p id="out">Click the preview, then press Tab: only the button gets focus.</p>
</body>
</html>

Do akcji używaj <button>, a do nawigacji <a href>. Oba mogą przyjąć fokus i od razu działają z klawiaturą.

Częste błędy

Div wewnątrz <p>. Akapit zamyka się przed divem. Zrób z diva element zewnętrzny albo użyj <span> w akapicie.
Zupa z divów. Strona zbudowana z samych divów nie ma struktury dla czytników ekranu. Zamień divy na <header>, <nav>, <main> i <footer> tam, gdzie pasują.
Klikalne divy. Zamiast nich użyj <button> lub linku.
Oczekiwanie, że div będzie tak szeroki jak jego tekst. Div zajmuje całą szerokość. Użyj display: inline-block, width: fit-content albo <span>, jeśli ma się zwężać.
To samo id na kilku divach. Do wszystkiego, co się powtarza, używaj klasy.

Najczęściej zadawane pytania

Co to jest div w HTML?

<div> to ogólny kontener. Grupuje inne elementy, żeby można je było razem stylizować lub pozycjonować, i nie ma własnego znaczenia: przeglądarki wyświetlają go jako blok, który zaczyna się w nowej linii i zajmuje całą dostępną szerokość.

Co oznacza div class?

<div class="card"> to div z atrybutem class. Klasa to nazwa, której CSS używa do stylowania (.card { ... }), a JavaScript do wyszukiwania. Wiele divów może mieć tę samą klasę, a jeden div może mieć kilka: class="card featured".

Jak ustawić dwa divy obok siebie?

Otocz je nadrzędnym divem i nadaj mu display: flex. Dzieci ustawią się wtedy w rzędzie. Dodaj gap dla odstępu między nimi i flex: 1 na dzieciach, żeby dzieliły szerokość po równo.

Używać div czy section?

Używaj <section>, <header>, <nav>, <main>, <article> lub <footer>, gdy treść pełni taką rolę, bo rozumieją je czytniki ekranu i wyszukiwarki. <div> wybieraj, gdy potrzebujesz tylko pudełka do stylowania lub układu.

Czy mogę umieścić div w znaczniku p?

Nie. Akapit może zawierać tylko treść liniową. Przeglądarka zamyka <p>, gdy tylko zobaczy <div>, co psuje style. Użyj diva jako elementu zewnętrznego albo <span> wewnątrz akapitu.

Powiązane zagadnienia