previous   next   contents   elements   attributes

Alignment, font styles, and horizontal rules 

Contents

  1. Formatting
    1. Background color
    2. Alignment
    3. Floating objects
  2. Fonts
    1. Font style elements: the TT, I, B, BIG, SMALL, STRIKE, S, and U elements
    2. Font modifier elements: FONT and BASEFONT
  3. Rules: the HR element

This section of the specification discusses some HTML elements and attributes that may be used for visual formatting. Generally speaking you are recommended to use style sheets instead. An exception is when dealing with user agents that either don't support style sheets or which don't support the particular style sheet features needed. A number of HTML 4.0 elements and attributes dealing with visual presentation are deprecated and may become obsolete in future versions of HTML.

Formatting 

Background color 

Attribute definitions

bgcolor = color
Deprecated.This attribute sets the background color for the document body or table cells.

This attribute sets the background color of the canvas for the document body (the BODY element) or for tables (the TABLE, TR, TH, and TD elements). Additional attributes for specifying text color can be used with the BODY element.

This attribute has been deprecated in favor of style sheets for specifying background color information.

Alignment 

It is possible to align block elements on the canvas (tables, images, objects, paragraphs, etc.) with the align element. Although this attribute may be set for many HTML elements, its range of possible values sometimes differs from element to element.

Attribute definitions

align = left|center|right|justify
Deprecated. This attribute specifies the horizontal alignment of its element with respect to the surrounding context. Possible values:

  • left: Left alignment/justification. This is the default value.
  • center: Center alignment/justification.
  • right: Right alignment/justification.
  • justify: Double justification.

DEPRECATED EXAMPLE:
This example centers a heading on the canvas.

<H1 align="center"> How to Carve Wood </H1>

Using cascading style sheets, for example, you could achieve the same effect as follows: 

<HEAD>
<STYLE>
H1 { text-align: center}
</STYLE>
</HEAD>
<H1> How to Carve Wood </H1>

Note that this would center all H1 declarations. You could reduce the scope of the style by setting the id attribute on the element:

<HEAD>
<STYLE type="text/css">
H1.wood {text-align: center}
</STYLE>
</HEAD>
<H1 id="wood"> How to Carve Wood </H1>

Similarly, to double justify a paragraph on the canvas with HTML's align attribute:

<P align="justify">...Lots of paragraph text...

which, in cascading style sheets, would be:

<HEAD>
<STYLE type="text/css">
P.mypar {text-align: justify}
</STYLE>
</HEAD>
<P id="mypar">...Lots of paragraph text...

To double justify a series of paragraphs, group them with the DIV element:

<DIV align="justify">
<P>...text in first paragraph...
<P>...text in second paragraph...
<P>...text in third paragraph...
</DIV>

With cascading style sheets, this would be:

<HEAD>
<STYLE type="text/css">
DIV.mypars {text-align: justify}
</STYLE>
</HEAD>
<DIV id="mypars">
<P>...text in first paragraph...
<P>...text in second paragraph...
<P>...text in third paragraph...
</DIV>


To justify the entire document with cascading style sheets:
<HEAD>
<STYLE type="text/css">
BODY {text-align: justify}
</STYLE>
</HEAD>
<BODY>
...the body is justified...
</BODY>

The CENTER element is exactly equivalent to specifying the DIV element with the align attribute set to "center". The CENTER element is deprecated.

Floating objects 

Images and objects may appear directly "in-line" or may be floated to one side of the page, temporarily altering the margins of text that may flow on either side of the object.

Float an object 

The align attribute for objects, images, frames, etc., floats the object to either the left or right margin. Floating objects generally begin a new line. This attribute takes the following values to float an object:

The following example shows how to float an IMG element to the current left margin of the canvas.

<IMG align="left" src="http://foo.com/animage.gif">

Float text around an object 

Another attribute, defined for the BR element, controls text flow around floating objects.

Attribute definitions

clear = none|left|right|all
Specifies where the next line should appear in a visual browser after the line break caused by this element. This attribute takes into account floating objects (images, tables, etc.). Possible values:
  • none: The next line will begin normally. This is the default value.
  • left: The next line will begin at nearest line below any floating objects on the left-hand margin.
  • right: The next line will begin at nearest line below any floating objects on the right-hand margin.
  • all: The next line will begin at nearest line below any floating objects on either margin.

Consider the following visual scenario, where text flows to the right of an image until a line is broken by a BR:

*********  -------
|       |  -------
| image |  --<BR>
|       |
*********

If the clear attribute is set to none, the line following BR will begin immediately below it at the right margin of the image:

*********  -------
|       |  -------
| image |  --<BR>
|       |  ------
*********

If the clear attribute is set to left or all, next line will appear as follows:

*********  -------
|       |  -------
| image |  --<BR clear="left">
|       |  
*********
-----------------

Using style sheets, you could specify that all line breaks should behave this way for objects (images, tables, etc.) floating against the left margin. In cascading style sheets, you could achieve this as follows:

<STYLE type="text/css">
BR {clear: left}
</STYLE>

To specify this behavior for a specific instance of the BR element, you could combine style information and the id attribute:

<HEAD>
...
<STYLE type="text/css">
BR.mybr {clear: left}
</STYLE>
</HEAD>
<BODY>
...
*********  -------
|       |  -------
| table |  --<BR id="mybr">
|       |  
*********
-----------------
...
</BODY>

Fonts 

The following HTML elements specify font information. Although they are not all deprecated, their use is discouraged in favor of style sheets.

Font style elements: the TT, I, B, BIG, SMALL, STRIKE, S, and U elements 

<!ENTITY % font
 "TT | I | B | U | S | STRIKE | BIG | SMALL">
<!ELEMENT (%font|%phrase) - - (%inline)*>
<!ATTLIST (%font|%phrase)
  %attrs;                          -- %coreattrs, %i18n, %events --
  >

Start tag: required, End tag: required

Attributes defined elsewhere

Rendering of font style elements depends on the user agent. The following is an informative description only.

TT: Renders as teletype or monospaced text.
I: Renders as italic text style.
B: Renders as bold text style.
BIG: Renders text in a "large" font.
SMALL: Renders text in a "small" font.
STRIKE and S: Deprecated. Render strike-through style text.
U: Deprecated. Renders underlined text.

The following sentence shows several types of text:

<b>bold</b>,
<i>italic</i>, <b><i>bold italic</i></b>, <tt>teletype text</tt>, and
<big>big</big> and <small>small</small> text.

Your browser renders the words as follows:

bold, italic, bold italic, teletype text, and big and small text.

It is possible to achieve a much richer variety of font effects using style sheets. To specify blue, italic text in a paragraph with cascading style sheets:

<HEAD>
<STYLE>
P.mypar {font-style: italic; color: blue}
</STYLE>
</HEAD>
<P id="mypar">...Lots of blue italic text...

Font style elements may be nested and they must be properly nested. Rendering of nested font style elements depends on the user agent.

Font modifier elements: FONT and BASEFONT 

FONT and BASEFONT are deprecated.

<!ELEMENT FONT - - (%inline)*   -- local change to font -->
<!ATTLIST FONT
  size        CDATA      #IMPLIED  -- [+]nn e.g. size="+1", size=4 --
  color       CDATA      #IMPLIED  -- #RRGGBB in hex, e.g. red: "#FF0000" --
  face        CDATA      #IMPLIED  -- comma separated list of font names --
  >

Start tag: required, End tag: required

<!ELEMENT BASEFONT - O EMPTY>
<!ATTLIST BASEFONT
  size        CDATA      #REQUIRED -- base font size for FONT elements --
  color       CDATA      #IMPLIED  -- #RRGGBB in hex, e.g. red: "#FF0000" --
  face        CDATA      #IMPLIED  -- comma separated list of font names --
  >

Start tag: required, End tag: forbidden

Attribute definitions

size = cdata
Deprecated. This attribute sets the size of the font. Possible values:
  • An integer between 1 and 7. This sets the font to some fixed size, whose rendering depends on the user agent. Not all user agents may render all seven sizes.
  • A relative increase in font size. The value "+1" means one size larger. The value "-3" means three sizes smaller. All sizes belong to the scale of 1 to 7.
color = color
Deprecated. This attribute sets the text color.
face = cdata-list
Deprecated. This attribute defines a comma-separated list of font names the user agent should search for in order of preference.

The FONT element changes the font size and color for text in its contents.

The BASEFONT element sets the base font size (using the size attribute). Font size changes achieved with FONT are relative to the base font size set by BASEFONT. If BASEFONT is not used, the default base font size is 4.

DEPRECATED EXAMPLE:
The following example will show the difference between the seven font sizes available with FONT:

<P><font size=1>size=1</font>
<font size=2>size=2</font>
<font size=3>size=3</font>
<font size=4>size=4</font>
<font size=5>size=5</font>
<font size=6>size=6</font>
<font size=7>size=7</font>

Your user agent renders this as follows:

size=1 size=2 size=3 size=4 size=5 size=6 size=7

The following shows the effect of relative font sizes using a base font size of 3:

size=-4 size=-3 size=-2 size=-1 size=+1 size=+2 size=+3 size=+4

The same thing with a base font size of 6:

size=-4 size=-3 size=-2 size=-1 size=+1 size=+2 size=+3 size=+4

The base font size does not apply to headings, except where these are modified using the FONT element with a relative font size change.

Rules: the HR element 

<!ELEMENT HR - O EMPTY>
<!ATTLIST HR
  %coreattrs;                      -- id, class, style, title --
  %events;
  align (left|right|center) #IMPLIED
  noshade     (noshade)  #IMPLIED
  size        %Pixels    #IMPLIED
  width       %Length    #IMPLIED
  >

Start tag: required, End tag: forbidden

Attribute definitions

noshade
When set, this boolean attribute requests that the user agent render the rule in a solid color rather than as the traditional two-color "groove".
size = length
Deprecated. This attribute specifies the height of the rule. The default value for this attribute depends on the user agent.
width = length
Deprecated. This attribute specifies the width of the rule. The default width is 100%, i.e., the rule extends across the entire canvas.

Attributes defined elsewhere

The HR element causes a horizontal rule to be rendered by visual user agents.

The amount of vertical space inserted between a rule and the content that surrounds it depends on the user agent.

DEPRECATED EXAMPLE:
This example centers the rules, sizing them to half the available width between the margins. The top rule has the default thickness while the bottom two are set to 5 pixels. The bottom rule should be rendered in a solid color without shading: 

<HR width="50%" align="center">
<HR size="5" width="50%" align="center">
<HR noshade size="5" width="50%" align="center">

Your browser renders these rules as follows:

previous   next   contents   elements   attributes