What is an HTML tag?

A tag is an HTML programming code used to format your web content as you think it should look. Tags tell your browser to bold text, build a table, add graphics, change the color of the page, etc.

Tags are always enclosed in brackets, < > (less than, greater than). Your browser will interpret the code inside the brackets, but will not show a tag, brackets or code, on your web page. Only the formatted content result shows up on your page.

Most tags come in sets. An opening tag and a closing tag. The closing tag is distinguished by the / (forward slash) inside the brackets, </ tag >.

Often you will use multiple tags to format one object. It is important that you close tags in the reverse order you opened them.

Example:

I will make the word Motocross bold and italic.

Here is the code.

I will make the word <B><I>Motocross</I></B> bold and italic.

Notice how I closed the <I>, Italics tag, before closing the <B>, bold tag. Also notice the tags are not visible on my page in the example sentence, only the results.

Note on case:

For the tags, case (upper or lower case letters) is not important, except when quoting a specific file or location.

Example: <B> works the same as <b> to format bold text.

Example: <A HREF="pictures/sobohome.jpg"> and <a href="Pictures/Sobohome.JPG"> will not work the same. Not because the tags (A HREF and a href) were different, but because the path and file name used different cases. Directories and file names need strict case management, including the file extension. Type them in your code exactly as they are in your computer.

Lose the spaces in your web directory and file names. Use the underscore if you want spaces in you names. Change a directory name like Baby Pictures to Baby_Pictures. You will save yourself a lot of grief if you do. Also note that even if it works on your computer at home, leaving the spaces, it won't work on many others. It's all about compatibility with the world after all. Directories and file names with spaces are fine everywhere else, if your computer is compatible with them, just not in your website directories and files.

I use all upper case letters for my tags, except file and directory names of course. That helps me to separate my tags from the rest of the text in my code document. Works for me. You will have to decide for yourself what works for you.

<A HREF="filename or URL"> </A>

(Hyperlink Reference or Link) Type a filename, path to a file, or a URL you want to link to, between the quotation marks in the opening tag. Do use the quotation marks. Place the opening tag in front of the text or graphic you want to make into a hyperlink. Place the closing tag after the text or graphic. As always, the tags will not show up in your page. So don't worry how it looks in your text editor. Do Not forget to use the closing tag, </A>.

The reference can be absolute or relative.

An absolute reference will be used to link to an off site location, like another website.

Sample Code, Absolute link:

Visit <A HREF="http://www.anandtech.com">Anand Tech</A> for technical stuff.

Result: The words, Anand Tech, are a hyperlink.

Visit Anand Tech for technical stuff.

A relative reference would link to something on the same website. You can just put the "filename.ext" if the file is in the same directory as the page file. Otherwise you need to show the relative path, "directory_name/filename.ext". Notice the forward slash in the path.

Sample Code, Relative link:

This is <A HREF="pictures/sobohome.jpg">Soboku</A>. Isn't he handsome?

Result: Click the link to see Soboku, sobohome.jpg.

This is Soboku. Isn't he handsome?

Open a link in a new window. Sometimes you want to link to another page, but you do not want your viewers to leave your page. The answer to that is to open the linked page in a new window. To do that we use the TARGET=NEW command within the A HREF tag.

Sample Code, Open link in new window:

Your kids will enjoy the <A HREF="http://www.nickjr.com" TARGET=NEW>Nick Jr</A> website.

Result: Click the Nick Jr link and see what happens. Close the Nick Jr page when you're done playing. Your page is still open.

Your kids will enjoy the Nick Jr website.

Graphics can also be used as link objects. You will do this when you want a small picture to link to a larger picture, sometimes the same, sometimes different. Or when you use fancy buttons or WordArt to spice up your page menus. Also note the use of the IMG SRC tag to set the sobohome.jpg image on the page.

The A HREF tag refers, or links, to the image you want to see. The IMG SRC tag sets the picture you want to use as the link object on the page. The IMG SRC tag is used to place graphics on your page, even when not creating links. More on IMG SRC later.

Sample Code, Graphics as link object:

<A HREF="pictures/soborocks.jpg"><IMG SRC="pictures/sobohome.jpg"></A>

Result: The sobohome.jpg picture is now a link to the soborocks.jpg picture. Use the Back button on your browser to return after viewing the picture.

Sorry to get so wordy on the first subject. Most of the tags are not this complex. You do want to get it right, don't you? Hyperlinks are the heart of the Internet. Without them, you go nowhere.

<BODY> </BODY>

The BODY tags enclose all of the visible content on your page. Within the opening BODY tag you can set certain page formats like:

BGCOLOR=xxxxxx (background color)
BACKGROUND="filename.ext" (background picture)
TEXT=xxxxxx (text color)
LINK=xxxxxx (link color)
and more.

Sample code: This sample also shows how the BODY tags fit in with the rest of the page tags.

<HTML>
<HEAD>
<TITLE>Sobo's Web Page</TITLE>
</HEAD>

<BODY BGCOLOR=00ff33 TEXT=000066 LINK=ff3399 VLINK=3399ff>

Then all of your page content goes here, followed by the closing BODY tag. I have included content code here to show how it all fits between the BODY tags.

<UL>Things to note on this page:
<LI>The title you typed between the TITLE tags, Sobo's Web Page, shows up in the upper left corner of your browser window.
<LI>BGCOLOR=00ff33, Background color should be green
<LI>TEXT=000066, Text color should be dark blue
<LI>LINK=ff3399, Link color around the image should be pink
<LI>VLINK=3399ff, After visiting a link it should be blue
<LI>I used the CENTER tag to center the image horizontally
<LI>You can make cool lists like this using list tags
<LI>Check out the <A HREF="colorchart.htm">Color Chart</A> to see the color codes you can select
<LI>Don't forget the closing tag
</UL>

<CENTER>
<A HREF="pictures/soborocks.jpg"><IMG SRC="pictures/sobohome.jpg"></A>
</CENTER>

</BODY>

</HTML>

To see what this page would look like, Click Here

To see what this page looks like using the BACKGROUND format instead of the BGCOLOR format, Click Here. The only difference is removing the BGCOLOR=00ff33 format and replacing it with BACKGROUND="pictures/tayhome.jpg". The picture is very small but the browser will tile it to cover the whole page. Usually a soft gray-scale picture works best here because a bright picture can interfer with the readability of your page. Neat even texture graphic pictures can be used very nicely. By using a small picture you are also saving a lot of people a lot of time. If you used a picture that was literally as large as the screen, it could take 10 or more minutes just to load the background. Nobody wants to wait that long.

Now Click Here

<B> </B>

Code: These tags create <B>BOLD TEXT</B> like that.

Result: These tags create BOLD TEXT like that.

<BR>

(Line Break) This tag starts a new line like hitting the Enter key in your text editor. (no closing tag)

Code: Oreo cookies taste real good <BR>late at night!

Result:
Oreo cookies taste real good
late at night!

<CENTER> </CENTER>

Anything, text, picture, or table, placed between these tags will be centered, horizontally, on the page. The title at the top of this page, How to Build a Website, and the sub title, Tags Table, were set between one set of CENTER tags. You do not need a separate set of tags for each object if they all follow each other on the page.

Code: (see the top title for the results)

<CENTER>
<H2>How to Build a Web Site</H2><B>Tags Table</B>
</CENTER>

<DL> </DL>

Descriptive List This tags guide is a big descriptive list, below the Quick reference Table. It gives you a topic and indents for paragraph descriptions. You can have multiple paragraphs under a topic.

<DL> Opening tag
<DT> The Description Title sits on the left margin. It should designate what you want to describe.
<DD> The Description Data is the definition of whatever you designated on the DT line. It is automatically indented.
</DL> Closing tag

Code: Note the use of the <P>, paragraph tag, used to create space between the topics. You could also bold the titles (DT) if you wanted to.

<DL>
<DT>My Christmas List
<DD>If anyone out there wants to make me very happy, here is the clear cut way to do it.
<P>
<DT>Yamaha YZ400F
<DD>Heck I'd even let you ride it, once. They are only about $5,000. The YZ400F is Yamahas 4 stroke motocross bike. Besides that, they are a really pretty blue color.
<P>
<DT>Ford F-150 Crew Cab
<DD>The new F-150 Crew Cab is going to be based on the Expedition front end and passenger compartment, including the back seat. It will have a 5.5' cargo bed I can use to haul the new Yamaha in.
<P>
<DT>Intense UZZI SL
<DD>This should only set you back about $4,000. It's a really cool full suspension mountain bike with all the best stuff on it. You don't think I am asking for too much, do you?
</DL>

Result:

My Christmas List

If anyone out there wants to make me very happy, here is the clear cut way to do it.

Yamaha YZ400F

Heck I'd even let you ride it, once. They are only about $5,000. The YZ400F is Yamahas 4 stroke motocross bike. Besides that, they are a really pretty blue color.

Ford F-150 Crew Cab

The new F-150 Crew Cab is going to be based on the Expedition front end and passenger compartment, including the back seat. It will have a 5.5' cargo bed I can use to haul the new Yamaha in.

Intense UZZI SL

This should only set you back about $4,000. It's a really cool full suspension mountain bike with all the best stuff on it. You don't think I am asking for too much, do you?

Also see Ordered Lists <OL> and Unordered Lists <UL>

<FONT> </FONT>

(Font Face= Size= Color=)The opening tag contains the font formating options. The closing tag remains the same. You can specify the desired font to be used, but you have to be careful because the font you choose may not be on your viewer's computer. Use common fonts. You can also set multiple font options. This tag does not include an automatic paragraph break so it is suitable for mid-sentence changes as desired. Default font size is 3. Don't forget the closing tag after each style cange.

Code:

<FONT FACE="ARIAL,HELVETICA" SIZE=4 COLOR=003300>Size 4</FONT>

Result: The opening and closing tags were used around each these different size and color fonts. Of course the size and color format options were altered to make the change. If the viewer's computer does not have any of the fonts in the FACE= statement, it will default to the default font which is typically a serif font like Times Roman. Arial and Helvetica can be found on almost all computers, so they are a wise choice for sans-serif type fonts. These tutorial pages are Arial or Helvetica, if you have them, except the titles at the top which are the serif style. Who did shoot the serif anyway? Got any Oreos?

Size 1 Size 4 Size 7

See the Color Chart for color codes.

<H#> </H#>

(Header Font Size) Use these tags to set the font size of the title on your page. The # (number) qualifiers are 1 (biggest) to 5 (smallest). It comes with an automatic bold format and paragraph break, so be careful how you use these.

Code:

<H1>1-biggest</H1> <H3>3-middle size</H3> <H5>5-smallest</H5>

Result: Note the automatic paragraph break and bold text. This is not suitable for mid-sentence format changes. Use the FONT tag for that.

1-biggest

3-middle size

5-smallest

<HEAD> </HEAD>

The HEAD set starts and stops the header section. You will want to put a few things like the Title in the header.

Code: This is how the HEAD tags fit into your code document.

<HTML>
<HEAD>
<TITLE>Sobo's Web Page</TITLE>
</HEAD>

<BODY BGCOLOR=00ff33 TEXT=000066 LINK=ff3399 VLINK=3399ff>

Then all of your page content goes here.

</BODY>

</HTML>

<HR>

Horizontal Rule This places a horizontal line across your page. They can be used as section dividers like I did on this page between the title and the rest of the page. There are a few formatting options you can apply to customize your horizontal rule. No closing tag.

Some of the formatting options are:

WIDTH=#% or WIDTH=# (pixels)
SIZE=# (see samples)
NOSHADE No shadow(flat, no 3d effect)
ALIGN=RIGHT or ALIGN=LEFT (default is centered)

Code:

<HR>

Results:

---

<HR SIZE=5 WIDTH=400>

Results:

---

<HR SIZE=15 WIDTH=75% ALIGN=RIGHT NOSHADE>

Results:

---

<HTML> </HTML>

The HTML set starts and stops the HTML code. Place the opening tag, <HTML>, at the beginning of the document and the closing tag, </HTML>, at the end. It sets the HTML boundaries for the browser. Although not always necessary, it is a good idea to use them to save compatibility problems.

<HTML>
<HEAD>
<TITLE>Sobo's Web Page</TITLE>
</HEAD>

<BODY BGCOLOR=00ff33 TEXT=000066 LINK=ff3399 VLINK=3399ff>

Then all of your page content goes here.

</BODY>

</HTML>

<I> </I>

Italics

Code:

<I>How can you tell if the period, ., is Italisized?</I>

Results:

How can you tell if the period, ., is Italisized?

<IMG SRC="xx">

Image Source Use this tag to insert graphics into your web page. Type the filename.ext, or the path to your picture if it is not in the same directory as the web page, between the quotation marks.

Code: exact case duplication is important when stating the filename.ext or directory names.

<IMG SRC="pictures/sobohome.jpg">

Result:

There are quite a few options for placing your image on your page or how it relates to the text on you page.

ALIGN=RIGHT Aligns your image on the right side of the page and your text will word wrap around the image.

Code: Notice the ALIGN option is placed between IMG and SRC.

<IMG ALIGN=RIGHT SRC="pictures/sobohome.jpg">This shows how the text interacts with the image on your page. Understand, the image is actually square. That is why it doesn't wrap to the visible circle shape. With this option the text will wrap around the left side of the image. It will space each line as if the image wasn't there. If you use the TOP, MIDDLE, or BOTTOM options the text will align as told, but the next line won't start until the after the graphic, often leaving a big gap between lines.

Result:

This shows how the text interacts with the image on your page. Understand, the image is actually square. That is why it doesn't wrap to the visible circle shape. With this option the text will wrap around the left side of the image. It will space each line as if the image wasn't there. If you use the TOP, MIDDLE, or BOTTOM options the text will align as told, but the next line won't start until the after the graphic, often leaving a big gap between lines.

ALIGN=LEFT Aligns your image on the left side of the page and your text will word wrap around the image.

Code:

<IMG ALIGN=LEFT SRC="pictures/sobohome.jpg">This shows how the text interacts with the image on your page. Understand, the image is actually square. That is why it doesn't wrap to the visible circle shape. With this option the text will wrap around the left side of the image. It will space each line as if the image wasn't there. If you use the TOP, MIDDLE, or BOTTOM options the text will align as told, but the next line won't start until the after the graphic, often leaving a big gap between lines.

Result:

This shows how the text interacts with the image on your page. Understand, the image is actually square. That is why it doesn't wrap to the visible circle shape. With this option the text will wrap around the left side of the image. It will space each line as if the image wasn't there. If you use the TOP, MIDDLE, or BOTTOM options the text will align as told, but the next line won't start until the after the graphic, often leaving a big gap between lines. If we keep writing text you will see how it will eventually find the edge of the document again. See what I mean. Yeah I know this part of the text was not in the code text above. It was a last minute add to show the word wrapping.

ALIGN=TOP, MIDDLE, or BOTTOM These option align the adjacent text as told, but the next line will be below the image. This might work well for a short caption.

Code:

<IMG ALIGN=TOP SRC="pictures/tayhome.jpg">As the text wraps around for the next line you will see what I mean when I say the next line will be below the image. Doesn't look real pretty for paragraph text, does it.

Result: The top of the first line of text aligns with the top of the image.

As the text wraps around for the next line you will see what I mean when I say the next line will be below the image. Doesn't look real pretty for paragraph text, does it.

Code:

<IMG ALIGN=MIDDLE SRC="pictures/tayhome.jpg">As the text wraps around for the next line you will see what I mean when I say the next line will be below the image. Doesn't look real pretty for paragraph text, does it.

Result: The bottom of the first text line aligns with the center line of the image.

As the text wraps around for the next line you will see what I mean when I say the next line will be below the image. Doesn't look real pretty for paragraph text, does it.

Code:

<IMG ALIGN=BOTTOM SRC="pictures/tayhome.jpg">As the text wraps around for the next line you will see what I mean when I say the next line will be below the image. Doesn't look real pretty for paragraph text, does it. It's not so bad with the bottom alignment, but you have a lot of dead space above the text.

Result: The bottom of the first text line aligns with the bottom line of the image.

As the text wraps around for the next line you will see what I mean when I say the next line will be below the image. Doesn't look real pretty for paragraph text, does it. It's not so bad with the bottom alignment, but you have a lot of dead space above the text.

Here are some other examples of image code options.

<IMG BORDER=10 SRC="pictures/tayhome.jpg"> The BORDER=0 option is useful if you do not want to see a hperlink colored border around an image being used as a link. It can also be used to place a visible frame around your image, like the example code. Example:

<IMG HSPACE=40 VSPACE=40 ALIGN=MIDDLE SRC="pictures/tayhome.jpg"> Horizontal Space, Vertical Space: The HSPACE format places a buffer, as specified in pixels, on the right and left side of the image. The VSPACE format does the same for above and below the image. This is useful to keep your text from crowding your images or vise versa. Notice how the example is spaced from the wall and below the previous text. Example:

Notice the VSPACE?
Notice the HSPACE?

<IMG WIDTH=35% HEIGHT=200 SRC="pictures/tayhome.jpg"> HEIGHT and WIDTH can each be specified in % (percent) of page or number of pixels. I prefer to size my images before placing them in my document. In this example I made it 35% of the width available, not counting the frame on the left of the screen or the indent from the list format I am using. The height was adjusted to 200 pixels. Be carful not too stretch your images too much. Example:

<CENTER><IMG SRC="pictures/sobohome.jpg"></CENTER> Use the CENTER tags to place your image in the center of the available horizontal space. I don't think you can word wrap around a free standing, centered image.

<OL> </OL>

Ordered List This creates a numbered list where the list items are automatically numbered.

<OL> Opening tag
<LI> List item, repeat for each list item
</OL> Closing tag

Code:

Little League Standings
<OL>
<LI>Tigers
<LI>Bears
<LI>Stars
<LI>Lightning
<LI>Missles
</OL>

Result:

Little League Standings

1. Tigers
2. Bears
3. Stars
4. Lightning
5. Missles

Also see Unordered Lists <UL> and Descriptive Lists <DL>

<P> </P>

(Paragraph) This tag starts a new paragraph and leaves a space between them. It's like hitting the Enter key twice in your text editor. The closing tag is only used if you use the ALIGN=RIGHT or ALIGN=CENTER options. The default aligment is left and needs no closing tag.

Code: (without using the paragraph tags)

This is how your text would look in your text editor using the enter/return key twice to place a space between the paragraphs. No paragraph tag was used between the paragraphs.

This is the second paragraph. Looks pretty good, huh? Check out the results. No paragraph separation on your web page.

Result: As seen in your browser

This is how your text would look in your text editor using the enter/return key twice to place a space between the paragraphs. No paragraph tag was used between the paragraphs. This is the second paragraph. Looks pretty good, huh? Check out the results. No paragraph separation on your web page.

Code: (using the paragraph tag between paragraphs)

This is how your text and tags would look in your text editor using the paragraph tag between the paragraphs.
<P>
This is the second paragraph. Notice how the proper paragraph spacing is now present in the web document.

Result:

This is how your text and tags would look in your text editor using the paragraph tag between the paragraphs.

This is the second paragraph. Notice how the proper paragraph spacing is now present in the web document.

Code: (using the ALIGN=RIGHT format)

<P ALIGN=RIGHT>
This paragraph will be aligned to the right side of the page. That means the right side will be against the wall and the word wrapping on the left side will be the ragged edge.
</P>

Result: Notice the use of the closing tag to stop the right alignment format.

This paragraph will be aligned to the right side of the page. That means the right side will be against the wall and the word wrapping on the left side will be the ragged edge.

Code: (using the ALIGN=CENTER format)

<P ALIGN=CENTER>
This paragraph will be aligned in the center of the page. That means the left over space at the end of the paragraph will be divided up on either side of the last line.
</P>

Result: Notice the use of the closing tag to stop the center alignment format.

This paragraph will be aligned in the center of the page. That means the left over space at the end of the paragraph will be divided up on either side of the last line.

<TABLE> </TABLE>

See the Tables Guide for examples and variations. I use tables to control the placement of crowded content in my page. Within the opening TABLE tag you set these parameters, and more:

WIDTH=#% or WIDTH=#pixels
BORDER=# (places a visible grid throughout your table, #(number) sets the border thickness)
CELLSPACING=# CELLPADDING=# (outside buffer, inside buffer)

<TR> </TR> (starts and stops a new table row)
<TD> </TD> (table data, starts and stops a table cell, can include pictures, text, numbers, etc. You can have several TD sets within a table row. That makes the table columns.)

<TITLE> </TITLE>

Type the page title between the start and stop title tags. The title will show up in the upper left corner of your browser window.

<HTML>
<HEAD>
<TITLE>Sobo's Web Page</TITLE>
</HEAD>

<BODY BGCOLOR=00ff33 TEXT=000066 LINK=ff3399 VLINK=3399ff>

Then all of your page content goes here.

</BODY>

</HTML>

<U> </U>

Underline Use these tags to underline text. It's not really a document friendly procedure. It can make it tough to read or appear sloppy. It can also get confused with underlined links, which some browsers are set to do as a default.

Code:

<U>Underline this!</U>

Result:

Underline this!

<UL> </UL>

Unordered List Creates an indented list with bullet points. There are 3 components to the UL list code, the opening tag <UL>, the list items <LI>, and the closing tag </UL>.

Code:

Grocery List:
<UL>
<LI>Cold Cereal
<LI>Hot Dogs
<LI>Apples
<LI>Pretzels
</UL>

Results:

Grocery List:

• Cold Cereal
• Hot Dogs
• Apples
• Pretzels

Also see Ordered Lists <OL> and Descriptive Lists <DL>

by Craig Walker