HTML Single Column Page Construction

The text contents of a HTML document can be manipulated in block-level and text-level. Usually the block-level elements begin on new lines are used to format the text contents in a block scale for constructing the page format.

For a simple single column HTML page, the text contents can be broken into paragraphs. The element is the most common element used to divide the text contents into paragraphs. And element tags, such as <h1>,..., <h6>, <hr>, <pre>, <blockquote>, <address>, can also be used to define the hierarchy and the structure of a page.

The paragraph element, , always insert a line space margin before and after a paragraph.

The 6 heading elements, <h1>...<h6>, are always in bold style with the associated font size and a line space margin is inserted before and after the heading contents.

The block quotation element, <blockquote>, is not associated with a font size. A line space margin is also inserted before and after the block quotation contents. Besides, the block quotation contents are also indented at both the left and right margin as a indented block.

The preformatted elements, <pre>, are always associated with a fixed pitch font. A line space margin is also inserted before and after the preformatted block with the preserved.white space.

A horizontal line element, <hr>, is use to draw a horizontal line across the page.

The contact address element, <address>, renders the text in italic style and only a line break is inserted before and after the address contents.

The text contents can further be rendered into a more readable format by using the attributes of element tags, for examples text alignment, underline etc.

Code Sample:

<body>
<h1>Heading 1 of HTML Page</h1>
Paragraph 1 of 
HTML page under h1 next line
Paragraph 2 of 
HTML page under h1
<h2>Heading 2 of HTML Page</h2>
Paragraph 3 of 
HTML page under h2 next line
Paragraph 4 of 
HTML page under h2
<h3>Heading 3 of HTML Page</h3>
Paragraph 5 of 
HTML page under h3 next line
Paragraph 6 of 
HTML page under h3
<h4>Heading 4 of HTML Page</h4>
Paragraph 7 of 
HTML page under h4 next line
Paragraph 8 of 
HTML page under h4
Paragraph 9 of
HTML page under h4
<h5>Heading 5 of HTML Page</h5>
Paragraph 10 of
HTML page under h5 next line
Paragraph 11 of
HTML page under h5
<h6>Heading 6 of HTML Page</h6>
Paragraph 12 of
HTML page under h6
Paragraph 13 of
HTML page under h6 next line
Paragraph 14 of
HTML page under h6
A block quotation of ..........
.......... .......... .......... .......... .......... .......... ..........
.......... .......... .......... .......... .......... .......... .......... from reference:
<blockquote>Block quotation from
.......... .......... .......... .......... .......... .......... ..........
.......... .......... .......... .......... .......... .......... ..........
other resources ...</blockquote> End of quotation
<pre>A preformatted section
next line.............
next indented line ...............
end of section.</pre>
<hr>
Author contact: <address>sideway.hk</address>Date 2010
</body>

Page Sample:

Heading 1 of HTML Page

Paragraph 1 of HTML page under h1
next line

Paragraph 2 of HTML page under h1

Heading 2 of HTML Page

Paragraph 3 of HTML page under h2
next line

Paragraph 4 of HTML page under h2

Heading 3 of HTML Page

Paragraph 5 of HTML page under h3
next line

Paragraph 6 of HTML page under h3

Heading 4 of HTML Page

Paragraph 7 of HTML page under h4
next line

Paragraph 8 of HTML page under h4

Paragraph 9 of HTML page under h4

Heading 5 of HTML Page

Paragraph 10 of HTML page under h5
next line

Paragraph 11 of HTML page under h5

Heading 6 of HTML Page

Paragraph 12 of HTML page under h6

Paragraph 13 of HTML page under h6
next line

Paragraph 14 of HTML page under h6

A block quotation of .......... .......... .......... .......... .......... .......... .......... .......... .......... .......... .......... .......... .......... .......... .......... from reference:

Block quotation from .......... .......... .......... .......... .......... .......... .......... .......... .......... .......... .......... .......... .......... .......... other resources ...

End of quotation

A preformatted section
next line.............
        next indented line ...............
end of section.

Author
contact:

sideway.hk

Date: 2010

required Optional tag Deprecated Transitional Frameset Exclusion
Optional Element or Content Occurrence Character:
(+) one or more; (*) zero or more; (?) zero or one times; ( ) exactly once
Choice or Sequence Element or Content :
(|) or (&) and (,) sequence (+) include (-) exclude