Why does HTML5 recommend putting a code element inside a pre?

Question

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 my own example:

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

You can also write (making some assumptions about the default browser settings for pre ):

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

Even if pre exists to distinguish a block of code from an embedded line of code, I don’t see that it is a more semantic choice than specifying a block code in a class.

Is there a specific reason why pre is recommended in CSS solution?

Answer 1

<code> is just a "piece of computer code." This was originally intended for simple code snippets such as i++ or <code> .

<pre> "is a block of preformatted text in which the structure is represented by typographic conventions rather than elements." The original goal was nothing more than precisely: to provide the text in the same way as it was given by the author, for example

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

You do not need to use each other. <pre> has its own roles, for example <code> has its own. However, <pre> is a way to signal that white space in a given fragment is important, a role that <code> missing.

But back to your question: pay attention to the exact wording:

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

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

This example uses a class that indicates the language used.

He says he couldn’t. You can do it the way you want. However, it is not recommended by W3C, however, I personally recommend you use <pre><code>...

Further explanation

Whenever white space is part of your code and the structure of your code, you must indicate that this structure should be stored. Since the code structure is defined by typographic conventions (tabs, line breaks, spaces), I personally recommend that you use <pre><code> , even if it is possible to have more code and another node in the DOM. But whenever there is no space, your code will be imperfect.

In addition, you can easily distinguish between embedded code and code blocks without checking element.className , and some JS syntax syntaxes work fine with <pre><code>... and automatically erase <code> .

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

References

• W3C: HTML5: 4.5.12 Code Element (W3C Recommendation October 28, 2014)

  The code element represents a piece of computer code. This can be an XML element name, a file name, a computer program, or any other string recognized by a computer.

• W3C: HTML5: 4.4.3 Provisional element (W3C Recommendation October 28, 2014)

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

Answer 2

CSS is for presentation.

White space is significant (non-presentation) in many programming languages.

Answer 3

To represent a block of computer code, a preliminary element can be used with a code element;

To represent the output block of a computer, a preliminary element can be used with the samp element.

<pre><code> for block code that should not end. Use <code> for inline code that can be wrapped.

Line breaks and spaces in the text, enclosed in <pre> tags, are supported in the same way as in the html-document when displayed in the browser. Browsers typically display text <pre> in fixed-font with whitespace .

Answer 4

<pre> shows line breaks!

This will prevent the use of a php function such as nl2br (), or adding manually <br /> at each end of the line.

Regards, Spirit