Ostatnio edytowany:

display

Autor: Virtual Patriot

Opis właściwości display

Za pomocą właściwości display możemy określić typ interesującego nas elementu HTML.

Typ elementu HTML ma wpływ między innymi na:

  • sposób układania się elementu HTML względem sąsiadujących elementów HTML lub tekstu
  • możliwość reagowania elementu HTML na poszczególne właściwości CSS

Typami elementu HTML, na które najczęściej natrafiamy są:

Dodatkowe techniczne informacje o właściwości display

przeznaczenie

element HTML każdego typu

dziedziczenie

nie

wartość initial

inline

wyjątki initial
animowanie

nie (animacja nieciągła)

Interpretacja właściwości display

Firefox

tak

Google Chrome

tak

Nie interpretuje wartości ruby, ruby-base, ruby-text oraz ruby-text-container.

Safari

tak

Nie interpretuje wartości ruby, ruby-base, ruby-text oraz ruby-text-container.

Opera

tak

Nie interpretuje wartości ruby, ruby-base, ruby-text oraz ruby-text-container.

Internet Explorer

tak

Interpretuje wartość table, inline-table, table-caption, table-column-group, table-column, table-header-group, table-row-group, table-footer-group, table-row oraz table-cell, lecz od wersji "8".

Nie interpretuje wartości flex, inline-flex, ruby, ruby-base, ruby-text oraz ruby-text-container.

Edge

tak

Nie interpretuje wartości ruby, ruby-base, ruby-text oraz ruby-text-container.

Opis wartości właściwości display

inline

Opis

Wartość inline jest domyślną wartością właściwości display.

Wartość inline właściwości display sprawia, że element HTML staje się elementem HTML typu inline.

Główną rolą typu inline jest umożliwienie elementowi HTML występowanie na poziomie tekstu. Wspomnianą rolę posiadają również elementy HTML następującego typu: inline-block, inline-table, inline-flex, ruby, ruby-base, ruby-text lub ruby-text-container.

Cechy elementu HTML typu inline

  • sąsiadujące w kodzie HTML elementy HTML typu inline po wyświetleniu w oknie przeglądarki internetowej układają się w poziomie jeden obok drugiego
  • element HTML typu inline jest traktowany przez przeglądarkę internetową jako element HTML występujący na poziomie tekstu, dlatego element HTML typu inline układa się tak samo jak tekst elementu HTML
  • element HTML typu inline posiada tylko jeden wiersz na treść, lecz gdy jest to konieczne wspomniany wiersz może zostać przełamany do następnego wiersza elementu rodzica

Przykład

  display:inline;
przykładowy tekst przed elementem "div"
przykładowy tekst w elemencie "div"
przykładowy tekst pomiędzy elementami "div"
ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych
przykładowy tekst po elemencie "div"

Przykładowe elementy "div" stały się elementami HTML typu "inline", ponieważ do wspomnianych elementów "div" została dodana właściwość "display" wraz z wartością "inline".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:1.3em;
        font-family:Helvetica, sans-serif;
      }

      div {
        display:inline;
        background-color:#CBFFFF;
      }
    </style>
  </head>

  <body>

    przykładowy tekst przed elementem "div"
    <div>przykładowy tekst w elemencie "div"</div>
    przykładowy tekst pomiędzy elementami "div"
    <div>ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych</div>
    przykładowy tekst po elemencie "div"

  </body>
</html>

block

Opis

Za pomocą wartości block właściwości display możemy sprawić, że interesujący nas element HTML stanie się elementem HTML typu block.

Główną rolą typu block jest umożliwienie elementowi HTML tworzenie bloku treści. Wspomnianą rolę posiadają również elementy HTML następującego typu: inline-block, list-item, table, inline-table, table-caption, table-header-group, table-row-group, table-footer-group, table-row, table-cell, flex, inline-flex, jak również elementy dzieci elementu HTML typu flex oraz elementy dzieci elementu HTML typu inline-flex.

Cechy elementu HTML typu block

  • kolejno występujące w kodzie HTML elementy HTML typu block po wyświetleniu w oknie przeglądarki internetowej układają się w pionie jeden pod drugim względem pozostałych kolejno występujących w kodzie HTML elementów HTML jakiegokolwiek typu czy też sąsiadującego tekstu
  • element HTML typu block tworzy blok treści, który gdy jest to konieczne może składać się z wielu wierszy wypełnionych treścią

Przykład

  display:block;
przykładowy tekst przed elementem "div"
przykładowy tekst w elemencie "div"
przykładowy tekst pomiędzy elementami "div"
ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych
przykładowy tekst po elemencie "div"

Przykładowe elementy "div" stały się elementami HTML typu "block", ponieważ do wspomnianych elementów "div" została dodana właściwość "display" wraz z wartością "block".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:1.3em;
        font-family:Helvetica, sans-serif;
      }

      div {
        display:block;
        background-color:#CBFFFF;
      }
    </style>
  </head>

  <body>

    przykładowy tekst przed elementem "div"
    <div>przykładowy tekst w elemencie "div"</div>
    przykładowy tekst pomiędzy elementami "div"
    <div>ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych</div>
    przykładowy tekst po elemencie "div"

  </body>
</html>

none

Opis

Za pomocą wartości none właściwości display możemy sprawić, że interesujący nas element HTML stanie się elementem HTML typu none. Element HTML typu none istnieje w kodzie HTML, lecz element HTML typu none nie jest wyświetlany w oknie przeglądarki internetowej.

Przykład

  display:none;
przykładowy tekst przed elementem "div"
przykładowy tekst w elemencie "div"
przykładowy tekst pomiędzy elementami "div"
ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych
przykładowy tekst po elemencie "div"

Przykładowe elementy "div" stały się elementami HTML typu "none", ponieważ do wspomnianych elementów "div" została dodana właściwość "display" wraz z wartością "none".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:1.3em;
        font-family:Helvetica, sans-serif;
      }

      div {
        display:none;
        background-color:#CBFFFF;
      }
    </style>
  </head>

  <body>

    przykładowy tekst przed elementem "div"
    <div>przykładowy tekst w elemencie "div"</div>
    przykładowy tekst pomiędzy elementami "div"
    <div>ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych</div>
    przykładowy tekst po elemencie "div"

  </body>
</html>

inline-block

Opis

Za pomocą wartości inline-block właściwości display możemy sprawić, że interesujący nas element HTML stanie się elementem HTML typu inline-block.

Cechy elementu HTML typu inline-block

  • sąsiadujące w kodzie HTML elementy HTML typu inline-block po wyświetleniu w oknie przeglądarki internetowej układają się w poziomie jeden obok drugiego
  • element HTML typu inline-block tworzy występujący na poziomie tekstu blok treści, który gdy jest to konieczne może składać się z wielu wierszy wypełnionych treścią

Przykład

  display:inline-block;
przykładowy tekst przed elementem "div"
przykładowy tekst w elemencie "div"
przykładowy tekst pomiędzy elementami "div"
ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych
przykładowy tekst po elemencie "div"

Przykładowe elementy "div" stały się elementami HTML typu "inline-block", ponieważ do wspomnianych elementów "div" została dodana właściwość "display" wraz z wartością "inline-block".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:1.3em;
        font-family:Helvetica, sans-serif;
      }

      div {
        display:inline-block;
        background-color:#CBFFFF;
      }
    </style>
  </head>

  <body>

    przykładowy tekst przed elementem "div"
    <div>przykładowy tekst w elemencie "div"</div>
    przykładowy tekst pomiędzy elementami "div"
    <div>ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych</div>
    przykładowy tekst po elemencie "div"

  </body>
</html>

list-item

Opis

Za pomocą wartości list-item właściwości display możemy sprawić, że interesujący nas element HTML stanie się elementem HTML typu list-item.

Cechy elementu HTML typu list-item

  • kolejno występujące w kodzie HTML elementy HTML typu list-item po wyświetleniu w oknie przeglądarki internetowej układają się w pionie jeden pod drugim względem pozostałych kolejno występujących w kodzie HTML elementów HTML jakiegokolwiek typu czy też sąsiadującego tekstu
  • element HTML typu list-item tworzy blok treści, który gdy jest to konieczne może składać się z wielu wierszy wypełnionych treścią

Pierwotnym elementem HTML typu list-item jest element li.

<ol>
  <li><!-- pierwotny element HTML typu LIST-ITEM -->
    pierwszy przedmiot listy HTML
  </li>

  <li><!-- pierwotny element HTML typu LIST-ITEM -->
    drugi przedmiot listy HTML
  </li>

  <li><!-- pierwotny element HTML typu LIST-ITEM -->
    trzeci przedmiot listy HTML
  </li>
</ol>

Przykład

  display:list-item;
przykładowy tekst przed elementem "div"
przykładowy tekst w elemencie "div"
przykładowy tekst pomiędzy elementami "div"
ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych
przykładowy tekst po elemencie "div"

Przykładowe elementy "div" stały się elementami HTML typu "list-item", ponieważ do wspomnianych elementów "div" została dodana właściwość "display" wraz z wartością "list-item".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:1.3em;
        font-family:Helvetica, sans-serif;
      }

      div {
        display:list-item;
        background-color:#CBFFFF;
      }
    </style>
  </head>

  <body>

    przykładowy tekst przed elementem "div"
    <div>przykładowy tekst w elemencie "div"</div>
    przykładowy tekst pomiędzy elementami "div"
    <div>ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych</div>
    przykładowy tekst po elemencie "div"

  </body>
</html>

table

Opis

Za pomocą wartości table właściwości display możemy sprawić, że interesujący nas element HTML stanie się elementem HTML typu table.

Cechy elementu HTML typu table

  • kolejno występujące w kodzie HTML elementy HTML typu table po wyświetleniu w oknie przeglądarki internetowej układają się w pionie jeden pod drugim względem pozostałych kolejno występujących w kodzie HTML elementów HTML jakiegokolwiek typu czy też sąsiadującego tekstu
  • element HTML typu table tworzy blok treści, który gdy jest to konieczne może składać się z wielu wierszy wypełnionych treścią

Pierwotnym elementem HTML typu table jest element table.

<table><!-- pierwotny element HTML typu TABLE -->
  <caption>
    Przykładowa tabela HTML
  </caption>

  <colgroup>
    <col>
    <col>
    <col>
  </colgroup>

  <thead>
    <tr>
      <th>komórka - 1</th>
      <th>komórka - 2</th>
      <th>komórka - 3</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>komórka - 4</td>
      <td>komórka - 5</td>
      <td>komórka - 6</td>
    </tr>
  </tbody>

  <tfoot>
    <tr>
      <td>komórka - 7</td>
      <td>komórka - 8</td>
      <td>komórka - 9</td>
    </tr>
  </tfoot>
</table>

Przykład

  display:table;
przykładowy tekst przed elementem "div"
przykładowy tekst w elemencie "div"
przykładowy tekst pomiędzy elementami "div"
ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych
przykładowy tekst po elemencie "div"

Przykładowe elementy "div" stały się elementami HTML typu "table", ponieważ do wspomnianych elementów "div" została dodana właściwość "display" wraz z wartością "table".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:1.3em;
        font-family:Helvetica, sans-serif;
      }

      div {
        display:table;
        background-color:#CBFFFF;
      }
    </style>
  </head>

  <body>

    przykładowy tekst przed elementem "div"
    <div>przykładowy tekst w elemencie "div"</div>
    przykładowy tekst pomiędzy elementami "div"
    <div>ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych</div>
    przykładowy tekst po elemencie "div"

  </body>
</html>

inline-table

Opis

Za pomocą wartości inline-table właściwości display możemy sprawić, że interesujący nas element HTML stanie się elementem HTML typu inline-table.

Cechy elementu HTML typu inline-table

  • sąsiadujące w kodzie HTML elementy HTML typu inline-table po wyświetleniu w oknie przeglądarki internetowej układają się w poziomie jeden obok drugiego
  • element HTML typu inline-table tworzy występujący na poziomie tekstu blok treści, który gdy jest to konieczne może składać się z wielu wierszy wypełnionych treścią

Przykład

  display:inline-table;
przykładowy tekst przed elementem "div"
przykładowy tekst w elemencie "div"
przykładowy tekst pomiędzy elementami "div"
ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych
przykładowy tekst po elemencie "div"

Przykładowe elementy "div" stały się elementami HTML typu "inline-table", ponieważ do wspomnianych elementów "div" została dodana właściwość "display" wraz z wartością "inline-table".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:1.3em;
        font-family:Helvetica, sans-serif;
      }

      div {
        display:inline-table;
        background-color:#CBFFFF;
      }
    </style>
  </head>

  <body>

    przykładowy tekst przed elementem "div"
    <div>przykładowy tekst w elemencie "div"</div>
    przykładowy tekst pomiędzy elementami "div"
    <div>ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych</div>
    przykładowy tekst po elemencie "div"

  </body>
</html>

table-caption

Opis

Za pomocą wartości table-caption właściwości display możemy sprawić, że interesujący nas element HTML stanie się elementem HTML typu table-caption.

Cechy elementu HTML typu table-caption

  • kolejno występujące w kodzie HTML elementy HTML typu table-caption po wyświetleniu w oknie przeglądarki internetowej układają się w pionie jeden pod drugim względem pozostałych kolejno występujących w kodzie HTML elementów HTML jakiegokolwiek typu czy też sąsiadującego tekstu
  • element HTML typu table-caption tworzy blok treści, który gdy jest to konieczne może składać się z wielu wierszy wypełnionych treścią

Pierwotnym elementem HTML typu table-caption jest element caption.

<table>
  <caption><!-- pierwotny element HTML typu CAPTION -->
    Przykładowa tabela HTML
  </caption>

  <colgroup>
    <col>
    <col>
    <col>
  </colgroup>

  <thead>
    <tr>
      <th>komórka - 1</th>
      <th>komórka - 2</th>
      <th>komórka - 3</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>komórka - 4</td>
      <td>komórka - 5</td>
      <td>komórka - 6</td>
    </tr>
  </tbody>

  <tfoot>
    <tr>
      <td>komórka - 7</td>
      <td>komórka - 8</td>
      <td>komórka - 9</td>
    </tr>
  </tfoot>
</table>

Przykład

  display:table-caption;
przykładowy tekst przed elementem "div"
przykładowy tekst w elemencie "div"
przykładowy tekst pomiędzy elementami "div"
ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych
przykładowy tekst po elemencie "div"

Przykładowe elementy "div" stały się elementami HTML typu "table-caption", ponieważ do wspomnianych elementów "div" została dodana właściwość "display" wraz z wartością "table-caption".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:1.3em;
        font-family:Helvetica, sans-serif;
      }

      div {
        display:table-caption;
        background-color:#CBFFFF;
      }
    </style>
  </head>

  <body>

    przykładowy tekst przed elementem "div"
    <div>przykładowy tekst w elemencie "div"</div>
    przykładowy tekst pomiędzy elementami "div"
    <div>ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych</div>
    przykładowy tekst po elemencie "div"

  </body>
</html>

table-column-group

Opis

Za pomocą wartości table-column-group właściwości display możemy sprawić, że interesujący nas element HTML stanie się elementem HTML typu table-column-group. Element HTML typu table-column-group istnieje w kodzie HTML, lecz element HTML typu table-column-group nie jest wyświetlany w oknie przeglądarki internetowej.

Cechy elementu HTML typu table-column-group

  • mimo że element HTML typu table-column-group nie jest wyświetlany w oknie przeglądarki internetowej, element HTML typu table-column-group oddziela w pionie sąsiednie treści od siebie

Pierwotnym elementem HTML typu table-column-group jest element colgroup.

<table>
  <caption>
    Przykładowa tabela HTML
  </caption>

  <colgroup><!-- pierwotny element HTML typu TABLE-COLUMN-GROUP -->
    <col>
    <col>
    <col>
  </colgroup>

  <thead>
    <tr>
      <th>komórka - 1</th>
      <th>komórka - 2</th>
      <th>komórka - 3</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>komórka - 4</td>
      <td>komórka - 5</td>
      <td>komórka - 6</td>
    </tr>
  </tbody>

  <tfoot>
    <tr>
      <td>komórka - 7</td>
      <td>komórka - 8</td>
      <td>komórka - 9</td>
    </tr>
  </tfoot>
</table>

Przykład

  display:table-column-group;
przykładowy tekst przed elementem "div"
przykładowy tekst w elemencie "div"
przykładowy tekst pomiędzy elementami "div"
ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych
przykładowy tekst po elemencie "div"

Przykładowe elementy "div" stały się elementami HTML typu "table-column-group", ponieważ do wspomnianych elementów "div" została dodana właściwość "display" wraz z wartością "table-column-group".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:1.3em;
        font-family:Helvetica, sans-serif;
      }

      div {
        display:table-column-group;
        background-color:#CBFFFF;
      }
    </style>
  </head>

  <body>

    przykładowy tekst przed elementem "div"
    <div>przykładowy tekst w elemencie "div"</div>
    przykładowy tekst pomiędzy elementami "div"
    <div>ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych</div>
    przykładowy tekst po elemencie "div"

  </body>
</html>

table-column

Opis

Za pomocą wartości table-column właściwości display możemy sprawić, że interesujący nas element HTML stanie się elementem HTML typu table-column. Element HTML typu table-column istnieje w kodzie HTML, lecz element HTML typu table-column nie jest wyświetlany w oknie przeglądarki internetowej.

Cechy elementu HTML typu table-column

  • mimo że element HTML typu table-column nie jest wyświetlany w oknie przeglądarki internetowej, element HTML typu table-column oddziela w pionie sąsiednie treści od siebie

Pierwotnym elementem HTML typu table-column jest element col.

<table>
  <caption>
    Przykładowa tabela HTML
  </caption>

  <colgroup>
    <col><!-- pierwotny element HTML typu TABLE-COLUMN -->
    <col><!-- pierwotny element HTML typu TABLE-COLUMN -->
    <col><!-- pierwotny element HTML typu TABLE-COLUMN -->
  </colgroup>

  <thead>
    <tr>
      <th>komórka - 1</th>
      <th>komórka - 2</th>
      <th>komórka - 3</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>komórka - 4</td>
      <td>komórka - 5</td>
      <td>komórka - 6</td>
    </tr>
  </tbody>

  <tfoot>
    <tr>
      <td>komórka - 7</td>
      <td>komórka - 8</td>
      <td>komórka - 9</td>
    </tr>
  </tfoot>
</table>

Przykład

  display:table-column;
przykładowy tekst przed elementem "div"
przykładowy tekst w elemencie "div"
przykładowy tekst pomiędzy elementami "div"
ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych
przykładowy tekst po elemencie "div"

Przykładowe elementy "div" stały się elementami HTML typu "table-column", ponieważ do wspomnianych elementów "div" została dodana właściwość "display" wraz z wartością "table-column".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:1.3em;
        font-family:Helvetica, sans-serif;
      }

      div {
        display:table-column;
        background-color:#CBFFFF;
      }
    </style>
  </head>

  <body>

    przykładowy tekst przed elementem "div"
    <div>przykładowy tekst w elemencie "div"</div>
    przykładowy tekst pomiędzy elementami "div"
    <div>ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych</div>
    przykładowy tekst po elemencie "div"

  </body>
</html>

table-header-group

Opis

Za pomocą wartości table-header-group właściwości display możemy sprawić, że interesujący nas element HTML stanie się elementem HTML typu table-header-group.

Cechy elementu HTML typu table-header-group

  • kolejno występujące w kodzie HTML elementy HTML typu table-header-group po wyświetleniu w oknie przeglądarki internetowej układają się w pionie jeden pod drugim względem pozostałych kolejno występujących w kodzie HTML elementów HTML jakiegokolwiek typu czy też sąsiadującego tekstu
  • element HTML typu table-header-group tworzy blok treści, który gdy jest to konieczne może składać się z wielu wierszy wypełnionych treścią

Pierwotnym elementem HTML typu table-header-group jest element thead.

<table>
  <caption>
    Przykładowa tabela HTML
  </caption>

  <colgroup>
    <col>
    <col>
    <col>
  </colgroup>

  <thead><!-- pierwotny element HTML typu TABLE-HEADER-GROUP -->
    <tr>
      <th>komórka - 1</th>
      <th>komórka - 2</th>
      <th>komórka - 3</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>komórka - 4</td>
      <td>komórka - 5</td>
      <td>komórka - 6</td>
    </tr>
  </tbody>

  <tfoot>
    <tr>
      <td>komórka - 7</td>
      <td>komórka - 8</td>
      <td>komórka - 9</td>
    </tr>
  </tfoot>
</table>

Przykład

  display:table-header-group;
przykładowy tekst przed elementem "div"
przykładowy tekst w elemencie "div"
przykładowy tekst pomiędzy elementami "div"
ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych
przykładowy tekst po elemencie "div"

Przykładowe elementy "div" stały się elementami HTML typu "table-header-group", ponieważ do wspomnianych elementów "div" została dodana właściwość "display" wraz z wartością "table-header-group".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:1.3em;
        font-family:Helvetica, sans-serif;
      }

      div {
        display:table-header-group;
        background-color:#CBFFFF;
      }
    </style>
  </head>

  <body>

    przykładowy tekst przed elementem "div"
    <div>przykładowy tekst w elemencie "div"</div>
    przykładowy tekst pomiędzy elementami "div"
    <div>ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych</div>
    przykładowy tekst po elemencie "div"

  </body>
</html>

table-row-group

Opis

Za pomocą wartości table-row-group właściwości display możemy sprawić, że interesujący nas element HTML stanie się elementem HTML typu table-row-group.

Cechy elementu HTML typu table-row-group

  • kolejno występujące w kodzie HTML elementy HTML typu table-row-group po wyświetleniu w oknie przeglądarki internetowej układają się w pionie jeden pod drugim względem pozostałych kolejno występujących w kodzie HTML elementów HTML jakiegokolwiek typu czy też sąsiadującego tekstu
  • element HTML typu table-row-group tworzy blok treści, który gdy jest to konieczne może składać się z wielu wierszy wypełnionych treścią

Pierwotnym elementem HTML typu table-row-group jest element tbody.

<table>
  <caption>
    Przykładowa tabela HTML
  </caption>

  <colgroup>
    <col>
    <col>
    <col>
  </colgroup>

  <thead>
    <tr>
      <th>komórka - 1</th>
      <th>komórka - 2</th>
      <th>komórka - 3</th>
    </tr>
  </thead>

  <tbody><!-- pierwotny element HTML typu TABLE-ROW-GROUP -->
    <tr>
      <td>komórka - 4</td>
      <td>komórka - 5</td>
      <td>komórka - 6</td>
    </tr>
  </tbody>

  <tfoot>
    <tr>
      <td>komórka - 7</td>
      <td>komórka - 8</td>
      <td>komórka - 9</td>
    </tr>
  </tfoot>
</table>

Przykład

  display:table-row-group;
przykładowy tekst przed elementem "div"
przykładowy tekst w elemencie "div"
przykładowy tekst pomiędzy elementami "div"
ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych
przykładowy tekst po elemencie "div"

Przykładowe elementy "div" stały się elementami HTML typu "table-row-group", ponieważ do wspomnianych elementów "div" została dodana właściwość "display" wraz z wartością "table-row-group".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:1.3em;
        font-family:Helvetica, sans-serif;
      }

      div {
        display:table-row-group;
        background-color:#CBFFFF;
      }
    </style>
  </head>

  <body>

    przykładowy tekst przed elementem "div"
    <div>przykładowy tekst w elemencie "div"</div>
    przykładowy tekst pomiędzy elementami "div"
    <div>ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych</div>
    przykładowy tekst po elemencie "div"

  </body>
</html>

table-row

Opis

Za pomocą wartości table-row właściwości display możemy sprawić, że interesujący nas element HTML stanie się elementem HTML typu table-row.

Cechy elementu HTML typu table-row

  • kolejno występujące w kodzie HTML elementy HTML typu table-row po wyświetleniu w oknie przeglądarki internetowej układają się w pionie jeden pod drugim względem pozostałych kolejno występujących w kodzie HTML elementów HTML jakiegokolwiek typu czy też sąsiadującego tekstu
  • element HTML typu table-row tworzy blok treści, który gdy jest to konieczne może składać się z wielu wierszy wypełnionych treścią

Pierwotnym elementem HTML typu table-row jest element tr.

<table>
  <caption>
    Przykładowa tabela HTML
  </caption>

  <colgroup>
    <col>
    <col>
    <col>
  </colgroup>

  <thead>
    <tr><!-- pierwotny element HTML typu TABLE-ROW -->
      <th>komórka - 1</th>
      <th>komórka - 2</th>
      <th>komórka - 3</th>
    </tr>
  </thead>

  <tbody>
    <tr><!-- pierwotny element HTML typu TABLE-ROW -->
      <td>komórka - 4</td>
      <td>komórka - 5</td>
      <td>komórka - 6</td>
    </tr>
  </tbody>

  <tfoot>
    <tr><!-- pierwotny element HTML typu TABLE-ROW -->
      <td>komórka - 7</td>
      <td>komórka - 8</td>
      <td>komórka - 9</td>
    </tr>
  </tfoot>
</table>

Przykład

  display:table-row;
przykładowy tekst przed elementem "div"
przykładowy tekst w elemencie "div"
przykładowy tekst pomiędzy elementami "div"
ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych
przykładowy tekst po elemencie "div"

Przykładowe elementy "div" stały się elementami HTML typu "table-row", ponieważ do wspomnianych elementów "div" została dodana właściwość "display" wraz z wartością "table-row".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:1.3em;
        font-family:Helvetica, sans-serif;
      }

      div {
        display:table-row;
        background-color:#CBFFFF;
      }
    </style>
  </head>

  <body>

    przykładowy tekst przed elementem "div"
    <div>przykładowy tekst w elemencie "div"</div>
    przykładowy tekst pomiędzy elementami "div"
    <div>ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych</div>
    przykładowy tekst po elemencie "div"

  </body>
</html>

table-cell

Opis

Za pomocą wartości table-cell właściwości display możemy sprawić, że interesujący nas element HTML stanie się elementem HTML typu table-cell.

Cechy elementu HTML typu table-cell

  • kolejno występujące w kodzie HTML elementy HTML typu table-cell po wyświetleniu w oknie przeglądarki internetowej układają się w pionie jeden pod drugim względem pozostałych kolejno występujących w kodzie HTML elementów HTML jakiegokolwiek typu czy też sąsiadującego tekstu
  • element HTML typu table-cell tworzy blok treści, który gdy jest to konieczne może składać się z wielu wierszy wypełnionych treścią

Pierwotnym elementem HTML typu table-cell jest element th oraz element td.

<table>
  <caption>
    Przykładowa tabela HTML
  </caption>

  <colgroup>
    <col>
    <col>
    <col>
  </colgroup>

  <thead>
    <tr>
      <th>komórka - 1</th><!-- pierwotny element HTML typu TABLE-CELL -->
      <th>komórka - 2</th><!-- pierwotny element HTML typu TABLE-CELL -->
      <th>komórka - 3</th><!-- pierwotny element HTML typu TABLE-CELL -->
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>komórka - 4</td><!-- pierwotny element HTML typu TABLE-CELL -->
      <td>komórka - 5</td><!-- pierwotny element HTML typu TABLE-CELL -->
      <td>komórka - 6</td><!-- pierwotny element HTML typu TABLE-CELL -->
    </tr>
  </tbody>

  <tfoot>
    <tr>
      <td>komórka - 7</td><!-- pierwotny element HTML typu TABLE-CELL -->
      <td>komórka - 8</td><!-- pierwotny element HTML typu TABLE-CELL -->
      <td>komórka - 9</td><!-- pierwotny element HTML typu TABLE-CELL -->
    </tr>
  </tfoot>
</table>

Przykład

  display:table-cell;
przykładowy tekst przed elementem "div"
przykładowy tekst w elemencie "div"
przykładowy tekst pomiędzy elementami "div"
ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych
przykładowy tekst po elemencie "div"

Przykładowe elementy "div" stały się elementami HTML typu "table-cell", ponieważ do wspomnianych elementów "div" została dodana właściwość "display" wraz z wartością "table-cell".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:1.3em;
        font-family:Helvetica, sans-serif;
      }

      div {
        display:table-cell;
        background-color:#CBFFFF;
      }
    </style>
  </head>

  <body>

    przykładowy tekst przed elementem "div"
    <div>przykładowy tekst w elemencie "div"</div>
    przykładowy tekst pomiędzy elementami "div"
    <div>ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych</div>
    przykładowy tekst po elemencie "div"

  </body>
</html>

flex

Opis

Za pomocą wartości flex właściwości display możemy sprawić, że interesujący nas element HTML stanie się elementem HTML typu flex.

Cechy elementu HTML typu flex

  • kolejno występujące w kodzie HTML elementy HTML typu flex po wyświetleniu w oknie przeglądarki internetowej układają się w pionie jeden pod drugim względem pozostałych kolejno występujących w kodzie HTML elementów HTML jakiegokolwiek typu czy też sąsiadującego tekstu
  • element HTML typu flex tworzy blok treści, który gdy jest to konieczne może składać się z wielu wierszy wypełnionych treścią
  • domyślnie elementy dzieci elementu HTML typu flex po wyświetleniu w oknie przeglądarki internetowej układają się w jednym wierszu jeden obok drugiego
  • elementy dzieci elementu HTML typu flex zachowują cechy podobne do cech elementu HTML typu block, dzięki czemu między innymi wiemy, na jakie właściwości CSS może reagować dany element dziecko

Przykład

  display:flex;
przykładowy tekst przed elementem "div"
span - 1 span - 2 span - 3
przykładowy tekst pomiędzy elementami "div"
span - 1 span - 2 span - 3
przykładowy tekst po elemencie "div"

Przykładowe elementy "div" stały się elementami HTML typu "flex", ponieważ do wspomnianych elementów "div" została dodana właściwość "display" wraz z wartością "flex".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:1.3em;
        font-family:Helvetica, sans-serif;
      }

      div {
        display:flex;
        background-color:#CBFFFF;
      }

      .dziecko-1 {
        background-color:orange;
      }

      .dziecko-2 {
        background-color:gold;
      }

      .dziecko-3 {
        background-color:yellow;
      }
    </style>
  </head>

  <body>

    przykładowy tekst przed elementem "div"
    <div>
      <span class="dziecko-1">span - 1</span>
      <span class="dziecko-2">span - 2</span>
      <span class="dziecko-3">span - 3</span>
    </div>
    przykładowy tekst pomiędzy elementami "div"
    <div>
      <span class="dziecko-1">span - 1</span>
      <span class="dziecko-2">span - 2</span>
      <span class="dziecko-3">span - 3</span>
    </div>
    przykładowy tekst po elemencie "div"

  </body>
</html>

inline-flex

Opis

Za pomocą wartości inline-flex właściwości display możemy sprawić, że interesujący nas element HTML stanie się elementem HTML typu inline-flex.

Cechy elementu HTML typu inline-flex

  • sąsiadujące w kodzie HTML elementy HTML typu inline-flex po wyświetleniu w oknie przeglądarki internetowej układają się w poziomie jeden obok drugiego
  • element HTML typu inline-flex tworzy występujący na poziomie tekstu blok treści, który gdy jest to konieczne może składać się z wielu wierszy wypełnionych treścią
  • domyślnie elementy dzieci elementu HTML typu inline-flex po wyświetleniu w oknie przeglądarki internetowej układają się w jednym wierszu jeden obok drugiego
  • elementy dzieci elementu HTML typu inline-flex zachowują cechy podobne do cech elementu HTML typu block, dzięki czemu między innymi wiemy, na jakie właściwości CSS może reagować dany element dziecko

Przykład

  display:inline-flex;
przykładowy tekst przed elementem "div"
span - 1 span - 2 span - 3
przykładowy tekst pomiędzy elementami "div"
span - 1 span - 2 span - 3
przykładowy tekst po elemencie "div"

Przykładowe elementy "div" stały się elementami HTML typu "inline-flex", ponieważ do wspomnianych elementów "div" została dodana właściwość "display" wraz z wartością "inline-flex".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:1.3em;
        font-family:Helvetica, sans-serif;
      }

      div {
        display:inline-flex;
        background-color:#CBFFFF;
      }

      .dziecko-1 {
        background-color:orange;
      }

      .dziecko-2 {
        background-color:gold;
      }

      .dziecko-3 {
        background-color:yellow;
      }
    </style>
  </head>

  <body>

    przykładowy tekst przed elementem "div"
    <div>
      <span class="dziecko-1">span - 1</span>
      <span class="dziecko-2">span - 2</span>
      <span class="dziecko-3">span - 3</span>
    </div>
    przykładowy tekst pomiędzy elementami "div"
    <div>
      <span class="dziecko-1">span - 1</span>
      <span class="dziecko-2">span - 2</span>
      <span class="dziecko-3">span - 3</span>
    </div>
    przykładowy tekst po elemencie "div"

  </body>
</html>

ruby

Opis

Za pomocą wartości ruby właściwości display możemy sprawić, że interesujący nas element HTML stanie się elementem HTML typu ruby.

Cechy elementu HTML typu ruby

  • sąsiadujące w kodzie HTML elementy HTML typu ruby po wyświetleniu w oknie przeglądarki internetowej układają się w poziomie jeden obok drugiego
  • element HTML typu ruby jest traktowany przez przeglądarkę internetową jako element HTML występujący na poziomie tekstu, dlatego element HTML typu ruby układa się tak samo jak tekst elementu HTML
  • element HTML typu ruby posiada tylko jeden wiersz na treść, który dodatkowo nie może zostać przełamany

Pierwotnym elementem HTML typu ruby jest element ruby.

<ruby><!-- pierwotny element HTML typu RUBY -->
  <rb>日本語</rb>
  <rt>nihongo</rt>
  <rtc>Japanese</rtc>
</ruby>

Przykład

  display:ruby;
przykładowy tekst przed elementem "div"
przykładowy tekst w elemencie "div"
przykładowy tekst pomiędzy elementami "div"
ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych
przykładowy tekst po elemencie "div"

Przykładowe elementy "div" stały się elementami HTML typu "ruby", ponieważ do wspomnianych elementów "div" została dodana właściwość "display" wraz z wartością "ruby".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:1.3em;
        font-family:Helvetica, sans-serif;
      }

      div {
        display:ruby;
        background-color:#CBFFFF;
      }
    </style>
  </head>

  <body>

    przykładowy tekst przed elementem "div"
    <div>przykładowy tekst w elemencie "div"</div>
    przykładowy tekst pomiędzy elementami "div"
    <div>ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych</div>
    przykładowy tekst po elemencie "div"

  </body>
</html>

ruby-base

Opis

Za pomocą wartości ruby-base właściwości display możemy sprawić, że interesujący nas element HTML stanie się elementem HTML typu ruby-base.

Cechy elementu HTML typu ruby-base

  • sąsiadujące w kodzie HTML elementy HTML typu ruby-base po wyświetleniu w oknie przeglądarki internetowej układają się w poziomie jeden obok drugiego
  • element HTML typu ruby-base jest traktowany przez przeglądarkę internetową jako element HTML występujący na poziomie tekstu, dlatego element HTML typu ruby-base układa się tak samo jak tekst elementu HTML
  • element HTML typu ruby-base posiada tylko jeden wiersz na treść, który dodatkowo nie może zostać przełamany

Pierwotnym elementem HTML typu ruby-base jest element rb.

<ruby>
  <rb>日本語</rb><!-- pierwotny element HTML typu RUBY-BASE -->
  <rt>nihongo</rt>
  <rtc>Japanese</rtc>
</ruby>

Przykład

  display:ruby-base;
przykładowy tekst przed elementem "div"
przykładowy tekst w elemencie "div"
przykładowy tekst pomiędzy elementami "div"
ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych
przykładowy tekst po elemencie "div"

Przykładowe elementy "div" stały się elementami HTML typu "ruby-base", ponieważ do wspomnianych elementów "div" została dodana właściwość "display" wraz z wartością "ruby-base".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:1.3em;
        font-family:Helvetica, sans-serif;
      }

      div {
        display:ruby-base;
        background-color:#CBFFFF;
      }
    </style>
  </head>

  <body>

    przykładowy tekst przed elementem "div"
    <div>przykładowy tekst w elemencie "div"</div>
    przykładowy tekst pomiędzy elementami "div"
    <div>ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych</div>
    przykładowy tekst po elemencie "div"

  </body>
</html>

ruby-text

Opis

Za pomocą wartości ruby-text właściwości display możemy sprawić, że interesujący nas element HTML stanie się elementem HTML typu ruby-text.

Cechy elementu HTML typu ruby-text

  • sąsiadujące w kodzie HTML elementy HTML typu ruby-text po wyświetleniu w oknie przeglądarki internetowej układają się w poziomie jeden obok drugiego
  • element HTML typu ruby-text układa się nad sąsiadującym tekstem oraz ewentualnie nad sąsiadującym przed danym elementem HTML typu ruby-text elementem HTML typu ruby-text-container
  • element HTML typu ruby-text jest traktowany przez przeglądarkę internetową jako element HTML występujący na poziomie tekstu
  • element HTML typu ruby-text posiada tylko jeden wiersz na treść, który dodatkowo nie może zostać przełamany

Pierwotnym elementem HTML typu ruby-text jest element rt.

<ruby>
  <rb>日本語</rb>
  <rt>nihongo</rt><!-- pierwotny element HTML typu RUBY-TEXT -->
  <rtc>Japanese</rtc>
</ruby>

Przykład

  display:ruby-text;
przykładowy tekst przed elementem "div"
przykładowy tekst w elemencie "div"
przykładowy tekst pomiędzy elementami "div"
ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych
przykładowy tekst po elemencie "div"

Przykładowe elementy "div" stały się elementami HTML typu "ruby-text", ponieważ do wspomnianych elementów "div" została dodana właściwość "display" wraz z wartością "ruby-text".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:1.3em;
        font-family:Helvetica, sans-serif;
      }

      div {
        display:ruby-text;
        background-color:#CBFFFF;
      }
    </style>
  </head>

  <body>

    przykładowy tekst przed elementem "div"
    <div>przykładowy tekst w elemencie "div"</div>
    przykładowy tekst pomiędzy elementami "div"
    <div>ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych</div>
    przykładowy tekst po elemencie "div"

  </body>
</html>

ruby-text-container

Opis

Za pomocą wartości ruby-text-container właściwości display możemy sprawić, że interesujący nas element HTML stanie się elementem HTML typu ruby-text-container.

Cechy elementu HTML typu ruby-text-container

  • sąsiadujące w kodzie HTML elementy HTML typu ruby-text-container po wyświetleniu w oknie przeglądarki internetowej układają się w poziomie jeden obok drugiego
  • element HTML typu ruby-text-container jest traktowany przez przeglądarkę internetową jako element HTML występujący na poziomie tekstu
  • element HTML typu ruby-text-container układa się nad sąsiadującym tekstem oraz ewentualnie nad sąsiadującym przed danym elementem HTML typu ruby-text-container elementem HTML typu ruby-text
  • element HTML typu ruby-text-container posiada tylko jeden wiersz na treść, który dodatkowo nie może zostać przełamany

Pierwotnym elementem HTML typu ruby-text-container jest element rtc.

<ruby>
  <rb>日本語</rb>
  <rt>nihongo</rt>
  <rtc>Japanese</rtc><!-- pierwotny element HTML typu RUBY-TEXT-CONTAINER -->
</ruby>

Przykład

  display:ruby-text-container;
przykładowy tekst przed elementem "div"
przykładowy tekst w elemencie "div"
przykładowy tekst pomiędzy elementami "div"
ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych
przykładowy tekst po elemencie "div"

Przykładowe elementy "div" stały się elementami HTML typu "ruby-text-container", ponieważ do wspomnianych elementów "div" została dodana właściwość "display" wraz z wartością "ruby-text-container".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:1.3em;
        font-family:Helvetica, sans-serif;
      }

      div {
        display:ruby-text-container;
        background-color:#CBFFFF;
      }
    </style>
  </head>

  <body>

    przykładowy tekst przed elementem "div"
    <div>przykładowy tekst w elemencie "div"</div>
    przykładowy tekst pomiędzy elementami "div"
    <div>ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych</div>
    przykładowy tekst po elemencie "div"

  </body>
</html>