Code tags and Pre tags

Code tag:

1, the Code tag definition: <code> tag, used to indicate the computer source code or other machine can read the text content. Software code writers are accustomed to the code format when writing code, then this <code> tag is designed for the software code writer, the code tag text will be the same width, similar to the Telex Typewriter style font (Courier) display.

2, the code tag application, should be used only to indicate the computer program source code or other machine can read the text content. <code> tags have the function of turning text into equal-width fonts, and a feature that implies that the text is the source code. Then, depending on the second feature, the browser may be able to add an effect to your situation in the future. For example, a programmer's browser might look for a <code> fragment and perform some extra text formatting, such as looping and conditional judgment statements for special indentation, and so on.

3, the code tag example, we can look at the following code-labeled text fragment and Add code tag text fragment between the format of the difference. It is important to note that this is just the first function of the code tag, which implies that the function of the source program should be displayed on a specific browser.

Cases:

<code>   document.getElementById ("id1");     document.getElementById ("Id2"); document. getElementById ("ID3"  ); </code>    

Show Results:

Pre tag:

1. Pre-tag definition,<pre> tags are used to define pre-formatted text, and the text that is enclosed in the pre tag usually preserves spaces and line breaks, and the text also renders a wide font. Similarly, a common application of the pre tag is to save the source code text on your computer.

2. Pre tag function, pre tag a common application is to save the text of the source code in the computer. However, it is important to note that labels that can cause broken paragraphs, such as headings, <p> and <address> tags, must never be included in <pre> defined blocks. The pre tags allow text to include physical styles and content-based style changes, as well as links, images, and horizontal dividers. When placing other labels (such as <a> tags) in
<pre> block, it is just like in other parts of the html/xhtml document.

Example:<pre>
&lt;article&gt;
&lt;h1&gt; Article heading&lt;/h1&gt;
&lt;/article&gt;
</pre>

Show Results:

The relationship between the code tag and the pre tag

By definition we can know the relationship between the code tag and the pre tag, and the similarities are similar to the application, and are mainly used in the browser to display the source code on the computer. But there is a big difference between the two, a function of the code tag is to imply that the browser code tag is surrounded by the text is the computer source code, the browser can make its own style processing, the pre tag does not have this function, but the pre tag can keep the text space and newline characters, The spaces and line breaks in the reserved text are the styles that are necessary for the computer source code to display. So at this point we can imagine if the code tag and the pre tag could be used together? The answer is yes, the code tag and the pre tag can be nested, but you must be aware of the nesting order of the two.

Bootstrap shows the code in two ways:

• The first is the <code> tag. If you want to display the code inline, you should use the <code> tag.
• The second type is the <pre> tag. If the code needs to be displayed as a separate block element or if the code has more than one line, then the <pre> tag should be used

Note: When using the <code><pre> tag, the code start and end tags that you want to display internally use a Unicode variant: &lt; and &gt;.

Code tags and Pre tags