HTML Text Tags

This page describes a few of the more common text tags and their attributes.

Header tags:

• are implicit tags
• have six levels available (h1 through h6)
• are container tags -   <h1>...</h1>
• include a new line at end of tag -   <p>
• allow the align attributes: Align=" " (left, right, center)

For example:

Header 1 Tag

Header 2 Tag

Header 3 Tag

Header 4 Tag

Header 5 Tag

Header 6 Tag

Header 3 right aligned

Header 3 center aligned

Header 3 left aligned

code

• container tag
• monospaced text
• does not maintain format

Examples:

<code>This is

              an example

                                        of code text.</code>

blockquote

• container tag
• indented text

Examples:

Four score and seven years ago our forefathers brought forth on this continent a new nation, conceived in liberty and dedicated to the proposition that all men are created equal.....

Nested Blockquotes

Four score and seven years ago our forefathers brought forth on this continent a new nation, conceived in liberty and

This is a second blockquote nested in the first one. I'm not sure of an application of this, but it seems that it may be useful.

dedicated to the proposition that all men are created equal.....

Preformatted Text

• Uses the pre tag
• Container tag - all text in container is displayed with existing formatting (pre-formatting).
• Great for things like tables and poetry.
• Tip: Type first and then add tags

Examples:

With pre tags:

     Meetings            Date         Time

     Staff Meeting      6/29/98       9:00

     Project Status     6/30/98      11:00

     Planning            7/8/98       2:00

Without pre tags:

Meetings Date Time Staff Meeting 6/29/98 9:00 Project Status 6/30/98 11:00 Planning 7/8/98 2:00

Font Tag

• Container tag - <font>......</font>
• Lets you specify:
  • font size
  • font color - use either color or hex equiv
  • font type face
• Use with caution, because of computer differences

Examples:

• Font size
  <font size=-1> renders as:  Mary had a little lamb.
  <font size=-2> renders as:  Mary had a little lamb.
  <font size=+1> renders as:  Mary had a bigger lamb.
  <font size=+2> renders as:  Mary had a big lamb.

• Font color
  <font color="red"> renders as:  Mary had a little lamb.
  <font color="#FF0000"> renders as:  Mary had a little lamb.

• Font face
  <font face="helvetica"> renders as:  Mary had a little lamb.
  <font face="arial"> renders as:  Mary had a little lamb.
  

Paragraph Tag

• use to make a paragraph break
• use to align paragraphs of text

Examples:

• <p> between 2 lines renders as:

  This is the first line of text. No matter how long this line is and how narrow the browser is sized, there will not be a paragraph break...

  until a <p> is added. When the browser sees the <p>, a paragraph break is displayed.

• <p align="right"> can be used to align text to the right.

  Using the P tag, text can be aligned to the right, to the left or center-aligned.

• <p align="left"> can be used to align text to the left.

  Using the P tag, text can be aligned to the right, to the left or center-aligned.

• <p align="center"> can be used to center-align text.

  Using the P tag, text can be aligned to the right, to the left or center-aligned.

The BR tag

• Use the BR tag to add a line break to the page.

Examples:

Richard Smith<br>12345 Main Street <br>Cincinnati, Ohio 45000

renders as:

Richard Smith
12345 Main Street
Cincinnati, Ohio 45000

The Non-breaking space tag

• Use the non-breaking space tag (&nbsp;) to add a space
• Browsers convert multiple spaces into a single space
• To add multiple spaces to a page, you need (&nbsp;)

Examples:

• There are five spaces between the words one and two
  one two

• There are five non-breaking spaces between the words one and two
  one     two

The Comment tag

• Use to add comments to your html pages
• Everything inside the comment tag will be a comment and will not be displayed by the browser.
• <!-- your comment goes here -->

Example:

will be rendered as:

Line 1 of code
Line 2 of code