Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Why does HTML5 recommend putting the code element inside pre?

The HTML5 documentation recommends putting the code element inside the pre element, but I don't understand how this is better or more semantic than just using the code element and CSS. In their own example:

<pre><code class="language-pascal">var i: Integer;
begin
   i := 1;
end.</code></pre>

Could also be written (Making some assumptions about the browser's defaults for pre):

<style>
code {
    display: block;
    white-space: pre;
}
</style>
…
<code class="language-pascal">var i: Integer;
begin
   i := 1;
end.</code>

Even if the pre is there to distinguish a code block from an inline string of code, I don't see it being a more semantic choice than specifying the block-ness of the code in a class.

Is there a specific reason the pre is recommended over a CSS solution?

like image 306
kojiro Avatar asked Jul 31 '12 14:07

kojiro


People also ask

Why we use pre tag in html5?

The <pre> tag defines preformatted text. Text in a <pre> element is displayed in a fixed-width font, and the text preserves both spaces and line breaks. The text will be displayed exactly as written in the HTML source code.

What is the advantage of pre formatted pre tag in HTML?

The <pre> tag in HTML is used to define the block of preformatted text which preserves the text spaces, line breaks, tabs, and other formatting characters which are ignored by web browsers. Text in the <pre> element is displayed in a fixed-width font, but it can be changed using CSS.

What does the pre element do in HTML?

<pre>: The Preformatted Text element. The <pre> HTML element represents preformatted text which is to be presented exactly as written in the HTML file. The text is typically rendered using a non-proportional, or monospaced, font. Whitespace inside this element is displayed as written.

Is the HTML pre tag deprecated?

The only attribute unique to the <pre> tag is deprecated, meaning that it may function currently, but is not supported in going forward.


2 Answers

<code> represents only a "fragment of computer code". It was originally thought for simple code snippets like i++ or <code>.

<pre> "represents a block of preformatted text, in which structure is represented by typographic conventions rather than by elements". It's original purpose was nothing more than exactly this: provide a text in the same way it was given by the author, e.g.

+----------------------------------+ |                                  | | WARNING! PREFORMATED TEXT AHEAD! |                      =o= |                               __;                                  ~^ +----------------TT------------°                  ||    _____________    _____________________                  ||    | TO GRANDMA  >  | TOTALLY NOT A TRAP  >    oÖo            ||    |°°°°°°°°°°°°    °°°°°°°°°°°°°°°°°°°°°              |  ö          ||    |                |      .mm,                     ~"""~"""~"""~"""~"""~"""~~"""~"""~"""~"""~"""~"""~"""~"""~"""~""..MWMWc...~"""~""

You don't need to use each with each other. <pre> has its own roles, like <code> has its own. However, <pre> is a way to signalize that the white-space in the given fragment is important, a role that <code> is missing.

However, back to your question: note the exact wording:

The following example shows how a block of code could be marked up using the pre and code elements.

<pre><code class="language-pascal">var i: Integer; begin    i := 1; end.</code></pre> 

A class is used in that example to indicate the language used.

It says could, not should. You're free to do this how you want. It's not recommended by the W3C in any way, however, I personally recommend you to use <pre><code>....

Further explanation

Whenever white-space is part of your code and the structure of your code, you should state that this structure should be kept. As the structure in code is given by typographic conventions (tabs, linefeeds, spaces) I personally recommend you to use <pre><code>, even if it's arguably more code and another node in the DOM. But whenever missing white-space will render your code imperfect it's necessary.

Apart from that you can easily differ between inline code and code-blocks without checking element.className, and some JS syntax highlighter work pretty well with <pre><code>... and strip the <code> automatically.

Also, if you use a general rule for <code> with white-space:pre;, you cannot use it for inline snippets without additional classes. If you were to create a class instead, you've won nothing compared to <pre><code>.

References

  • W3C: HTML5: 4.5.12 The code element (W3C Recommendation 28 October 2014)

    The code element represents a fragment of computer code. This could be an XML element name, a file name, a computer program, or any other string that a computer would recognize.

  • W3C: HTML5: 4.4.3 The pre element (W3C Recommendation 28 October 2014)

    The pre element represents a block of preformatted text, in which structure is represented by typographic conventions rather than by elements.

like image 143
Zeta Avatar answered Oct 14 '22 13:10

Zeta


CSS is for presentation.

White space is significant (not presentational) in many programming languages.

like image 39
Quentin Avatar answered Oct 14 '22 12:10

Quentin