4. Text Tags

This page describes usage and atttributes of common tags, such as:

  • Title (Heading) Tags
  • Paragraph, Break, Font, and Non-breaking Space Tags
  • Code, Blockquote, and Preformat Tags
  • Ordered, Unordered, and Definition Lists

Title (Heading) Tags

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, <h1>Header 1 Tag</h1> ends up as:

Header 1 Tag

and so on...

<h2>Header 2 Tag</h2> ends up as:

Header 2 Tag

Header 3 Tag

Header 4 Tag

Header 5 Tag
Header 6 Tag

and <p>Normal Text</p> ends up as:
Normal Text

<h3 align="right">Header 3 right aligned</h2> ends up as:

Header 3 right aligned

Header 3 center aligned

Header 3 left aligned

Paragraph Tag

The paragraph tag can be used for several purposes:
  • 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:

The following address:

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

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="Times New Roman, Times"> renders as:  Mary had a little lamb.
    <font face="arial, helvetica"> renders as:  Mary had a little lamb.

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:

Line 1 of code
<!--This is a comment tag -->
Line 2 of code

will be rendered as:

Line 1 of code
Line 2 of code

code

  • container tag
  • monospaced text
  • does not maintain format

For examples, the sentence:

<code>This is
             an example
                        of code text.</code>
is rendered as:


This is an example of code text.

blockquote

  • container tag
  • indented text

Examples:

This is a great tag to indent a block of text.
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.....
Is that the way it goes?

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/08/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

Lists

Lists have many uses. Ordered lists typically use numbers. Unordered lists typically use bullets. Definition lists are useful, obviously, for definitions. Other types of lists are less used.

Ordered List

  • <ol> ... </ol>
  • <li> for each item of the list
  • attributes for <ol>
    • type (A, a, I, i)
    • start
  • attributes for <li>
    • value
    • type (A, a, I, i)

Examples:

Ordered list
<ol>
<li>Item 1 on the list
<li>Item 2 on the list
<li>Item 3 on the list
</ol>

Ordered list

  1. Item 1 on the list
  2. Item 2 on the list
  3. Item 3 on the list

List with type attribute

  1. Item 1 on the list
  2. Item 2 on the list
  3. Item 3 on the list

List with type="I" and start="3'" attributes

  1. Item 1 on the list
  2. Item 2 on the list
  3. Item 3 on the list

List LI value="4" attribute

  1. Item 1 on the list
  2. Item 2 on the list
  3. Item 3 on the list
So, attributes for ordered lists include class, style, start, and type (type can be a capital or lowercase letter, such as A or a, upper or lower case roman numerals, such as I or i, or numbers such as 1, 2, 3, etc.); these attributes are NOT required for the list to work.

Unordered List

  • <ul> ... </ul>
  • <li> for each item of the list
  • attribute for <ul>
    • type (circle, square, disk)
  • attribute for <li>
    • type (circle, square, disk)

Examples:

Unordered list
<ul>
<li>Item 1 on the list
<li>Item 2 on the list
<li>Item 3 on the list
</ul>

Unordered list

  • Item 1 on the list
  • Item 2 on the list
  • Item 3 on the list

List with type="square" attribute

  • Item 1 on the list
  • Item 2 on the list
  • Item 3 on the list
So, attributes for unordered lists include class, style, and type (type can be disc, square, or circle); these attributes are NOT required for the list to work.

Definition List

  • <dl> ... </dl>
  • <dt> for each definition term
  • <dd> for each definition

Examples:

<dl>
    <dt>.gif

<dd>Graphic file format used on the web
    <dt>.html
<dd>ASCII formatted file containing HTML tags
</dl>

Renders as:

.gif
Graphic file format used on the web
.html
ASCII formatted file containing HTML tags


 

Pick Here for Lesson 5 - Page Links