CSS Code and Pre Tags

In general, a html <code> tag is used to define a block of inline computer code and a html <pre> tag is used to define a block of preformatted text block. Usually, a block of preformatted computer code is tagged by the nested html <pre><code> tag pair.

HTML Document Input:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
div {font-size:1em;line-height:1.2em}
code,pre {padding:3px; outline: silver solid 1px;}
pre>code {outline: cyan solid 1px;}
</style>
<title>Sample Page</title>
    </head>
    <body>
<div>
This is <code>an
inline code
</code>
This is <pre>a
preformatted block
</pre>
This is <pre><code>a
preformatted
code block</code></pre>
</div>
    </body>
</html>

HTML Web Page Embedded Output:

Equation Block

Since a computer code is usually rendered as a preformatted block, the html <code> tag can therefore be used to tag a block of equation by redefining the attribute of <code> tag.

HTML Document Input:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
div {font-size:1em;line-height:1.2em}
code, pre {display:block; padding:1px; outline: silver solid 1px;}
pre>code {outline: cyan solid 1px;}
</style>
<title>Sample Page</title>
    </head>
    <body>
<div>
This is <code>a
code block
</code>
This is <pre>a
preformatted block
</pre>
This is <pre><code>a
preformatted block of
a code block</code>new text</pre>
</div>
    </body>
</html>

HTML Web Page Embedded Output:

Equation Inline Block

Besides, the html <code> tag can also be used to tag an equation as an inline block by redefining the attribute of <code> tag.

HTML Document Input:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
div {font-size:1em;line-height:1.2em}
pre {display:block; padding:1px; outline: silver solid 1px;}
code {display:inline-block; padding:1px; outline: silver solid 1px;}
pre>code {outline: cyan solid 1px;}
</style>
<title>Sample Page</title>
    </head>
    <body>
<div>
This is <code>an
inline code block
</code>
This is <pre>a
preformatted block
</pre>
This is <pre><code>a
preformatted block of
an inline code block</code>new text</pre>
</div>
    </body>
</html>

HTML Web Page Embedded Output:

Equation Example

Examples of an inline-block equation and an equation block

HTML Document Input:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
div {font-size:1em;line-height:1.2em;}
p {clear:both;}
code {display:block; width:90%; margin:0 auto; padding:1px; outline: silver solid 1px;}
span {display:block;}
span>code {float:left; width:90%; margin:0 3%; outline: blue solid 1px;}
p>code {display:inline-block; width:auto; outline: cyan solid 1px;}
</style>
<title>Sample Page</title>
    </head>
    <body>
<div>
This is <code>a
code block
</code> new text
<div>This is <span><code>a
code block
</code>88</span></div>
<p>This is <code>an
inline code block</code> new text</p>
<p>This is <code style="width:50%">an
inline code block</code> new text</p>
<p>This is <code style="width:70%">an
inline code block</code> new text</p>
<p>This is <code style="width:90%">an
inline code block</code> new text</p>
<p>This is <code style="width:95%">an
inline code block</code> new text</p>
</div>
    </body>
</html>

HTML Web Page Embedded Output: