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:
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>
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>
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:
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:
…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…
Loading ...
If you like "HTML Tags List and Examples,"
please consider linking to this article: