HTML
Element Div

Wprowadzenie

Składnia

• <div>example div</div>

Zagnieżdżanie

Powszechną praktyką jest umieszczanie wielu <div> wewnątrz innego <div> . Jest to zwykle określane jako „zagnieżdżanie” elementów i pozwala na dalsze dzielenie elementów na podsekcje lub pomaga programistom w stylizacji CSS.

<div class="outer-div"> służy do grupowania dwóch elementów <div class="inner-div"> ; każdy zawiera element <p> .

<div class="outer-div">
  <div class="inner-div">
    <p>This is a paragraph</p>
  </div>
  <div class="inner-div">
    <p>This is another paragraph</p>
  </div>
</div>

To da następujący wynik (style CSS zastosowane dla przejrzystości):

Zagnieżdżanie elementów wbudowanych i blokowych Podczas zagnieżdżania elementów należy pamiętać, że istnieją elementy wbudowane i blokowe. podczas gdy elementy blokowe „dodają podział linii w tle”, co oznacza, że inne elementy zagnieżdżone są automatycznie wyświetlane w następnym wierszu, elementy śródliniowe można domyślnie umieszczać obok siebie

Unikaj głębokiego <div> zagnieżdżania

Głębokie i często używane zagnieżdżone układy kontenerów pokazują zły styl kodowania.

Zaokrąglone rogi lub podobne funkcje często tworzą taki kod HTML. W przypadku większości przeglądarek ostatniej generacji istnieją odpowiedniki CSS3. Spróbuj użyć jak najmniejszej liczby elementów HTML, aby zwiększyć stosunek treści do tagów i zmniejszyć ładowanie strony, co skutkuje lepszym rankingiem w wyszukiwarkach.

sekcja div Element nie powinien być zagnieżdżony głębiej niż 6 warstw.

Podstawowe użycie

Element <div> zwykle sam w sobie nie ma określonego znaczenia semantycznego, po prostu reprezentuje podział, i jest zwykle używany do grupowania i kapsułkowania innych elementów w dokumencie HTML oraz oddzielania ich od innych grup treści. Jako taki, każdy <div> najlepiej opisuje jego zawartość.

<div>
  <p>Hello! This is a paragraph.</p>
</div>

Element div jest zwykle elementem na poziomie bloku , co oznacza, że oddziela blok dokumentu HTML i zajmuje maksymalną szerokość strony. Przeglądarki zazwyczaj mają następującą domyślną regułę CSS:

div {
  display: block;
}

Konsorcjum World Wide Web (W3C) zdecydowanie zachęca do postrzegania elementu div jako elementu ostateczności, gdy żaden inny element nie jest odpowiedni. Zastosowanie bardziej odpowiednich elementów zamiast elementu div prowadzi do lepszej dostępności dla czytelników i łatwiejszej konserwacji dla autorów.

Na przykład post na blogu zostałby oznaczony za pomocą <article> , rozdział za pomocą <section> , pomoce nawigacyjne strony za pomocą <nav> , a grupa formantów formularza za pomocą <fieldset> .

Elementy div mogą być przydatne do celów stylistycznych lub do zawijania wielu akapitów w obrębie sekcji, które mają być opatrzone adnotacjami w podobny sposób.