Autor publikacji: Virtual Patriot - Administrator

div

Data publikacji: Kwiecień 09 2016
Ostatnio edytowano: Wrzesień 07 2020

Zobacz również: w3.org - the div element (HTML5.2)

Przeznaczenie elementu `div`

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

Element div nie posiada żadnego specjalnego znaczenia, lecz nie oznacza to, że element div nie jest ważnym elementem HTML w języku HTML.

Element div może zostać przez nas wykorzystany 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 interesująca nas zawartość opływającą. Dodatkowo w podobny sposób element div może zostać przez nas wykorzystany dla elementu dt oraz elementu dd.

Dodatkowe artykuły związane z elementem `div`

brak

Informacje techniczne 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-1">
      <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".

jako element dziecko elementu dl

Przykładowy Kod HTML

<dl>
  <div>
    <dt>Jeden z kolorów nieba?</dt>
    <dd>Niebieski</dd>
  </div>

  <div>
    <dt>Kolor cytryny</dt>
    <dt>Kolor słońca</dt>
    <dd>Żółty</dd>
  </div>

  <div>
    <dt>Kolory nieba?</dt>
    <dd>Niebieski</dd>
    <dd>Czarny</dd>
  </div>

  <div>
    <dt>Kolor jabłka</dt>
    <dt>Kolor jasny</dt>
    <dd>Zielony</dd>
    <dd>Żółty</dd>
  </div>
</dl>

Kontekstem zewnętrznym przykładowych elementów "div" jest element "dl", dla którego wspomniane elementy "div" są elementami dziećmi, dlatego w tej sytuacji wspomniany kontekst zewnętrzny, czyli element "dl", jest prawidłowym kontekstem zewnętrznym dla poszczególnych elementów "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-1">
      <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".

gdy elementem rodzicem danego elementu div jest element dl, wtedy kontekstem wewnętrznym takiego elementu div musi być dokładnie jedna grupa elementów HTML składająca się z przynajmniej jednego lub więcej elementów dt, po których musi wystąpić przynajmniej jeden lub więcej elementów dd, ponadto ewentualnie po, przed lub pomiędzy wspomnianymi elementami HTML może wystąpić zawartość skryptowa
Przykładowy Kod HTML
```
<dl>
  <div>
    <dt>Jeden z kolorów nieba?</dt>
    <dd>Niebieski</dd>
  </div>
</dl>
```
Kontekstem wewnętrznym przykładowego elementu "div" jest wyłącznie jedna grupa elementów HTML składająca się z elementu "dt" oraz elementu "dd". Ponadto wspomniany element "div" jest elementem dzieckiem elementu "dl", dlatego w tej sytuacji wspomniany kontekst wewnętrzny, czyli element "dt" oraz element "dd", jest prawidłowym kontekstem wewnętrznym dla elementu "div".
Przykładowy Kod HTML
```
<dl>
  <div>
    <dt>Jeden z kolorów nieba?</dt>
    <dd>Niebieski</dd>

    <template id="szablon-1">
      <ins>
        <iframe src="dynamiczna-statystyka-01.html"></iframe>
      </ins>
    </template>
    <script src="skrypt-01.js"></script>
  </div>
</dl>
```
Kontekstem wewnętrznym przykładowego elementu "div" jest wyłącznie jedna grupa elementów HTML składająca się z elementu "dt" oraz elementu "dd" oraz elementy HTML, które należą do kategorii zawartość skryptowa. Ponadto wspomniany element "div" jest elementem dzieckiem elementu "dl", dlatego w tej sytuacji wspomniany kontekst wewnętrzny, czyli element "dt" oraz element "dd", element "template" oraz element "script", jest prawidłowym kontekstem wewnętrznym dla elementu "div".

wymagane elementy dzieci