HTML Tags List and Examples

Special HTML Tags

There are special tags that work with fonts to increase or decrease size. The <BIG></BIG> and <SMALL></SMALL>, although uncommon, can be used.

HTML Header Tags

More commonly used are header tags. These are used for headlines of a page, and are fixed within the tag. You can not change the size, font or color within a header tag. These are <H1>, <H2>, …, <H6>, with 1 as the largest and 6 as the smallest. So the following code:

<HTML>

<HEAD><TITLE>Header Sizes</TITLE></HEAD>

<BODY>

<H1>This is Header 1!</FONT><BR>

<H2>This is Header 2!</FONT><BR>

<H3>This is Header 3!</FONT><BR>

<H4>This is Header 4!</FONT><BR>

<H5>This is Header 5!</FONT><BR>

<H6>This is Header 6!</FONT><BR>

</BODY>

</HTML>

Produces the following page:

HTML Header Tag

Headers are best used for a quick topic title, such as at the top of your page or at the beginning of new sections of text when you are writing.

HTML Bold, Italics and Underline Tags

Now, there are many more things we can do with our text. The most common three are bold, italics, and underlining. These use the following tag sets: <b></b>, <i></i>, and <u></u>.

<HTML>

<HEAD><TITLE>Text Example</TITLE></HEAD>

<BODY>

This is regular text.<BR>

<b>This is bold text.</b><BR>

<i>This is italicized text.</i><BR>

<u>This is underlined text.</u><BR>

</BODY>

</HTML>

HTML Bold, Italicize and Underline Tags

These are quick and easy tags you can use anywhere to add some emphasis or stress to your text. As mentioned before, the <BR> tag causes a line break, such as hitting enter would in a word processor.

HTML Center Tag

There is one more indispensable tag related to text-formating. That is the <CENTER> tag. Very often, you will want to center text, or center headers (<H1>). This is done by surrounding that text with a pair of <CENTER> </CENTER> tags. For example:

<HTML>

<HEAD><TITLE>Text Example</TITLE></HEAD>

<BODY>

<CENTER><H1>Next Topic</H1></CENTER>

This is the next topic.

</BODY>

</HTML>

HTML Center Tag

You can see the “Next Topic” header is centered. You can also use <CENTER> tags around tables or full sections of text. Using <BR> tags inside of <CENTER> tags keeps you from needing to over use the <CENTER> tag. So instead of:

<HTML>

<HEAD><TITLE>Center Example</TITLE></HEAD>

<BODY>

<CENTER>This is paragraph one. This is paragraph one. This is paragraph one. This is paragraph one. This is paragraph one. This is paragraph one. This is paragraph one. This is paragraph one. This is paragraph one. This is paragraph one. </CENTER>

<BR>

<CENTER>This is paragraph two. This is paragraph two. This is paragraph two. This is paragraph two. This is paragraph two. This is paragraph two. This is paragraph two. This is paragraph two. This is paragraph two. This is paragraph two. </CENTER>

<BR>

<CENTER>This is paragraph three. This is paragraph three. This is paragraph three. This is paragraph three. This is paragraph three. This is paragraph three. This is paragraph three. This is paragraph three. This is paragraph three. </CENTER>

</BODY>

</HTML>

You can use:

<HTML>

<HEAD><TITLE>Center Example</TITLE></HEAD>

<BODY>

<CENTER>This is paragraph one. This is paragraph one. This is paragraph one. This is paragraph one. This is paragraph one. This is paragraph one. This is paragraph one. This is paragraph one. This is paragraph one. This is paragraph one.

<BR><BR>

This is paragraph two. This is paragraph two. This is paragraph two. This is paragraph two. This is paragraph two. This is paragraph two. This is paragraph two. This is paragraph two. This is paragraph two. This is paragraph two.

<BR><BR>

This is paragraph three. This is paragraph three. This is paragraph three. This is paragraph three. This is paragraph three. This is paragraph three. This is paragraph three. This is paragraph three. This is paragraph three. </CENTER>

</BODY>

</HTML>

Both yield the same result:

HTML Center and BR Tag

However, notice that I doubled the <BR> after each paragraph to maintain the double spacing. This is because a close </CENTER> tag naturally forces a <BR>. So to compensate, I added one more between each paragraph. Keeping paragraphs double spaced on web pages is a really good idea (as well as keeping paragraphs fairly short), as it keeps people’s attention and creates a more attractive layout.

HTML Bullet List Tag

The last thing of interest in HTML text-formating via tags is using bullet points. There are two basic types of lists - ordered lists and unordered lists. Ordered lists are numbered, and unordered lists are bullet pointed. Both work exactly the same, except the surrounding tag differs. For an ordered list, you use <OL>. For an unordered list, you use <UL>. Your <OL> or <UL> tag sets (closed by </OL> or </UL, respectively) surround the actual points, which are preceded by <LI> tags. You can enclose the text with a second, </LI> tag, but it is not necessary. So for an ordered list, you can do:

<OL>

<LI> Go to the store.

<LI> Pick up laundry.

<LI> Shampoo the dog.

</OL>

And for unordered lists

you can do:

<UL>

<LI> Three sticks of butter.

<LI> Two cups of water.

<LI> One loaf of bread.

</UL>

The above HTML code example create these 2 lists:

HTML List Tag

…And there you have it: all the HTML tags you can use to format the text of your web page.

On the next HTML tutorial, we’ll look at the Special Characters in HTML. Stay tuned…



If you like "HTML Tags List and Examples,"
please consider linking to this article:

Leave a Reply




(spam protection)
Allowed tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>

Subscribe without commenting

« Previous
« HTML Font Properties, Usage and Examples | Up Top | Mailto Email Link and HTML Hyper-Links »
Recent Comments
James Smith: Wow… I’m stunned you could do that.
e-orchids: very nice article thanks for posting….. E-orchids
Html Meta Tag: It’s an enormous advantage to have read your post. In fact, I learn a lot from it. It was certainly...
Medical Web Experts: Nice post!!! Really an amazing observation regarding the advantages of flash! Flash has been...
Web Tasarım: This is very nice post. thank you.
Web Design Development: Testing comment.