Co to jest <div> w HTML?

Tag <div> w HTML jest kontenerem (blokiem), który umożliwia grupowanie innych elementów w celu łatwiejszego formatowania i organizowania treści na stronie internetowej. Jest to bardzo uniwersalny element, który nie ma przypisanego stylu domyślnego, co oznacza, że głównie jest wykorzystywany do strukturalnego organizowania treści w HTML. Dzięki zastosowaniu <div> możemy tworzyć sekcje, grupować elementy w obrębie stron i łatwiej nad nimi panować za pomocą CSS i JavaScript.

Jak używać tagu <div>?

Tworzenie prostego kontenera

Tag <div> używa się do tworzenia kontenerów, w których możemy grupować inne elementy, np. tekst, obrazy, formularze itp.

            <div>
              <h1>Witaj na mojej stronie!</h1>
              <p>To jest przykładowy tekst wewnątrz diva.</p>
            </div>

W tym przypadku mamy kontener <div>, który obejmuje nagłówek <h1> i akapit <p>. To pozwala na późniejsze stylizowanie całego bloku za pomocą CSS.

Grupowanie elementów i nadawanie klasy

Zazwyczaj tag <div> jest używany razem z atrybutem class, co pozwala na stylizowanie wielu elementów w tym samym czasie.

            <div class="header">
              <h1>Strona główna</h1>
              <p>Witaj na mojej stronie internetowej!</p>
            </div>
            
            <div class="footer">
              <p>© 2025 Moja Strona. Wszystkie prawa zastrzeżone.</p>
            </div>

Tutaj mamy dwa kontenery <div>, jeden z klasą header, a drugi z klasą footer. Możemy teraz użyć CSS, aby stylizować te sekcje oddzielnie.

Div z użyciem identyfikatora (id)

Zamiast klasy, możemy przypisać do <div> atrybut id, który powinien być unikalny w obrębie strony. Służy to głównie do selekcjonowania elementów za pomocą JavaScript.

            <div id="main-content">
              <h2>Najważniejsza treść</h2>
              <p>Tu znajduje się najważniejszy tekst na stronie.</p>
            </div>

Dzięki temu możemy łatwo odnosić się do tego kontenera za pomocą JavaScript lub CSS, używając selektora #main-content.

Zagnieżdżanie divów

Możesz tworzyć divy wewnątrz innych divów, co pozwala na bardziej złożoną strukturę strony.

            <div class="container">
              <div class="left-column">
                <h2>Lewy panel</h2>
                <p>Treść w lewym panelu.</p>
              </div>
              <div class="right-column">
                <h2>Prawy panel</h2>
                <p>Treść w prawym panelu.</p>
              </div>
            </div>

Tutaj mamy kontener <div class="container">, który zawiera dwa zagnieżdżone divy: <div class="left-column"> i <div class="right-column">. To pozwala na tworzenie rozkładów, np. dwóch kolumn na stronie.

Wyśrodkowanie zawartości za pomocą <div>

Możesz używać divów do centrowania elementów na stronie. Na przykład, aby wyśrodkować element blokowy, możemy ustawić marginesy.

            <div class="centered">
              <h1>Witaj w wyśrodkowanej sekcji!</h1>
            </div>
          
            <style>
              .centered {
                width: 50%;
                margin: 0 auto;
                text-align: center;
              }
            </style>

Dzięki użyciu margin: 0 auto; element wewnątrz diva zostanie wyśrodkowany w poziomie.

Przydatne atrybuty w tagu <div>:

Przykład z pełnym kodem CSS i HTML:

            <!DOCTYPE html>
            <html lang="pl">
            <head>
              <meta charset="UTF-8">
              <meta name="viewport" content="width=device-width, initial-scale=1.0">
              <title>Przykład z div</title>
              <style>
                .container {
                  display: flex;
                  justify-content: space-between;
                  padding: 20px;
                }
                .left-column, .right-column {
                  width: 45%;
                  background-color: #f4f4f4;
                  padding: 10px;
                  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
                }
              </style>
            </head>
            <body>
          
            <div class="container">
              <div class="left-column">
                <h2>Leva Kolumna</h2>
                <p>To jest przykładowa treść w lewej kolumnie.</p>
              </div>
              <div class="right-column">
                <h2>Prawa Kolumna</h2>
                <p>To jest przykładowa treść w prawej kolumnie.</p>
              </div>
            </div>
          
            </body>
            </html>

Divy są niezwykle przydatnym narzędziem w HTML do tworzenia elastycznych i łatwych do stylizowania układów stron internetowych.