Why does HTML5 recommend putting the code element inside pre?
<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
andcode
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.
code vs pre vs samp for inline and block code snippets
Something I completely missed: the non-wrapping behaviour of <pre>
can be controlled with CSS. So this gives the exact result I was looking for:
code { background: hsl(220, 80%, 90%); }
pre { white-space: pre-wrap; background: hsl(30,80%,90%);}
Here's an example demonstrating the <code><code></code> tag.
<pre>Here's a very long pre-formatted formatted using the <pre> tag. Notice how it wraps? It goes on and on and on and on and on and on and on and on and on and on...</pre>
What do I need to escape inside the html pre tag
What happens if you use the <pre>
tag to display HTML markup on your blog:
<pre>Use a <span style="background: yellow;">span tag with style attribute</span> to hightlight words</pre>
How are nested tags in html translated by web browsers and how does order of nesting tags in matter?
For html elements in general, there are 2 major groups, inline elements, for example
<span> <code> <a> <img> <b>
and block elements
<div> <pre> <p> <h1> <ul>
To be nested valid, a block element can contain
- an inline element
- a block element
and an inline element can contain
- an inline element
There are exceptions, though I will not bring them up here.
Also, if one would put a block element inside an inline, it will often still show the same output.
Why? ... Most browsers will try to interpret what one did and try to "fix it and make it work anyway".
So to answer your question
does the ordering of these tags matter?
Yes, in general, block elements are not allowed inside inline elements, but there can be other reasons and exceptions as well.
Regarding your question (comment)
Which is translated first? The code inside <code> or the <pre> tags are given higher priority?
Short answer, the inner element's property, when set, either explicit or predefined, overrides the outer element's equal property.
So in your case, the pre
element's white-space property is set, as default, to white-space: pre
and as the white-space
property is inherited by default, the code
uses that value, hence the output looks the same as for the pre
element.
But if we were to explicit set the white-space
property on the code
element, it will behave as you might expect, with no line breaks etc.
#reset code { white-space: normal;}
<div> <p>Example: inheritence of property</p> <pre> <code> var person = {firstName:"John2",lastName:"Doe"} </code> </pre></div>
<hr>
<div id="reset"> <p>Example: explicit set property</p> <pre> <code> var person = {firstName:"John2",lastName:"Doe"} </code> </pre></div>
Using pre and code tags to display a javascript script
These tags are only for "decorational" purposes. Code within will still be executed. If you want it displayed you have to convert at least the <script>
tag to html:
<script type="text/javascript">
Then the JavaScript code inbetween will be shown.
You don't need both though, I would use <pre>
(which is per default a block element), <code>
is intended for inline use.
How to show div tag literally in code/pre tag?
Unfortunately it doesn't work with HTML tags.
<code>
means "This is code", <pre>
means "White space in this markup is significant". Neither means "The content of this element should not be treated as HTML", so both work perfectly, even if they don't mean what you want them to mean.
Is there any way to show "
<div>
" inside of<pre>
or<code>
tag without actually interpreting it as HTML?
If you want to render a <
character then use <
, with >
for >
and &
for &
.
You can't (in modern HTML) write markup and have it be interpreted as text.
If the w3.org HTML5 form spec nests an input inside a parent label, why do most pages implement them as siblings?
Both forms are valid, per the spec:
The for attribute may be specified to indicate a form control with which the caption is to be associated. If the attribute is specified, the attribute's value must be the ID of a labelable form-associated element in the same Document as the label element. If the attribute is specified and there is an element in the Document whose ID is equal to the value of the for attribute, and the first such element is a labelable form-associated element, then that element is the label element's labeled control.
If the for attribute is not specified, but the label element has a labelable form-associated element descendant, then the first such descendant in tree order is the label element's labeled control.
You can either use nesting, if that makes sense for your markup, or use the for attribute if you're unable to use implicit nesting. Neither is more or less correct than the other. I presume most people favor using the for attribute since that gives the author the most flexibility by allowing the two elements to be decoupled from each other.
Related Topics
CSS How to Make <Td> a Fixed Height
Constructing a Responsive Website
How to Combine Multiple CSS Rules
Bootstrap Dropdown Clipped by Overflow:Hidden Container, How to Change The Container
Text-Overflow: Ellipsis in Table-Cell Without Width
Content of Div Is Longer Then Div Itself When Width Is Set to 100%
Facebook Share Doesn't Show My Description or My Thumbnail
How to Auto Resize HTML Table Cell to Fit The Text Size
Does HTML5 Change The Standard for HTML Commenting
CSS3 Animation Not Working in Chrome
Difference Between HTML and Dom
Are HTML Image Maps Still Used
How to Make a Div 100% of Page (Not Screen) Height
Angular 2 - How to Hide Nav Bar in Some Components
How to Create an H264 Video with an Alpha Channel for Use with HTML5 Canvas