How are nested tags in html translated by web browsers and how does order of nesting tags in matter?

问题

In html suppose I have two tags in hand <code> and <pre> and I want to write preformatted code then does the ordering of these tags matter? E.g. Are the following equivalent?

<!DOCTYPE html>
<html>
<body>

<p>Code example:</p>
<pre><code>var person = {
firstName:"John2",
lastName:"Doe"
}</code></pre>

</body>
</html>

Now I nest <pre> inside the <code> tag,

<!DOCTYPE html>
<html>
<body>

<p>Code example:</p>
<code><pre>var person = {
firstName:"John2",
lastName:"Doe"
}</pre></code>

</body>
</html>

Would there be any technical difference between the above two approaches?

Addendum: I also don't understand how is the html code being translated here. In the first version The text inside the code tags should be translated into something which doesn't retain extra white spaces and line-breaks so the pre tags should see the output of code tags and should not render extra white spaces and line breaks.

And in the second case the output of pre tags should be given to code tags. Now the code tags will see the preserved extra white spaces and line breaks but the output of code tags should not retain them because that is what the code tag does; it gives up extra white spaces and line breaks.

回答1:

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>

回答2:

does the ordering of these tags matter? E.g. Are the following equivalent?

Although the output will be equivalent both ways, the ordering does matter when writing valid and semantic html5 code

According to the html5 spec regarding the <pre> element:

Contexts in which this element can be used: Where flow content is expected.

whereas regarding the <code> element:

Contexts in which this element can be used: Where phrasing content is expected.

(Phrasing content is the text of the document, as well as elements that mark up that text at the intra-paragraph level. (spec))

Would there be any technical difference between the above two approaches?

Yes. Nesting the pre element within the code element isn't valid html5 (using this validator) and produces the error:

Error: Element pre not allowed as child of element code in this context.

回答3:

About your comment

What I don't get is in <pre><code>something something</code></pre> The text inside code tags is translated into something which doesn't contain white spaces and line breaks then how does the pre tags preserve the white spaces and line breaks?

In addition to @Danield's great explanation, here's a sample showing the pre tag do preserve white spaces and line breaks.

<div>
  <p>PRE/CODE example:</p>
  <pre>
    <code>
    var person = {
firstName:"John2",
lastName:"Doe"
}  
    </code>
  </pre>
</div>

回答4:

Stack Overflow uses it like this for multiple lines of code:

<pre>
    <code>something</code>
</pre>

The code tag uses a fixed width font, while the pre tag additionally preserves white space and line breaks. The code tag represents computer code, while the pre tag could contain basically anything (computer code in code tags but also some nice formatted piece of text or some ASCII picture etc.).

来源：https://stackoverflow.com/questions/34989272/how-are-nested-tags-in-html-translated-by-web-browsers-and-how-does-order-of-nes

标签

html

pre