Ostatnio edytowany:

div

Autor: Virtual Patriot

Przeznaczenie elementu div

Element div reprezentuje swoje elementy dzieci reprezentowane przez zawartość opływającą.

Element div może zostać wykorzystany przez nas w sytuacji gdy musimy z jakiegoś powodu umieścić interesującą nas zawartość opływającą w zawartości dodatkowego elementu HTML, a jednocześnie nie chcemy, aby wybrany przez nas do tego celu element HTML posiadał z góry narzucone dodatkowe znaczenie, od którego musiałaby być uzależniona wspomniana zawartość opływającą.

Dodatkowe techniczne informacje o elemencie div

kategoria ogólna
kontekst zewnętrzny
element HTML, który tworzy wewnętrzny kontekst opływający

Przykładowy Kod HTML

<body>
  <h1>Rzeczowy blog o rzeczach</h1>

  <main>
    <article>
      <h2>Mój ulubiony owoc</h2>
      <p>Moim ulubionym owocem jest czereśnia.</p>
    </article>

    <div class="styl">
      <article>
        <h2>Moje ulubione zwierzę</h2>
        <p>Moim ulubionym zwierzęciem jest lew.</p>
      </article>

      <article>
        <h2>Mój ulubiony kwiat</h2>
        <p>Moim ulubionym kwiatem jest róża.</p>
      </article>
    </div>
  </main>
</body>

Kontekstem zewnętrznym przykładowego elementu "div" jest element "main". Wspomniany element "main" jest jednym z elementów HTML, które tworzą wewnętrzny kontekst opływający, dlatego w tej sytuacji wspomniany kontekst zewnętrzny, czyli element "main", jest prawidłowym kontekstem zewnętrznym dla elementu "div".

kontekst wewnętrzny
zawartość opływająca

Przykładowy Kod HTML

<body>
  <h1>Rzeczowy blog o rzeczach</h1>

  <main>
    <article>
      <h2>Mój ulubiony owoc</h2>
      <p>Moim ulubionym owocem jest czereśnia.</p>
    </article>

    <div class="styl">
      <article>
        <h2>Moje ulubione zwierzę</h2>
        <p>Moim ulubionym zwierzęciem jest lew.</p>
      </article>

      <article>
        <h2>Mój ulubiony kwiat</h2>
        <p>Moim ulubionym kwiatem jest róża.</p>
      </article>
    </div>
  </main>
</body>

Kontekstem wewnętrznym przykładowego elementu "div" są wyłącznie elementy HTML, które należą do kategorii zawartość opływająca, dlatego w tej sytuacji wspomniany kontekst wewnętrzny, czyli element "article" oraz element "article", jest prawidłowym kontekstem wewnętrznym dla elementu "div".

wymagane elementy dzieci

brak

wymagane atrybuty

brak

składnia HTML

<div> ... </div>

pominięcie tagu na początku

nigdy

pominięcie tagu na końcu

nigdy

CSS display

block

Dodatkowe domyślne reguły CSS elementu div

div {
  display:block;
}

Interpretacja elementu div

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak

Edge

tak