Home

Contact Us

Author Guidelines

Terms of Service

New Member?

Author Login

	E-mail this article
	Report this article
	Publish this article

A Simple HTML Tutorial for Online Authors

ost article sites that are open to the public allow a limited number of simple HTML tags to be used in your articles for formatting and emphasis purposes, but knowing how to use these tags effectively may require a little explanation. After you have used them a few times and previewed the results, it will become obvious how they work and you may use them often.

The simplest of these tags are used for displaying text as bold or italic for emphasis. There are two tags for creating bold text, <b> and <strong>. One of these is called a logical attribute, and the other is a physical attribute. At one time, many browsers treated these attribute types differently, but with most modern browsers, the difference has become irrelevant and the two tags are treated the same way.

To make text bold, you must have the start bold tag above just before the bold text, and an end bold tag immediately following the bold text. The end bold tag looks like this: </b>. These formatting tags are used in pairs, one to tell the browser where to start the bold text, and a second one to tell the browser where to end the bold text.

So to make a single word in a sentence bold, you would type it in like this:
This is <b>bold</b> text.
And the sentence would come out looking like this:
This is bold text.

Italic text works the same way with the start italic (<i>) and end italic (</i>) tags. These tags also have physical attribute counterparts (<em> and </em>), but like the bold tags, these are interchangeable in modern browsers. To make a single word in a sentence italic, you would type it in like this:
This is <i>italic</i> text.
And the sentence would come out looking like this:
This is italic text.

These tags may also be combined to produce another effect. By nesting the tags above, you can create text that is both bold and italic. To make words in a sentence bold and italic, you would type it in like this:
This is <b><i>bold and italic</i></b> text.
And the sentence would come out looking like this:
This is bold and italic text.

As illustrated above, when you nest tags to get text that is both bold and italic, you should end the tags in reverse order. Like in the example, if you open the bold tag first, you should close it last. If you open the italic tag last, you should close it first. When nesting HTML tags, the rule is, "First in, last out."

In each case, it is very important to remember the end tag. If you omit it, all of your text from the point where you invoked bold or italic text to the end of your article will be affected. This is one good reason to use the preview often while creating your article. You may think you've used the tags correctly, but problems like this will be visually obvious when you see the page rendered in a browser.

The other tags that are commonly permitted on article sites are for creating lists. Many people try to create simulated lists by typing in a number or some bullet character followed by the sentence or other list item. They often try to pad the line out by including multiple spaces or tabs. The results of this approach will be disappointing for more than one reason.

If you use numbers for your list items, they will not line up correctly using a proportional font, especially if you get into two-digit numbers, which will give your list a jagged appearance. Long sentences will wrap in a way that is inconsistent with list formatting, causing your bullets to be lost in a sea of lines that all begin at the extreme left. Padding your lines out with tabs or multiple spaces doesn't work because browsers ignore these characters. Browsers will render tabs or multiple tabs as a single space, and they will render multiple spaces as a single space. You can put ten tabs or twenty spaces in the middle of your line, but when you view the page in a browser, all you will see is a single space. This makes getting your simulated list to align properly impossible. Fortunately, all of these problems can be solved by using the HTML list tags which are supported by most article sites.

A simulated list might look like this:

1. This is list item one.
2. This is list item two.
3. Number three is an extra-long list item that illustrates the behavior when the line wraps. If many lines wrap within the list, it won't even look like a list anymore.
4. This is list item four.

The same items in an HTML list will look like this:

1. This is list item one.
2. This is list item two.
3. Number three is an extra-long list item that illustrates the behavior when the line wraps. This is what you expect to see when a line wraps within a list.
4. This is list item four.

• This is list item one.
• This is list item two.
• Number three is an extra-long list item that illustrates the behavior when the line wraps. This is what you expect to see when a line wraps within a list.
• This is list item four.

David is a Perl and PHP programmer for web-based database applications. He is the programmer responsible for the functionality and interface design of IncredibleArticles.com.