Full Page for Printing
<BODY> Structures
Headings
Heading container structures are used to set apart document "headlines" or
division "headers" or "titles." For example, the words <BODY>
Structures and Headings above are headings. <BODY>
Structures is contained in the tag <H3> and the slash tag
</H3>. Heading is contained in the tag <H4> and the
slash tag </H4>. Heading structures go into the <BODY> of the
document and have no connection with the <HEAD> or <TITLE>
structures.
There are six levels of headings, from <H1> through <H6>.
Heading 1 <H1> is "most important" and Heading 6 <H6> is
"least important." By default, browsers will display the six heading
levels in the same font, with the point size decreasing as the importance
of the heading decreases.
| HTML Coding | Output |
The following code displays the six levels of headings:
<H1>Heading 1</H1>
<H2>Heading 2</H2>
<H3>Heading 3</H3>
<H4>Heading 4</H4>
<H5>Heading 5</H5>
<H6>Heading 6</H6>
|
Heading 1Heading 2Heading 3Heading 4Heading 5Heading 6
|
Headings are intended as "headlines," not text. Headings are
defined as existing on a line by themselves. A heading always begins at
the margin of a line and always forces a line break at the end of the
heading. In other words, you cannot have two heading levels on the same
line, and there will always be space above and below the heading.
| HTML Coding | Output |
|
This also means that you cannot use heading containers to boldface or change the size of text in the middle of a paragraph. The paragraph will be split with the <H4>heading text</H4> on its own line between the other pieces of the paragraph.
|
This also means that you cannot use heading containers to boldface or change the size of text in the middle of a paragraph. The paragraph will be split with the heading text on its own line between the other pieces of the paragraph.
|
A browser which is set close to the default settings will display the text
for <H5> and <H6> as smaller than the default text settings.
This suggests to some page designers that <H5> and <H6> could
be used for fine print, or other text. This is both a mistake and a
violation of the heading structure. Many browsers allow the user to set
the size of each element, including the headings. If a
visually-impaired user sets <H6> to a size of 18 point, the fine
print won't be so fine any more. The page designer cannot guarantee that
the document will appear exactly as envisioned.
The HTML 3.2 proposal does include text tags -- <SMALL>, <BIG> and <FONT SIZE="
"> -- which, in conjunction with bold
and italic text formatting give the designer greater
flexibility.
There are, however, important "style" relationships between headings and
text: One purpose of headings is to provide "organization" cues to the
reader by the varying "weights" of the heading text (i.e. "This
section is a sub-section of the preceding section and has
the same importance as the next sub-section"). It is important,
therefore, that the relationships between all these "textual" elements --
headings and italic, bold, and plain text -- be smooth. [See the sections
on Paragraph tags and on Formatting Text.]
One way to accomplish this is to develop a personal "style sheet" which
requires single-step increases in size and weight from text up to the
largest heading required. For example:
| HTML Coding | Output |
<H1>Heading 1</H1>
<H4>Sub-Head 4</H4>
The beginning of a normal text paragraph. . . .
|
Heading 1 Sub-Head 4
The beginning of a normal text paragraph. . . .
|
. . . is slightly more jarring than...
| HTML Coding | Output |
<H1>Heading 1</H1>
<H2>Sub-Head 2</H2>
The beginning of a normal text paragraph. . . .
| Heading 1 Sub-Head 2 The beginning of a normal text paragraph. . . .
|
Back to...TOP 
Back
to...Designing Web Pages
Paragraphs are one of the most basic text structures in any text
document. Writing and language arts teachers have used many analogies to
attempt to describe this relationship. Remember introduction - body -
conclusion? And then within each of those divisions, remember
introductory paragraph - body paragraphs - concluding paragraph?
HTML has similar structure: the <BODY> of a document may be
organized into many divisions by headings; the text between each
heading is further divided into paragraphs; and the paragraph text or
headings may be bold faced or italicized to create different emphases.
However, there is a major difference between HTML browsers and word
processors. HTML requires structure tags to handle all elements in the
document. The Web page designer needs to think of each paragraph as a
separate element and apply tags to render the text as a distinct element.
For example:
| HTML Coding | Output |
The designer types. . .
In modern word processors -- like the old typewriter -- writers create
paragraphs by 5-space indents, by leaving blank lines between, or both.
However, HTML doesn't structure white space [extra spaces before, between,
or after words and lines of type] the same way as word
processors.
. . .dutifully presses Enter/Return twice to create a blank line, and
types. . .
HTML tends to ignore white space -- except for
the single spaces between words. While the page designer may type a
paragraph and press the Enter or Return key twice to create a blank line
before the next paragraph, browsers will run the two carefully constructed
paragraphs together.
|
And the browser displays a single paragraph --
In modern word processors -- like the old typewriter -- writers create
paragraphs by 5-space indents, by leaving blank lines between, or both.
However, HTML doesn't structure white space [extra spaces before, between,
or after words and lines of type] the same way as word processors. HTML
tends to ignore white space -- except for the single spaces between words.
While the page designer may type a paragraph and press the Enter or Return
key twice to create a blank line before the next paragraph, browsers will
run the two carefully constructed paragraphs together.
|
The paragraph tag is a container: that is, the beginning of a paragraph is
marked by <P>, and the end by </P>. Many programmers treat
<P> as an empty tag -- that is, the slash tag </P> is left
out. Nearly all browsers will accept this structure, and it is less
cumbersome to code than always adding the slash tag </P>. There is,
however, a caveat: If the designer uses an ALIGN= attribute within
the opening <P> tag [See Formatting Text -- Left-Center-Right], then <P>
must be paired with the </P> slash tag to close the
attribute.
The following lines demonstrate the use of both the <P> and
<BR> tags:
| HTML Coding | Output |
|
This is the first line<BR>and this is the second line.<P>But
this is the start of a new paragraph.<BR>
|
This is the first line
and this is the second line.But this is the
start of a new paragraph.
|
In the example above, the empty tag <BR> forced a line break after
the words ...first line and before the words and this is the
second.... However, notice that when displayed there is no empty line
between. On the other hand, <P> after the the second line and
before But this is the start created both a line break and an empty
line.
To place words on a new line, use <BR>. To create an empty line, use
<P>. You don't need both in the same place.
Back to...TOP Back
to...Designing Web Pages
Last modified: 22 February 1998
Comments and/or Questions? Carl Zager: czager@.mccsc.edu