Het element <pre>

Attributen

Dit element bevat alleen de globale attributen.

Toegankelijkheid

Het is belangrijk om een alternatieve beschrijving te geven voor afbeeldingen of diagrammen die met voorgeformatteerde tekst zijn gemaakt. De alternatieve beschrijving moet de inhoud van de afbeelding of het diagram duidelijk en beknopt beschrijven.

Mensen met slechtziendheid die surfen met behulp van ondersteunende technologie zoals een schermlezer, begrijpen mogelijk niet wat de voorgeformatteerde-tekstkarakters voorstellen wanneer ze na elkaar worden voorgelezen.

Een combinatie van de <figure>- en <figcaption>-elementen, aangevuld met de ARIA-attributen role en aria-label op het pre-element, maakt het mogelijk om de voorgeformatteerde ASCII-kunst aan te kondigen als een afbeelding met alternatieve tekst, waarbij de figcaption als bijschrift van de afbeelding dient.

Voorbeeld

<figure>
  <pre role="img" aria-label="ASCII COW">
      ___________________________
  &lt; I'm an expert in my field. &gt;
      ---------------------------
          \   ^__^
           \  (oo)\_______
              (__)\       )\/\
                  ||----w |
                  ||     ||
  </pre>
  <figcaption id="cow-caption">
    A cow saying, "I'm an expert in my field." The cow is illustrated using
    preformatted text characters.
  </figcaption>
</figure>

Voorbeelden

Basisvoorbeeld

HTML

<p>Using CSS to change the font color is easy.</p>
<pre><code>
body {
  color: red;
}
</code></pre>

Resultaat

Dubbelzinnige tekens escapen

Stel dat je HTML-code wilt demonstreren in een <pre>-element. De tekenreeksen die geldige HTML-tags definiëren (beginnend met < en eindigend met >) worden niet weergegeven. Om de tag-tekens als tekst weer te geven, moet je (op zijn minst) het <-teken escapen met zijn character reference, zodat de reeksen niet langer geldige tags definiëren.

In werkelijkheid behandelt de HTML-parser de meeste tekens als platte tekst, tenzij in specifieke contexten. < code is bijvoorbeeld prima, maar <code zou verkeerd geparseerd worden; &am; is prima, maar & niet. Het is echter een goede gewoonte om alle dubbelzinnige tekens te escapen om verwarring te voorkomen, vooral als je programmatisch HTML genereert en de inhoud van <pre> injecteert. In dit geval is hier een goede vuistregel voor het escapen van tekens:

1. Schrijf de inhoud eerst uit zoals je wilt dat deze in het HTML-document verschijnt.
2. Vervang eventuele ampersands (&) door &. Doe deze stap eerst, zodat nieuwe &-tekens die in de volgende stap worden gegenereerd, niet worden ge-escaped.
3. Vervang eventuele <-tekens door <.

Dit zou moeten resulteren in het weergeven van de inhoud zoals je het bedoeld had. Het vervangen van andere HTML-syntaxistekens is optioneel (zoals > naar >, " naar ", en ' naar '), maar kan geen kwaad.

HTML

<pre><code>
let i = 5;

if (i &lt; 10 &amp;&amp; i &gt; 0)
  return &quot;Single Digit Number&quot;
</code></pre>

Resultaat

Technische samenvatting

Zie ook

• <code>
• <samp>
• <kbd>