HTML Document Rendering

HTML document composes of three layers in general..

computer code layer for constructing the HTML document dynamically.
plain text layer for presentation and document structure
markup layer to annotate a document's display format and describe included objects

Rules for rendering HTML document in different layer are based on different sets of standards and specifications. Rules used in building computer code for HTML document are usually depending on the software used.

Example of HTML WebPage Rendering

For example, an entity '<' is the entity used to replace the reserved less-than character (<) used in ASP script. And a pair of double quot ("") is an escape character used to replace the reserved double-quote character (") used in ASP script.

RAW ASP Code Input:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <title>Sample Page</title>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> 
    </head>
    <body>
        <%
        Response.Write "<p>An ""ASP"" Code</p>"
        %>
        <%
        Response.Write "&lt;p&gt;An ""ASP"" Code&lt;/p&gt;"
        %>
    </body>
</html>

Translated HTML Code Input:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <title>Sample Page</title>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> 
    </head>
    <body>
        <p>An "ASP" Code</p>&lt;p&gt;An "ASP" Code&lt;/p&gt;
    </body>
</html>

HTML Web Page Embedded Output:

Computer Code of HTML Document

The computer code of a HTML document is only an encoded plain texts of the HTML Document according to some standards and specification.

Examples of Impermissible Computer Code

Using the ampersand character "&" in HTML document as a literal is not recommended because the ampersand character "&" in HTML plain text document is a special character to mark the beginning of an entity for HTML rendering engine. For example
HTML Document Input:
```
The literal "&amp;" should be encoded as entity "&amp;amp;"(&amp;) 
or code "&amp;#x26;"(&#x26;) in the computer code of a HTML document. 
e.g.
`1234567890-= 
~!@#$%^ &amp; *()_+ []\ {}| ;' :&quot; ,./<> 
qwertyuiopasdfghjklzxcvbnm QWERTYUIOPASDFGHJKLZXCVBNM
```
HTML Web Page Embedded Output:
not support

In general, using special characters "&" in HTML computer code as literals are not recommended because these special characters may be reserved characters. For example

HTML Document Input:

&amp;, &lt;, &quot;, and &gt; are four reserved characters in ASP
these special characters should be encoded in the computer code 
 of a HTML document when using as literal characters. e.g.
<P style="font-size:20px">`1234567890-= 
~!@#$%^   &amp;   *()_+ []\ {}| ;' :&quot; ,./&lt;&gt; 
qwertyuiopasdfghjklzxcvbnm QWERTYUIOPASDFGHJKLZXCVBNM</p>

HTML Web Page Embedded Output:

Using a character that is not defined in the document type may cause trouble. For exmple:

HTML Document Input:

The &#x20AC; character with code &quot;&amp;#x80;&quot; is 
one of not defined codes in HTML.
The correct code for &#x20AC; is "&amp;#x20AC;"(&#x20AC;) 
or using the HTML entity &quot;&amp;euro;&quot;(&euro;).

HTML Web Page Embedded Output:

Using impermissible character in URI may cause trouble. For example

HTML Document Input:

The first character code "&amp;#x20AC;"(&#x20AC;) 
and character code "&amp;#x3C;"(&#x3C;) 
are impermissible characters in URI of tag a
&quot;&lt;a href="http://www.sideway.hk/&amp;#x20AC;/default.asp?
a=&amp;#x3C;"&gt; Go to Sideway.hk/&amp;#x20AC;&lt;/a&gt;&quot;
<br />
Other examples of impermissible character in URI are \, a space ( ). 
The character &amp;#x5C; is an impermissible character 
while a space can be replaced by escape character %20.

HTML Web Page Embedded Output:

Using special character in "href" attribute may cause trouble. All special characters in "href" should be encoded. For example, "&" is a reserved character in HTML, < and " is reserved character in ASP.
HTML Document Input:
```
&lt;a href="http://www.sideway.hk">`-= ~!@#$%^ &amp; *()_+ []
\{}| ;' :&quot; ,.&lt;>&lt;/a>
```
HTML Web Page Embedded Output:
not support

Computer Code Rendering of HTML Document

HTML document is a markup document. In other words, the output of a HTML document is rendered by the tagged elements, not the computer code of the HTML document. Therefore the layout of the computer code of a HTML document has no effect on the output of the HTML document.

Examples of Computer Code Rendering

Space: All spaces located outside tagged element of the HTML computer code will be ignored in the output of a HTML document. Any number of continuous spaces in HTML tagged elements are counted as one space only in HTML web page output except inside a PRE element. An additional of neighborhood space can use a special character entity " " to represent. A good practice is to add space immediately before an opening tag and immediately after a closing tag.
HTML Document Input:
```
 01234567890 0 2 56 0
 0 2 &nbsp;56 &nbsp;&nbsp;0 
 <pre>0 2 56 0</pre> 
```
HTML Web Page Embedded Output:
not support
Line Space, Carriage Return: Line space is created by entering a carriage return.line feed in the HTML computer code. Line feed is ignored and replaced by a "Space" in rendering the HTML Web Page output. And all created "Space"s are combined together with any typed "Space"s to form one space only.
HTML Document Input:
```
01234567890
01234

567890
0123 
567890
01234
 
567890
<pre>01234 
567890</pre>
```
HTML Web Page Embedded Output:
not support
Line Break: In HTML computer code, a line break is created by pressing a carriage return. But in HTML web page output, a line break is created by a tagged element " ". Line Break is a line feed in the same paragraph. The HTML web page output is usually depending on the screen resolution and window size, because of word wrapping during text flow, the output results may be difference in different case . Each" " tag element will manually create a single line break markup in the HTML code. A " " tag element will create a line feed in the HTML Web Page only. All the typed spaces before the line feed will be combined to one space only, but all typed spaces after the tag element in the computer code will be ignored in HTML Web Page output. Sometimes the tag can also be expressed as for compatible with XHTML.
HTML Document Input:
```
01234567890
01234
567890
0123 
567890
01234 56
567890
<pre>01234 
567890</pre>
```
HTML Web Page Embedded Output:
not support
Paragraph: In HTML computer code, a paragraph indication is usually created by entering one more carriage return. Paragraph in the HTML web page output can also be created in the same way, However this is not a usual way. A line feed in the HTML web page is used as a line break. A line break is only a need based on the display format of HTML web page output. But a paragraph is a separation of HTML document according to the arrangement of idea or arguments. Usually, there is no relation between the presentation format and the organization of information of a HTML web page. The gaps between paragraphs are usually controlled by the margin, padding, and border styles of the paragraph .
HTML Document Input:
```
A line feed in HTML web page is created by entering a tagged element 
"&lt;br&gt;" in the HTML code to simulate a carriage return. 
Nested a "&lt;br&gt;" tag ... ... in a tagged element will insert a 
line break along the inline. However in HTML web page output, 
the indication of a paragraph is only the visual rendering of the 
tagged elementThis is another paragrah.
```
HTML Web Page Embedded Output:
not support
Comment: The comment tag is used to insert a comment in the HTML document. The comment inside the tag is ignored by the browser and will not be display in the web page. Because the code inside a comment tag is still available to the program, a comment tag can be used to hide the content of style elements and script elements from non-conforming browser for rendering them as text.
HTML Document Input:
```
This is a comment tag: &quot;123321&quot;
 example.
```
HTML Web Page Embedded Output:
not support
HyperLink: Hyperlink is another common tag used in the HTML Web Page. A <a> tag provide an anchor feature to link up any resource available in the web.
HTML Document Input:
```
<a href="http://www.sideway.hk">Go to Sideway.hk</a>
```
HTML Web Page Embedded Output:
not support
Image: Image is one of the common format in HTML Web Page. A <img> tag is used to embed an image in an HTML Web Page. Today there are also many other types of embedded objects can be embedded in an HTML Web Page.
HTML Document Input:
```
<img src="http://www.sideway.hk/images/sideway.jpg" 
height="30px" alt="Sideway">
```
HTML Web Page Embedded Output:
not support