HTML Character Level Elements Summary

• BR Element: Line Break
• HR Element: Horizontal Divider
• SPACER Element: Horizontal or Vertical Space (Netscape only)
• WBR Element: Optional Word Break 

BR Element: Line Break

• Attributes
  • CLEAR="left", "right", "all" (optional). CLEAR works with ALIGN attribute in IMG or TABLE only, not in paragraph P.
    • <BR CLEAR="left">: Breaks the line and moves the following text down until it can be flush with the left margin.
    • <BR CLEAR="right">: Breaks the line and moves the following text down until the right margin is clear.
    • <BR CLEAR="all">: Breaks the line and moves the following text down until both margins are clear.

• Examples:
  • Example 1: BR
  • Example 2: BR with CLEAR="left"
  • Example 3: BR with CLEAR="right"
  • Example 4: BR with CLEAR="all"

• Example 1: BR 

<P> Here is the beginning of a paragraph.<BR>
&lt;BR&gt; breaks the line and moves the text down to a new line.

• Example 1 Output:

Here is the beginning of a paragraph.
<BR> breaks the line and moves the text down to a new line.

• Example 2: BR with CLEAR="left" 

<P> Here is the text before the table. Here is the text before the table. Here is the text before the table.
Here is the text before the table. Here is the text before the table. Here is the text before the table.
<TABLE ALIGN="left" BORDERCOLORLIGHT="red" BORDER="5" HSPACE="60" VSPACE="40">
<CAPTION>TABLE with ALIGN=&quot;left&quot; BORDERCOLORLIGHT=&quot;red&quot; BORDER=&quot;5&quot;
HSPACE=&quot;60&quot; VSPACE=&quot;40&quot;</CAPTION>
<TR>
    <TH>Header 1</TH> <TH>Header 2</TH> <TH>Header 3</TH>
</TR>
<TR>
    <TD>Left 1</TD> <TD ALIGN="right">Right 1</TD> <TD ALIGN="center">Center 1</TD>
</TR>
<TR>
    <TD>Left 2</TD> <TD ALIGN="right">Right 2</TD> <TD ALIGN="center">Center 2</TD>
</TR>
</TABLE>
Here is the text after the table. Here is the text after the table. Here is the text after the table.
Here is the text after the table. Here is the text after the table. Here is the text after the table.
<P> Here is a new paragraph after the table. Here is a new paragraph after the table.
Here is a new paragraph after the table. Here is a new paragraph after the table.
Here is a new paragraph after the table. Here is a new paragraph after the table.
<BR CLEAR="left">
&lt;BR CLEAR=&quot;left&quot;&gt; breaks the line and moves the text down to a new line.
&lt;BR CLEAR=&quot;all&quot;&gt; breaks the line and moves the text down to a new line.
&lt;BR CLEAR=&quot;right&quot;&gt; does not break the line in this case.

• Example 2 Output:

Here is the text before the table. Here is the text before the table. Here is the text before the table. Here is the text before the table. Here is the text before the table. Here is the text before the table.

TABLE with ALIGN="left" BORDERCOLORLIGHT="red" BORDER="5" HSPACE="60" VSPACE="40"

Header 1	Header 2	Header 3
Left 1	Right 1	Center 1
Left 2	Right 2	Center 2

Here is the text after the table. Here is the text after the table. Here is the text after the table. Here is the text after the table. Here is the text after the table. Here is the text after the table.

Here is a new paragraph after the table. Here is a new paragraph after the table. Here is a new paragraph after the table. Here is a new paragraph after the table. Here is a new paragraph after the table. Here is a new paragraph after the table.
<BR CLEAR="left"> breaks the line and moves the text down to a new line. <BR CLEAR="all"> breaks the line and moves the text down to a new line. <BR CLEAR="right"> does not break the line in this case.

• Example 3: BR with CLEAR="right" 

<P> Here is the text before the table. Here is the text before the table. Here is the text before the table.
Here is the text before the table. Here is the text before the table. Here is the text before the table.
<TABLE ALIGN="right" BORDERCOLORLIGHT="red" BORDER="5" HSPACE="60" VSPACE="40">
<CAPTION>TABLE with ALIGN=&quot;right&quot; BORDERCOLORLIGHT=&quot;red&quot; BORDER=&quot;5&quot;
HSPACE=&quot;60&quot; VSPACE=&quot;40&quot;</CAPTION>
<TR>
    <TH>Header 1</TH> <TH>Header 2</TH> <TH>Header 3</TH>
</TR>
<TR>
    <TD>Left 1</TD> <TD ALIGN="right">Right 1</TD> <TD ALIGN="center">Center 1</TD>
</TR>
<TR>
    <TD>Left 2</TD> <TD ALIGN="right">Right 2</TD> <TD ALIGN="center">Center 2</TD>
</TR>
</TABLE>
Here is the text after the table. Here is the text after the table. Here is the text after the table.
Here is the text after the table. Here is the text after the table. Here is the text after the table.
<P> Here is a new paragraph after the table. Here is a new paragraph after the table.
Here is a new paragraph after the table. Here is a new paragraph after the table.
Here is a new paragraph after the table. Here is a new paragraph after the table.
<BR CLEAR="right">
&lt;BR CLEAR=&quot;left&quot;&gt; breaks the line and moves the text down to a new line.
&lt;BR CLEAR=&quot;all&quot;&gt; breaks the line and moves the text down to a new line.
&lt;BR CLEAR=&quot;right&quot;&gt; does not break the line in this case.

• Example 3 Output:

Here is the text before the table. Here is the text before the table. Here is the text before the table. Here is the text before the table. Here is the text before the table. Here is the text before the table.

TABLE with ALIGN="right" BORDERCOLORLIGHT="red" BORDER="5" HSPACE="60" VSPACE="40"

Header 1	Header 2	Header 3
Left 1	Right 1	Center 1
Left 2	Right 2	Center 2

Here is the text after the table. Here is the text after the table. Here is the text after the table. Here is the text after the table. Here is the text after the table. Here is the text after the table.

Here is a new paragraph after the table. Here is a new paragraph after the table. Here is a new paragraph after the table. Here is a new paragraph after the table. Here is a new paragraph after the table. Here is a new paragraph after the table.
<BR CLEAR="right"> breaks the line and moves the text down to a new line. <BR CLEAR="all"> breaks the line and moves the text down to a new line. <BR CLEAR="left"> does not break the line in this case.

• Example 4: BR with CLEAR="all" 

<P> Here is the text before the table. Here is the text before the table. Here is the text before the table.
Here is the text before the table. Here is the text before the table. Here is the text before the table.
<TABLE ALIGN="left" BORDERCOLORLIGHT="red" BORDER="5" HSPACE="60" VSPACE="40">
<CAPTION>TABLE with ALIGN=&quot;left&quot; BORDERCOLORLIGHT=&quot;red&quot; BORDER=&quot;5&quot;
HSPACE=&quot;60&quot; VSPACE=&quot;40&quot;</CAPTION>
<TR>
<TH>Header 1</TH> <TH>Header 2</TH> <TH>Header 3</TH>
</TR>
<TR>
<TD>Left 1</TD> <TD ALIGN="right">Right 1</TD> <TD ALIGN="center">Center 1</TD>
</TR>
<TR>
<TD>Left 2</TD> <TD ALIGN="right">Right 2</TD> <TD ALIGN="center">Center 2</TD>
</TR>
</TABLE>
Here is the text after the table. Here is the text after the table. Here is the text after the table.
Here is the text after the table. Here is the text after the table. Here is the text after the table.
<P> Here is a new paragraph after the table. Here is a new paragraph after the table.
Here is a new paragraph after the table. Here is a new paragraph after the table.
Here is a new paragraph after the table. Here is a new paragraph after the table.
<BR CLEAR="all">
&lt;BR CLEAR=&quot;all&quot;&gt; breaks the line and moves the text down to a new line.

• Example 4 Output:

Here is the text before the table. Here is the text before the table. Here is the text before the table. Here is the text before the table. Here is the text before the table. Here is the text before the table.

TABLE with ALIGN="left" BORDERCOLORLIGHT="red" BORDER="5" HSPACE="60" VSPACE="40"

Header 1	Header 2	Header 3
Left 1	Right 1	Center 1
Left 2	Right 2	Center 2

Here is the text after the table. Here is the text after the table. Here is the text after the table. Here is the text after the table. Here is the text after the table. Here is the text after the table.

Here is a new paragraph after the table. Here is a new paragraph after the table. Here is a new paragraph after the table. Here is a new paragraph after the table. Here is a new paragraph after the table. Here is a new paragraph after the table.
<BR CLEAR="all"> breaks the line and moves the text down to a new line.

HR Element: Horizontal Divider

• Attributes
  • ALIGN="left", "center", "right" (optional) If HR does not span the page, then it can, like a heading, be aligned on the page. Default is "center".
  • COLOR="#rrggbb" or "color" (optional, Internet Explorer only)
  • NOSHADE (optional) Browsers usually render an HR as a shaded, chiseled bar drawn across the page
  • SIZE="number" (optional) Specifies, in pixels, the vertical thickness of the horizontal rule. Default is 1.
  • WIDTH="number" or "number%" (optional) "number" specifies the absolute width in pixels; "number%" specifies the width as a percentage of the possible full width of a horizontal rule.

• Examples:
  • Example 1: HR
  • Example 2: HR with ALIGN="right", SIZE="5", WIDTH="50%"
  • Example 3: HR with ALIGN="center", NOSHADE, SIZE="5", WIDTH="50%"
  • Example 4: HR with ALIGN="left", COLOR="#FF0000", SIZE="5", WIDTH="50%"

• Example 1: HR 

<HR>

• Example 1 Output: 

• Example 2: HR with ALIGN="right", SIZE="5", WIDTH="50%" 

<HR ALIGN="right" SIZE="5" WIDTH="50%">

• Example 2 Output:

• Example 3: HR with ALIGN="center", NOSHADE, SIZE="5", WIDTH="50%" 

<HR ALIGN="center" NOSHADE SIZE="5" WIDTH="50%">

• Example 3 Output:

• Example 4: HR with ALIGN="left", COLOR="#FF0000", SIZE="5", WIDTH="50%" 

<HR ALIGN="left" COLOR="#FF0000" SIZE="5" WIDTH="50%">

• Example 4 Output:

SPACER Element: Horizontal and Vertical Spacing (Netscape only)

• Attributes
  • ALIGN="top", "middle", "bottom", "left", "right" (mandatory: TYPE="block" only) Specifies the page alignment for the spacer, relevant for TYPE="block" spacers only. Such spacers are treated in the same manner as images, so that the alignment options have the same meanings as for the IMG element.
  • HEIGHT="number" (mandatory: TYPE="block" only) Specifies the height, in pixels, of the spacer.
  • SIZE="number" (mandatory: TYPE="horizontal" or "vertical" only) Specifies, in pixels, the horizontal or vertical dimension of the spacer. The effect is similar to a horizontal or vertical tab.
  • TYPE="block", "horizontal", "vertical" (mandatory) Specifies the type of spacer.
    • "block": is analogous to an invisible image; you must also specify the HEIGHT and WIDTH, and desired ALIGNment of this type of spacer.
    • "horizontal", "vertical" : are analogous to tabs--in these cases, the only required attribute is SIZE, which specifies the tab size. Note that a "vertical" spacer also introduces a line break.
  • WIDTH="number" (mandatory: TYPE="block" only) Specifies the width, in pixels, of the spacer.

• Examples:
  • Example 1: SPACER with TYPE="block" ALIGN="top" HEIGHT="200" WIDTH="100"
  • Example 2: SPACER with TYPE="block" ALIGN="middle" HEIGHT="200" WIDTH="100"
  • Example 3: SPACER with TYPE="block" ALIGN="bottom" HEIGHT="200" WIDTH="100"
  • Example 4: SPACER with TYPE="block" ALIGN="left" HEIGHT="200" WIDTH="100"
  • Example 5: SPACER with TYPE="block" ALIGN="right" HEIGHT="200" WIDTH="100"
  • Example 6: SPACER with TYPE="horizontal" SIZE="50"
  • Example 7: SPACER with TYPE="vertical" SIZE="50"

• Example 1: SPACER with TYPE="block" ALIGN="top" HEIGHT="200" WIDTH="100"

• Example 1 Output: 

Here is the text floating around the spacer. Here is the text floating around the spacer. Here is the text floating around the spacer. Here is the text floating around the spacer. Here is the text floating around the spacer. Here is the text floating around the spacer.

• Example 2: SPACER with TYPE="block" ALIGN="middle" HEIGHT="200" WIDTH="100"

• Example 2 Output: 

Here is the text floating around the spacer. Here is the text floating around the spacer. Here is the text floating around the spacer. Here is the text floating around the spacer. Here is the text floating around the spacer. Here is the text floating around the spacer.

• Example 3: SPACER with TYPE="block" ALIGN="bottom" HEIGHT="200" WIDTH="100"

• Example 3 Output: 

Here is the text floating around the spacer. Here is the text floating around the spacer. Here is the text floating around the spacer. Here is the text floating around the spacer. Here is the text floating around the spacer. Here is the text floating around the spacer.

• Example 4: SPACER with TYPE="block" ALIGN="left" HEIGHT="200" WIDTH="100"

• Example 4 Output: 

Here is the text floating around the spacer. Here is the text floating around the spacer. Here is the text floating around the spacer. Here is the text floating around the spacer. Here is the text floating around the spacer. Here is the text floating around the spacer.

• Example 5: SPACER with TYPE="block" ALIGN="right" HEIGHT="200" WIDTH="100"

• Example 5 Output: 

Here is the text floating around the spacer. Here is the text floating around the spacer. Here is the text floating around the spacer. Here is the text floating around the spacer. Here is the text floating around the spacer. Here is the text floating around the spacer.

• Example 6: SPACER with TYPE="horizontal" SIZE="50"

• Example 6 Output: 

Here is the text floating around the spacer. Here is the text floating around the spacer. Here is the text floating around the spacer. Here is the text floating around the spacer. Here is the text floating around the spacer. Here is the text floating around the spacer.

• Example 7: SPACER with TYPE="vertical" SIZE="50"

• Example 7 Output: 

Here is the text floating around the spacer. Here is the text floating around the spacer. Here is the text floating around the spacer. Here is the text floating around the spacer. Here is the text floating around the spacer. Here is the text floating around the spacer.

WBR Element: Word Break

• Example:
  • <P>This is a long paragraph with NOBR practice. <NOBR>NO LINE BREAK HERE.
    NO LINE BREAK HERE. NO LINE BREAK HERE. NO LINE BREAK HERE. NO LINE BREAK HERE.
    NO LINE BREAK HERE. NO LINE BREAK HERE. <WBR> WORD BREAK HERE. NO LINE BREAK HERE.
    NO LINE BREAK HERE. NO LINE BREAK HERE. NO LINE BREAK HERE. NO LINE BREAK HERE.
    NO LINE BREAK HERE. NO LINE BREAK HERE. NO LINE BREAK HERE. NO LINE BREAK HERE.
    </NOBR>
    Line break can start here. Line break can start here. Line break can start here.
    </P>

    This is a long paragraph with NOBR practice. NO LINE BREAK HERE. NO LINE BREAK HERE. NO LINE BREAK HERE. NO LINE BREAK HERE. NO LINE BREAK HERE. NO LINE BREAK HERE. NO LINE BREAK HERE. WORD BREAK HERE. NO LINE BREAK HERE. NO LINE BREAK HERE. NO LINE BREAK HERE. NO LINE BREAK HERE. NO LINE BREAK HERE. NO LINE BREAK HERE. NO LINE BREAK HERE. NO LINE BREAK HERE. NO LINE BREAK HERE. Line break can start here. Line break can start here. Line break can start here.