Preformatted Text (<pre>)
When to use
- Use the <pre> element for preformatted text that should be displayed exactly as formatted. Use-cases are formatted Code-snippets or ASCII art. 1
Rules
- Always think about how the preformatted text will be presented to users for which the formatting gets lost. 1 For example ASCI art should probably be presented for assistive technology users as an image.
Two ways of present preformatted content that represents an image
Preformatted text content that represents an image could be represented as an image in two ways:
- Using a <div> element with the aria role="img" and an aria-label and a <pre> inside: 3
<div aria-label="Manuel Baisch" role="img">
<pre>
_____ ______ ________ ________ ___ ___ _______ ___ ________ ________ ___ ________ ________ ___ ___
|\ _ \ _ \|\ __ \|\ ___ \|\ \|\ \|\ ___ \ |\ \ |\ __ \|\ __ \|\ \|\ ____\|\ ____\|\ \|\ \
\ \ \\\__\ \ \ \ \|\ \ \ \\ \ \ \ \\\ \ \ __/|\ \ \ \ \ \|\ /\ \ \|\ \ \ \ \ \___|\ \ \___|\ \ \\\ \
\ \ \\|__| \ \ \ __ \ \ \\ \ \ \ \\\ \ \ \_|/_\ \ \ \ \ __ \ \ __ \ \ \ \_____ \ \ \ \ \ __ \
\ \ \ \ \ \ \ \ \ \ \ \\ \ \ \ \\\ \ \ \_|\ \ \ \____ \ \ \|\ \ \ \ \ \ \ \|____|\ \ \ \____\ \ \ \ \
\ \__\ \ \__\ \__\ \__\ \__\\ \__\ \_______\ \_______\ \_______\ \ \_______\ \__\ \__\ \__\____\_\ \ \_______\ \__\ \__\
\|__| \|__|\|__|\|__|\|__| \|__|\|_______|\|_______|\|_______| \|_______|\|__|\|__|\|__|\_________\|_______|\|__|\|__|
\|_________|
</pre>
</div>
- Using <figure role="img" aria-label="image name"> and <figcaption> elements: 3
<figure>
<figcaption>
<p>Figure 1: Manuel Baisch.
<a href="#skipManuelBaisch">Skip Manuel Baisch ACII art image</a>
</p>
</figcaption>
<pre>
_____ ______ ________ ________ ___ ___ _______ ___ ________ ________ ___ ________ ________ ___ ___
|\ _ \ _ \|\ __ \|\ ___ \|\ \|\ \|\ ___ \ |\ \ |\ __ \|\ __ \|\ \|\ ____\|\ ____\|\ \|\ \
\ \ \\\__\ \ \ \ \|\ \ \ \\ \ \ \ \\\ \ \ __/|\ \ \ \ \ \|\ /\ \ \|\ \ \ \ \ \___|\ \ \___|\ \ \\\ \
\ \ \\|__| \ \ \ __ \ \ \\ \ \ \ \\\ \ \ \_|/_\ \ \ \ \ __ \ \ __ \ \ \ \_____ \ \ \ \ \ __ \
\ \ \ \ \ \ \ \ \ \ \ \\ \ \ \ \\\ \ \ \_|\ \ \ \____ \ \ \|\ \ \ \ \ \ \ \|____|\ \ \ \____\ \ \ \ \
\ \__\ \ \__\ \__\ \__\ \__\\ \__\ \_______\ \_______\ \_______\ \ \_______\ \__\ \__\ \__\____\_\ \ \_______\ \__\ \__\
\|__| \|__|\|__|\|__|\|__| \|__|\|_______|\|_______|\|_______| \|_______|\|__|\|__|\|__|\_________\|_______|\|__|\|__|
\|_________|
</pre>
</figure>
<p id="skipManuelBaisch">Content after ASCII art.</p>
Sources
- HTML Spec: 4.4.3 The pre element is licensed under Creative Commons Attribution 4.0 International License
- MDN: <pre>: The Preformatted Text element by Mozilla contributors is licensed under CC-BY-SA 2.5
- W3C WAI: Providing text alternatives for emojis, emoticons, ASCII art, and leetspeak by Accessibility Guidelines Working Group (AG WG) Participants is licensed under W3C Document License