HTML Coding

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

The consideration in coding for the three layers are also different..

HTML Markup Layer

HTML markup layer is the layer of code used by the rendering engine of a UA for presentation. In general, only the tagged elements of the plain text layer are processed by the rendering engine, all layout control of the plain text layer outside tagged elements are ignored or removed.

Plain Text Layer Code Input:

    <p>The first paragraph.</p>
    <p>The second paragraph.</p>

HTML Markup Layer Code Input:

<p>The first paragraph.</p><p>The second paragraph.</p>

HTML Web Page In-line Output:

The first paragraph.

The second paragraph.

Markup Codes

The code of markup layer can be divided into different catalogs.

markup tags of a tag element
attribute values of an element tag
script contents within <script> tag elements.
preformatted contents nested in a <pre> tag elements.
text contents not nested in a <pre> and <script> tag elements.

Markup Tags

A tagged element is an element of a HTML document with markup tags. These markup tags are the rendering commands of element tags used by the rendering engine of UA to render the content of a tagged element in a HTML document. Additional or external information in addition to the content of a tagged element is passed to the rendering engine of UA through attributes of element tag.

Begin and End Marks

A HTML element tag is always a label with a begin mark "<" and an end mark ">". For example, a <p> tag for a paragraph element

<p>

"<' character is a reserved control character to indicate the beginning of a markup tag in HTML. Any "<" literal character and "<" special character should be replaced by the "<" entity, "<" and the "<" escape character, "%3c" accordingly. Although the ">" character is not a reserved character, any ">" literal character and ">" special character are also replaced by the ">" entity, ">" and the ">" escape character, "%3e" accordingly.

Tag Name

Although HTML tags are not case sensitive, lower case HTML tags should always be used in order to be compatible with other stricter document types, for example, XHTML.

HTML Document Input:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <title>Sample Page</title>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    </head>
    <body>
        <h1>Heading 1 with Uppercase Tag Name</h1>
        <h1>Heading 1 with Uppercase Tag Name</h1>
    </body>
</html>

HTML Web Page Embedded Output:

Opening and Closing Tags

A HTML tagged element is usually marked by an opening tag at the beginnin of the tagged element and a closing tag at the end of the tagged element with the content of the tagged element in between. An opening tag starts with a begin mark "<" and the corresponding tag name is placed immediately next to the begin mark with no white space in between. The first ">" character after the begin mark will be assumed as the end mark ">". A closing tag starts with a begin mark "<", a closing indicator "/" is placed immediately next to the begin mark with no white space in between, and then the corresponding tag name is placed immediately next to the closing mark "/" with no white space in between. The first ">" character after the begin mark will be assumed as the end mark ">". For example, a <p> tag element

HTML Document Input:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <title>Sample Page</title>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    </head>
    <body>
        <div>D1: Element with opening and closing tags</div>
        <div >D2: Element with opening and closing tags</div >
    </body>
</html>

HTML Web Page Embedded Output:

Although some opeining and closing tags are optional tags in HTML, these optional tags should always be used whenever necesssary in order to be compatible with other stricter document types, for example, XHTML.

Examples of optional tags are

<BODY>, </BODY>, </P>,...

Closing of Tagged Elements

In HTML, some closing tags are optional. For example, a <p> tag element

<P>A <p> tag element with no closing tag.

There is also empty tagged element in HTML with no closing tag for the element. For example, a <br> tag element

<BR>

For empty tagged element with no content, a closing tag is forbidden in HTML, but an opening tag can alway be closed properly by adding a "slash" as the last closing attribute of a tagged element such that the HTML document is readable by XML parsers. For example, a closed <BR> tag element.

<br />

Attributes of Element Tags

Attributes of an element tag are seperated by a white space, all continuous spaces between attribute are considered as one single space. For example,

HTML Document Input:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <title>Sample Page</title>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    </head>
    <body>
        <p id="p1" style="color:gray">The first paragraph.</p>
        <p  id="p2"     style="color:blue"   >The second paragraph.</p>
    </body>
</html>

HTML Web Page Embedded Output:

Attribute Names

Although lowercase attribute name is recommended in HTML 4.01 and HTML5 standard does not require lowercase attribute name, an attribute name can be written in uppercase or lowercase in HTML. However a lowercase attribute name should be used in order to be compatible with othe stricter document types, for example, XHTML.

HTML Document Input:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <title>Sample Page</title>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    </head>
    <body>
        <p id="p1" style="color:gray">The first paragraph.</p>
        <p  id="p2"     Style="color:blue"   >The second paragraph.</p>
    </body>
</html>

HTML Web Page Embedded Output:

HTML Document Input:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <title>Sample Page</title>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    </head>
    <body>
        <p title="p1">The first paragraph.</p>
        <p title='p2'>The second paragraph.</p>
        <p title=p3>The third paragraph.</p>
        <p title="paragraph 4">The forth paragraph.</p>
    </body>
</html>

Attribute Values

Although a quoted attribute value is recommended in HTML 4.01 and HTML5 standard does not require quoted attribute value, an attribute value can be either quoted or unquoted. However a quoted attribute value should be used in order to be compatible with othe stricter document types, for example, XHTML. Besides, an attribute value sometimes must be quoted on certain case. For example, an attribute value with a white space which is defined as an attribute seperator if the attribute value is not quoted.

HTML Web Page Embedded Output:

Double or Single Quoted Attribute Values

Using double quotes for quoted attribute values are the most common case in HTML. But, single quotes can also be used for quoted attribute values especially when the attribute value itself contains double quotes. For example a title attribute with double or single quotes

HTML Document Input:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <title>Sample Page</title>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    </head>
    <body>
        <p title="p1">The first paragraph.</p>
        <p title='p2'>The second paragraph.</p>
        <p title="the 'third' paragraph">The third paragraph.</p>
        <p title='the "forth" paragraph'>The forth paragraph.</p>
    </body>
</html>

HTML Web Page Embedded Output:

However, a double quote quoted attribute value should always be used whenever possible.

Attribute Value

In general, an attribute value is processed according to the specific attribute of a specific element.

Script Contents

In general, an script contents is processed according to the specific attribute of a specific <script> tag element.

Preformatted Contents

In general, a <pre> tag element is used to define preformatted text contents, all charcters including lay-out inputs, for example, white spaces, horizontal tab, and line breaks, of all nested text contents are preserved as typed. Usually a fixed-width, non-proportional, or monospace font is used to render text within the <pre> tag element such that texts are displayed exactly as these characters is laid out in the code of plain text layer.

Like other tagged elements, a <pre> tag only adds a preformatted rendering to the text contents within the tagged element, not element tags. Therefore, other permissible element tags can also be added in between to alter the rendering of the text contexts if necessary.

HTML Document Input:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <title>Sample Page</title>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    </head>
    <body>
        <p>The first paragraph.</p>
        <pre>The first line of preformatted <span  style="background-color:cyan"">block.
        
        The third
        The last</span> line of       the block.</pre>
        <p>The last paragraph.</p>
    </body>
</html>

HTML Web Page Embedded Output:

Text Contents

In general, for text contents not nested in a <pre> or <script> tag element, all control characters, for example, linefeed, horizontal tab, and carriage return, in the plain text document are not used by the HTML markup language in presenting the HTML document, these control characters are replaced by a white space. And then any number of continuous white spaces in HTML tagged elements are counted as one single space only