Formatting Your Text

The most important tags in HTML are tags that define text and paragraphs. Two of these tags include the <font> and the <h>. When you input HTML code, you can never be sure how the text is displayed in another browser, a lot depends on screen resolutions and browser default settings. Never try to format the text in your editor by adding empty lines and spaces to the text, it may line up nicely in your editor, but will appear differently as a Web page. When writing your HTML you may use extra lines between your code to keep sections separated. It will not affect the HTML.

TIP: When inputting your text, use a single space between your words. Double spaces are ignored by browsers. If you need more than one space to indent a paragraph or single line use non-breaking spaces: &nbs;

The <font> Tag and its Attributes

To specify font size, you use the attribute size="x". Font sizes are not a fixed size and the values allowed are 1 through 7, +1 through +7 and -1 through -7. They may vary on the viewers browser settings and screen resolutions. The + and - values are relative to the defaults set by the browser, whereas the unsigned values are absolute sizes, with 3 being the default. If a browser sets 3 as the default, you can only impose a relative effect down to -2. When the relative math exceeds the absolute values, there will be no additional scaling. Click here for example of default font sizes viewed at normal, largest (increase +2) and smallest (decrease -2) in Firefox.

To specify the font face, you use the attribute face="x". Be careful when choosing your font style. The font must be on the viewers computer to be displayed properly. In other words, if you find a cool font and download it to your computer and use it for your headings, unless the viewer happens to have downloaded the same font, the headline will be displayed using the browsers default font. It could really change the appearance of your page. To learn more about browser friendly fonts, please see Browser Safe Fonts

To specify the font color, you use the attribute color="#x" with the value being a hex number. For more information on choosing colors, please see Choosing Your Colors.

You can also use certain tags to make your text bold, italic, or underlined. These tags are placed directly before and after the text that you want to modify.

<b>Bold</b>

<i>Italic</i> 

<sub>Subscript</sub>

<sup>Superscript</sup>

<del>Deleted</del>

<u>Underline</u>

<pre>Preformatted</pre>

Here is how the font tag looks coded with the size, color and face attributes, as well as making the text bold/italic:

<font size="3" color="#7b7e00" face="arial, helvetica, sans-serif">

<b><i>Text Goes Here</i></b>

</font>

The <pre> tag is good for displaying text that you want to align a certain way. It preserves both spaces and line breaks, and uses monospace fonts for display.

 /\_/\  This cat picture
( o.o ) is made of text
 > ^ <  only!

IMPORTANT: The World Wide Web Consortium (W3C) has removed the <font> tag from its recommendations and it possibly will be removed altogether in future versions of HTML. Although it is still in widely in use, it is recommended that you learn how to use CSS instead. For more information on text and CSS, please see Formatting Your Text/CSS.

Use of the Heading <h> Tag

Headings are defined with the <h1> to <h6> tags. <h1> is the largest heading and <h6> is the smallest heading. Use heading tags only for headings. The <h1> will by default make your text bold but do not use them just to make something bold. HTML automatically adds an extra blank line before and after a heading.

<h1>Headline Goes Here</h1>

 TO TOP