Basic HTML Tags

Text is formatted in HTML by the use of markup tags. Below are listed some of the basic tags most commonly used. The basic structure of an HTML document is as follows:

The entire document must be enclosed between a beginning <HTML> and ending </HTML> tag. Within the overall HTML tags are two sections, a HEAD and a BODY.
The head, is enclosed in the <HEAD> and </HEAD> tags. Information in this section is not displayed in the browser window. Inside of the HEAD tag is the <TITLE></TITLE> tag. The contents of this tag will appear in the Title bar of your browser (the Title bar is on the extreme upper edge of most browsers, not in the browser window).
The body, is enclosed in the <BODY></BODY> tags. Everything that appears in the browser window must be in the Body tag. All of the tags we will learn here will be contained between the beginning and ending Body tags (see first example below).

Some tags have a beginning and ending tag while others don't require ending tags. Each line break or paragraph requires a tag since HTML doesn't see carraige returns, indentations, or white space. For a more complete list of tags see the Bare Bones Guide to HTML.

Document Structure

The Code in This Column... Will Display Like This

<HTML>
<HEAD>
<TITLE>Simple Page</TITLE>
</HEAD>
<BODY>
Hello World!
</BODY>
</HTML>
Hello World!

The Code in This Column...	Will Display Like This
<HTML> <HEAD> <TITLE>Simple Page</TITLE> </HEAD> <BODY> Hello World! </BODY> </HTML>	Hello World!

Bold and Italic Text Formatting Tags

<B>Bold</B> and <I>Italic</I>

The Code in This Column...	Will Display Like This
<HTML> <HEAD> <TITLE>Simple Page</TITLE> </HEAD> <BODY> <B>Hello</B><I>World!</I> </BODY> </HTML>	Hello World!

The Heading Tag

<Hn>Heading</Hn>

The Code in This Column...	Will Display Like This
<HTML> <HEAD> <TITLE>Simple Page</TITLE> </HEAD> <BODY> <H1>Hello World!</H1> <H2>Hello World!</H2> <H3>Hello World!</H3> <H4>Hello World!</H4> <H5>Hello World!</H5> </BODY> </HTML>	Hello World! Hello World! Hello World! Hello World! Hello World!

The Code in This Column...

Will Display Like This

<HTML>
<HEAD>
<TITLE>Simple Page</TITLE>
</HEAD>
<BODY>
<H1>Hello World!</H1>
<H2>Hello World!</H2>
<H3>Hello World!</H3>
<H4>Hello World!</H4>
<H5>Hello World!</H5>
</BODY>
</HTML>

Hello World!

Paragraphs and Breaks

<P> and <BR>

The Code in This Column...	Will Display Like This
<HTML> <HEAD> <TITLE>Simple Page</TITLE> </HEAD> <BODY> Hello World!<BR> How Are You?<P> I'm a little confused, myself. </BODY> </HTML>	Hello World! How Are You? I'm a little confused, myself.

Horizontal Rules

<HR>

The Code in This Column...	Will Display Like This
<HTML> <HEAD> <TITLE>Simple Page</TITLE> </HEAD> <BODY> Hello World!<BR> How Are You?<BR> <HR> I'm a little confused, myself. </BODY> </HTML>	Hello World! How Are You? I'm a little confused, myself.

Putting It All Together

The Code in This Column...	Will Display Like This
<HTML> <HEAD> <TITLE>Simple Page</TITLE> </HEAD> <BODY> <H2>A Greeting</H2> <HR> Hello World!<BR> I am trying to learn how to write my own HTML pages and it's a <I>lot</I> easier than I thought.<P> But I'm a little confused. </BODY> </HTML>	A Greeting Hello World! I am trying to learn how to write my own HTML pages and it's a lot easier than I thought. But I'm still a little confused.

The Code in This Column...

Will Display Like This

<HTML>
<HEAD>
<TITLE>Simple Page</TITLE>
</HEAD>
<BODY>
<H2>A Greeting</H2>
<HR>
Hello World!<BR>
I am trying to learn how to write my own HTML pages and it's a <I>lot</I> easier than I thought.<P>
But I'm a little confused.
</BODY>
</HTML>

A Greeting

Hello World!
I am trying to learn how to write my own HTML pages and it's a lot easier than I thought.

But I'm still a little confused.

Pre- Formatted Text

The Code in This Column...	Will Display Like This
Sometimes text has to line up.<P> <PRE> ^ ^ O O L \___/ </PRE>	Sometimes text has to line up. ^ ^ O O L \___/
Sometimes text has to line up. ^ ^ O O L \___/	Sometimes text has to line up. ^ ^ O O L \___/

The Code in This Column...

Will Display Like This

Sometimes text has to line up.<P>
<PRE>
^   ^
O   O
  L
\___/
</PRE>

Sometimes text has to line up.

^   ^
O   O
  L
\___/

Sometimes text has to line up.
^   ^
O   O
  L
\___/

Sometimes text has to line up. ^ ^ O O L \___/