Ostatnio edytowany:

pre

Autor: Virtual Patriot

Przeznaczenie elementu pre

Element pre reprezentuje zawartość, którą powinna być treść, która ze względu na swoje pochodzenie oraz formę musi zostać zaprezentowana w sposób z góry narzucony przez różne standardy typografii. Zawartością elementu pre może być: kilka wierszy fragmentu kodu komputerowego, poezja, wiersz poetycki, treść w postaci listy, której każdy nowy wiersz rozpoczyna się od określonego znaku, obrazek ASCII-Art itp.

Dodatkowe techniczne informacje o elemencie pre

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

Przykładowy Kod HTML

<figure>
  <pre>
    <code>
      var zmienna1 = 3;
      var zmienna2 = 4;
      var zmienna3 = zmienna1 + zmienna2;
    </code>

    <code>
      div {
        background-color:blue;
      }
    </code>
  </pre>
</figure>

Kontekstem zewnętrznym przykładowego elementu "pre" jest element "figure". Wspomniany element "figure" 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 "figure", jest prawidłowym kontekstem zewnętrznym dla elementu "pre".

kontekst wewnętrzny
zawartość frazowana

Przykładowy Kod HTML

<figure>
  <pre>
    <code>
      var zmienna1 = 3;
      var zmienna2 = 4;
      var zmienna3 = zmienna1 + zmienna2;
    </code>

    <code>
      div {
        background-color:blue;
      }
    </code>
  </pre>
</figure>

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

wymagane elementy dzieci

brak

wymagane atrybuty

brak

składnia HTML

<pre> ... </pre>

pominięcie tagu na początku

nigdy

pominięcie tagu na końcu

nigdy

CSS display

block

Dodatkowe domyślne reguły CSS elementu pre

pre {
  display:block;
  font-family:monospace;
  white-space:pre;
  margin-top:1em;
  margin-bottom:1em;
}

Interpretacja elementu pre

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak

Edge

tak