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