By formatting and positioning your text in a manner which avoids sucking you can really enhance the way your site looks without much work at all. This page of the guide helps you by explaining every HTML text tag and showing you how each works.

The basefont tag commands your browser on which font specifications you want used as default throughout the document. There are three main elements to this tag. First we will specify a default color:

<basefont color="#00FF33">

Now we will add the default size:

<basefont color="#00FF33" size="3">

And now we will add the command for the default font face:

<basefont color="#00FF33" size="3" face="helvetica">

It's all as simple as that! Now your whole page is set up with fancy colors and no more drab default browser settings. This is an ideal tag to use when you plan on changing most or all of the text in a page to a non-default setting. Instead of changing each instance of text separately you can just specify it all at once with the BASEFONT tag.

You can make text appear bold by adding text between these two easy to remember opening and closing tags:

<b>bold text</b>

You can also create bold text by using the strong tag:

<strong<

Text in between the strong tags is bold. Strong and bold do the same thing.

Italic text is created the exact same way as bold text, only the b is replaced by an i. Look:

<i>italic text</i>

Italic text can also be created using the cite and var tags, too. Cite is used to cite someone, and var is short for variable. Both of those tags italicize text just like the i tag does. Here are all three as samples:

<i>italic text</i>
<cite>cited text</cite>
<var>variable text</var>

As you can see they all look the same. So, do yourself a favor and forget all about CITE and VAR because no one needs to know three different ways to do one easy thing.

Underlining is a good way to emphasize text. The U tag is short and sweet:

<u>underlined text</u>

< s > and < s t r i k e >

To make a strikethrough appear through the text on your page you insert one of two tags before and after the selected text. You can use either of these:

<s> or <strike>....</s> or </strike>

How simple is that?

< t t > and and < k b d > and and < s a m p >

Preformatted text is the only of these five tags which has a distinct function. pre will cause a line break before the opening tag and after the closing tag. Typewriter text tt, keyboard text kbd, plain text plaintext and sample text samp all perform the same function. They each make the text look like the courier font. Here is an look at the HTML tags:

<tt><kbd><plaintext><samp>All these tags do the same thing: they make a nasty font</samp></plaintext></kbd></tt>

You might want, or need, to use this hideous text if you think that you are a computer and if you like to talk in a robot voice.

< H # >

The HEADING tag is used to increase the size and thickness of words and put an empty line after them. This tag creates a heading for your page. For example, if your page is called "Dirty Dan's Greasy Spoon Diner" you can out that on top of the page as a heading like this:

Dirty Dan's Greasy Spoon Diner

The HEADING tag consists of two characters, the letter 'h' followed by a number (1-6). Like this: <h3>. You insert a number, 1 - 6, into the spot holding the pound symbol. Size 1 is the largest and 6 the smallest heading size. The text in between the opening and closing tags will be bold and sized accordingly. Small headings are so small that they seem to defy the definition of a heading, but they are available to you, anyway. Here are examples of the 6 heading sizes:

H1 is largest

H2 is the second biggest

H3 is the sorta big

H4 is almost normal

H5 is really rather small

H6 is smallest

You can use the ALIGN element with the HEADER tag. Look:

This is H3 to the right

That was done with this:

<h3 align="right">This is H3 to the right.</h3>

Blockquotes are text that is separated from other text. Instead of simply putting quotes around text you can place it inside BLOCKQUOTE tags and it will have tighter margins and line space above and below. Here is an example of a blockquote:

It's time to stop arresting responsible marijuana smokers. Millions of Americans use marijuana; few abuse it. Arresting these otherwise law-abiding citizens serves no legitimate purpose; extends government into inappropriate areas of our private lives; and causes enormous harm to the lives, careers and families of the more than 500,000 marijuana smokers arrested each year in this country.

And here is the HTML for that:

<BLOCKQUOTE>It's time to stop arresting responsible marijuana 
smokers. Millions of Americans use marijuana; few abuse it. Arresting these 
otherwise law-abiding citizens serves no legitimate purpose; extends government 
into inappropriate areas of our private lives; and causes enormous harm to the 
lives, careers and families of the more than 500,000 marijuana smokers arrested 
each year in this country.</BLOCKQUOTE>

Aside from indenting and separating text you can also be creative and use theBLOCKQUOTE tag around other things, like images, in order to indent and separate them.

< q >

The q tag is used to define a quote within a blockquote (it is nested inside theBLOCKQUOTE tag). Nothing special, just figured someone might care about that. It doesn't even display anything on the screen or format or position text, so no one will even know you're using the tag. Rob said "I will resist!" when the police officer told him to be subordinate. In the above example, the words "go to hell" are enclosed in the Q tag, but you cannot tell unless you check out the source code. So, what I am trying to say is the Q tag is practically useless.

The blink tag is the evilest command ever handed down and given to people with computers. No single HTML tag, not even the frame tag, has evoked as much fear and disgust into the hearts of innocent visitors as the BLINK tag has. It's a virtual tool of satan, if you ask me. Oh yeah, and it's only for Netscape. Internet Explorer will not blink. It is as simple to use as it is annoying:

<blink>This text will blink</blink>

Now do me a favor: never use the BLINK tag. Ever.

and < n o b r > and

Line breaks and paragraph breaks are two of the most basic and necessary ways to format text in the body of your web page. Text has to look nice in order to get visitors to bother reading what it is you have to say to them. And line breaks must be at the correct spots so that you can form paragraphs. Just like in English class, the nicer your presentation looks, the more attention it gets.

In order to end a line and begin a new line with no vertical space in
between the two lines, you use the line break tag:

<br />

In the above line, a line break was placed in between the words "in" and "between". That's irony. Look it up. You might have noticed that the tag has a space and a backslash in it. It is both an opening and a closing tag all rolled into one package.

If you are looking to end a paragraph and start a new paragraph, allowing one line worth of vertical space in between the two paragraphs, you use the PARAGRAPH tag to surround the text:

<p>This text is a paragraph and will have space above and below the paragraph</p>

Like all HTML tags these are easy to remember because they make sense. means "break" and means "paragraph".

An example of both in one paragraph is below:

Marijuana smokers are no different from their nonsmoking peers, except for their marijuana use. Like most
Americans, they are responsible citizens who work hard, raise families, contribute to their communities, and want a safe, crime-free neighborhood in which to live.

In this example, the tag for a break (br)was used after the word "most", and the paragraph tag (p) was used before the first word and after the last word.

In order to keep a line of text continuing unbroken for as long as you'd like, so that the viewer must scroll to the right to read it if the text exceeds one screen length, use this tag before and after the selected text:

<nobr>This line would contain the unbroken text</nobr>

The big tag is a fun tag. At least I think so. This tag with each use increases your font size by one. If you had a size 5 font, doing this:

<big><big>New size</big></big>

...would turn that size 5 font into a size 7 font. How simple is that? For example, on my page 3 big tags makes this: BIG!!! text. Scary!

< s m a l l >

The small tag is equally as fun as the big tag, but in a smaller way. Look:

<small><small<>small><small>Really small </small></small></small></small>

That HTML makes this text: Really small

Think of the possibilities! This is a big deal! This is no small matter!

< a d d r e s s >

The address tag is used for the default size and style of most address lines, like this one:

Judacris
420 Dutch Street
Atlanta, Georgia 30080

That was created with this code:

<address>Judacris
420 Dutch Street<br>
Atlanta, Georgia 30080<br>
</address>

Notice that I still had to include the line break tag (br) in order to force line breaks.

The P tag is the paragraph tag. By placing at the start of each paragraph and at the end you will format the text into paragraphs. And, as you should probably know by now, paragraphs should be clearly separated from other paragraphs. This tag will do that by placing line breaks before and after the paragraph.

and < d i v >

Aligning blocks of text to one side of the page or in the center requires a wider use of the p tag than we talked about before. We can add the ALIGN element so that the paragraph will be on the left (default), right or center. The DIV tag is different from the P tag in that DIV is designed to be used to surround any items, whereas the P tag is meant for text. The DIV tag allows you to DIVide part of the document into different sections. By placing

<div> and </div>

...around items on a page we are able to assign certain properties to that part of the page. Let's look at an example where I put a portion of text into a DIV tag with the element ALIGN="CENTER".

NORML supports the removal of all penalties for the private possession of marijuana by adults, cultivation for personal use, and the casual nonprofit transfers of small amounts. NORML also supports the development of a legally controlled market for marijuana.

That was done with this HTML:

<div align="center">NORML supports the removal 
of all penalties for the private possession of marijuana by 
adults, cultivation for personal use, and the casual nonprofit 
transfers of small amounts. NORML also supports the development 
of a legally controlled market for marijuana. </div>

Although they are meant for different purposes, they can be used the same. The only difference is that the P tag will create a line break before and after the use of the tag.

< d i v >

The DIV tag is used to block off parts of the HTML document that are assigned certain values. The DIV tag will create a line break in the text or content, but it will not add a line of blank space like the P tag will.

< s p a n >

The SPAN tag is used in HTML to seperate inline objects. An inline object is one that is not seperated by white space, such as the B and I tags. If you wanted to apply some CSS styles to just certain part of a line you could use the SPAN tag. You won't need that until you learn Cascading Style Sheets, though. So let's move on.

< s p a c e r >

Simply add width="#" height="#" to the spacer tag, like so:

<spacer width="100" height="100">

That would create a blank spacer with the dimensions of 100 pixels by 100 pixels.

< s u b >

The _subscript tag is used to set text lower than the rest. I'm sure I don't need to get too into explaining it since you should be able to see it right now, on the words _subscript. This tag is simple to remember. Look:

<sub>Subscript Text</sub>

That above HTML creates this _{Subscript Text}

< s u p e r s c r i p t >

'Sup? The ^superscript tag does the opposite of the _subscript tag. Simple enough. The HTML for ^superscript is:

<sup>This is superscript</sup>

And that makes ^{This is superscript}

< t i t l e >

The "other" title tag can be used to create an "alternate text" box when you put the mouse over a link. You might notice a "tooltip" or alt box over this link to YAHOO! below.
YAHOO! And that was done with the following HTML code:

<a href="http://www.yahoo.com" title="This is YAHOO">YAHOO!</a>

CSS For Links

CSS Font Properties

ASCII Codes