Miscellaneous Text Elements

Preformatted Text

Have you noticed that the extra white space that you may create in Notepad when you enter your HTML tags is stripped out by the browser when it is displayed. Extra vertical white space that you may create by pressing ENTER in Notepad is not recognized in the browser.  The browser will also ignore extra horizontal white space created by pressing the SPACEBAR.  If you want to retain this extra white space, surround the text with the <pre> tags.  This tag instructs the browser not to strip out the extra white space but to leave it as it is. Most browsers will also display the text using a monospaced font such as Courier. 

The illustration in this chapter of the table that is surrounded by the <pre> tags is an example of text that could be typed in Notepad simply using the spacebar to line up the columns.  If the <pre> tags are not used, the browser will strip out the extra horizontal spaces.  After you learn to use tables in HTML, you will understand why it would be better to organize this type of text in a table rather than using the <pre> tags.

Horizontal Rules

The <hr /> tag has no closing tag in HTML. To convert this tag to XHTML and to ensure compatibility with HTML browsers, add a space and a forward slash to the end of the tag:

<hr />

Rule lines are excellent for visually separating sections of a Web page.  There are four attributes discussed in this chapter that can be used with the <hr /> tag: size, width, align, and noshade.  All or none of the attributes can be included in the <hr /> tag.

Line Break

The <br /> tag allows you to break a line of text at the point it appears. Lines that are separated by the <br /> tag will appear to be single spaced. It should not be used to control line endings in normal paragraphs of text since the monitor size and resolution may vary from one viewer to another. The <br /> tag is used to end the short lines below:

Joe Smith
222 Lincoln Street
Omaha, NE 68111

 

Like the <hr /> tag, the <br /> tag has no closing tag in HTML. To convert this tag to XHTML add a space and a forward slash to the end of the tag.

 

Addresses

This tag is designed to be used for signature-like elements. Most browsers will italicize the text found inside the <address> tags. Why use the <address> tag and not the <i> or <em> tag? I don't really have a good argument for this question at this point. If you use a Style Sheet, then there is a definite advantage to using the <address> tag.  We do not cover Style Sheets in this class, but it is covered in the CSS and Accessibility Course.

 

Quotations

The <blockquote> tag is designed to be used for quotations, but many developers will use this tag to simply control indention. There isn't an indent tag defined in HTML but the <blockquote> tag will cause indention at the left and right margins in most browsers. If the <blockquote> tag is left open, all of the text from the open tag forward will be indented about a half inch. The amount of the indention may vary in different browsers. Using multiple <blockquote> tags before text, will increase the amount of indention. If you include more that one open <blockquote> tag before text you want to indent, be sure that you insert a closing tag for every open tag to return your text to the left margin.

 

Special Characters

To include a special character that is not available on your keyboard (and even a few that are available on the keyboard), you will use a character entity. The Appendix in your HTML book has a complete list of the special characters that are available along with their numeric entity. Some of the more frequently used characters also have a named entity assigned to it. All character entities will begin with the ampersand (&) and end with a semi-colon (;).

To add an address that includes the name of the author and the copyright symbol, use the HTML shown below:

<address>Created by Tania Kuisma &#169;</address>

The text would display like this:

Created by Tania Kuisma ©
Character Keystroke
¾ &#190; or &frac34;
© &#169;
® &#174;
· &#183; or &middot;
¢ &#162;