Tag Attributes

intro | tags | path | tables | attributes

QUICK TUTORIAL - HTML ATTRIBUTES: CUSTOMIZING THE TAGS

Tags really begin to be useful when you start adding attributes and values to them. All of the other things that show up in a tag besides the tag name are referred to as the tag "attributes". For example, see the <div> tag below, where the attribute is "align", or the image tag, where the attributes are "alt", "height", and "width". Attribute values modify the the way the tag works in some way.

Here is a list of some HTML tags and some common attribute-value pairs for them. This is not an exhaustive list of attributes - there are many more, but this is enough to get you started using attributes.

How to use attributes and values in tags

Tag name

<Tag Attribute="Value">

Div tag

<div align="center"> Centers whatever is contained in the <div></div> tags.

Image tag

alt
The "alt" attribute creates the text which appears in the place where the image is loading, or where the images would be when people browse with their images turned off. The devices which read web pages aloud for people with visual impairments read the "alt" attribute in the place of the image, so be sure to make them descriptive, not just "picture 01." In Internet Explorer, the value in the "alt" attribute displays as a small banner, or "tool tip" when your mouse hovers over the image.

height and width
If you use the "height" and "width" attributes on your images, your page will load faster because the computer doesn't have to wait for the picture to come down before it knows how much room to leave for it.

align="left"align="right"
The "align" attribute with images is mainly used to influence the text around them. It's tricky, but once you understand it, you'll be able to let your text flow around your images.

DEFAULT ALIGNMENT - If you do not specify an alignment inside an image tag, all text will start at the bottom right corner of the image and then wrap underneath the image, like this:
Text starts here and continues until it reaches the end of the line and then wraps underneath the picture.

LEFT ALIGNMENT - If you set the image to align="left" then the image moves to the left, as you would expect, and the text begins at the upper right hand corner of the image, like this:

Text starts here and continues and continues until it reaches the end of the line and then it keeps going and going and going and going and going and going right beside the picture until it runs out of space and has to wrap underneath the picture.

RIGHT ALIGNMENT - The odd one is align="right". If you set the image to align="right" then the image moves to the right as you would expect, and the text begins as far left as it can go, with the top of the text level with the top of the picture. It continues down the page until it runs out of space and begins to wrap underneath the picture. This seems reasonable, right? So what's odd about it? Well, when you look at your HTML code, you would expect the text to appear first because it starts at the upper left, whereas it's the right-aligned picture which appears first in the HTML code.

MIDDLE
Here is a somewhat odd one, where the image is set to align="middle". The text starts in the middle to the right of the picture and then wraps underneath the picture. I've never found a use for this one, unless the text was very short and didn't wrap.

By the way, align="right" and align="left" work the same way on whole tables, so you can actually wrap text around small tables, too.

HINT: If you just want to put a picture (by itself) on the right or left or in the center, use a <div></div> tag set around the picture, like this:

In case you're wondering, no, you can't make the text wrap around a centered picture using simple HTML.

You can also put an alignment in a table cell, which makes everything in that cell be right or center justified, like this:

The default is align="left" so you don't have to specify it.

Break tag

<br / >

<br clear="all" / >
This says "I really really mean a break." It is used when you have used the attribute align="right" or align="left" on an image and there is not enough text to wrap below the image, so that the next image or text does not begin below the baseline of the image.

For example:

This image is aligned left. Now I'd like to start the next bit of content below the image.
But I can't.

Here's the same left-aligned image. This time I use <br clear="all" / >.
Now I can start to the left again.

Link tag
(Anchor tag)

As previously explained, <a href="myfile.htm"> is the way you signify the web address of a link.

Add target="_blank" to have the page open in a separate browser window.

<a name="this"> The "name" attribute places a marker on the page so that you can jump right to it. In the link <a href="myfile.htm#this"> the browser will jump directly to the spot named "this" on the page "myfile.htm." Notice the # between the name of the file and the name of the marker.

Lists

"Unordered" List:(bulleted)
<ul>
<li></li>
<li></li>
</ul>

Type="disc" is the default type for the first level of unordered list.

<ul type="disc">
<li>One thing</li>
<li>And another</li>
</ul>

Looks like this:

One thing
And another

<ul type="circle">
<li>One thing</li>
<li>And another</li>
</ul>

Looks like this:

One thing
And another

<ul type="square">
<li>One thing</li>
<li>And another</li>
</ul>

Looks like this:

One thing
And another

"Ordered" List:
(numbered, or with letters, like outline form)
<ol>
<li></li>
<li></li>
</ol>

<ol type="a">
<li>One thing</li>
<li>And another</li>
</ol>

Looks like this:

One thing
And another

<ol type="i" start=3>
<li>One thing</li>
<li>And another</li>
</ol>

Looks like this:

One thing
And another

Possible values of the "type" attribute are A, a, I, i and 1. They will display ABC, abc, I II III, i ii iii, or 1 2 3 etc. The default is 1 2 3 etc.

Possible values of the "start" attribute are the numbers 1, 2, 3, 4, 5 etc. What you put in the "start" attribute is a number which shows which number or letter in the row to start on. For example, if you start at "5" with the type "A," the entries will be labeled E, F, G etc. The default is to start at the beginning.

<p> Tag

<P align="center"> Places the whole paragraph in the center, with each line centered.
<P align="left"> Left-aligns the paragraph. This is the default.
<P align="right">Right-aligns the paragraph.

span tag

This tag is generally used with the "style" attribute, and is merely a container for the particular style.

Styles
<span style="font-family: Times;font-size: medium">Looks like this.</span>
Looks like this.

The style attribute is an "in-line" version of a stylesheet, and you can override a style sheet by including a different style inside a tag (any tag). The <span> tag is just a convenient one to use if you don't have another tag close by to use.

Styles use a slightly different syntax than HTML just to drive us crazy. Click here for a styles/HTML comparison chart.

Table tags

The width can be either a percentage or an absolute number, measured in pixels.

A border of "1" is actually two pixels.

Cellspacing is the area between cells. Here is a small table with a cellspacing of 5.

Cellpadding is the area between the edge of a cell and the text and images inside it.

Here is a table with a cellpadding of 0.

Here is text.	Here is text
Here is text.	Here is text.

Here is a table with a cellpadding of 5.

Here is text.	Here is text
Here is text.	Here is text.

Here is a table with a cellspacing and cellpadding of 5.

Here is text.	Here is text
Here is text.	Here is text.

Background Colors: If you would like to add a color to the background of your table, include the bgcolor attribute. The colors are represented by six numbers, two for red, two for green and two for blue: rrggbb.

The colors are represented by "hex numbers," which use a base 16 numbering system (Hexadecimal, or "hex.") The numbers are: 0 1 2 3 4 5 6 7 8 9 A B C D E F.

"0" is the lowest value, and the darkest, because the RGB system is light, not pigment. No light, no color, hence "#000000" is black. If all the numbers are as high as they can go, you have #FFFFFF, or white. Since the web uses light to paint with instead of pigment, mixing all the colors together makes the lightest color, white. #FF0000 is bright red, #00FF00 is bright green, and #0000FF is bright blue.

Be a bit careful when using colors in your tables. If you use a dark color for your background, change the color of the text on it to make sure there is enough contrast. Black lettering on a dark blue background is a tad difficult to read. Likewise, never ever ever use red text on a blue background or vice versa.The eye makes subtle adjustments to see colors of different wavelengths, and since red has the longest wavelength of the visible spectrum, and blue the shortest, the eye tends to jump back and forth, creating an annoying vibration.

It is customary to indicate the hex colors with a "#" in front of them. Some browsers won't recognize the colors unless you do. It looks like this: <table bgcolor="#FFEEEE">

<tr valign="top"> This aligns all of the contents of the cells in this row at the top.

<caption valign="bottom" align="right"> puts a table caption below the table, flush with the right edge of the table.

<caption valign="top" align="center"> This is the default, with the caption is centered over the top of the table.

Alignment inside table cells, both <th> and <td>:

<td align="left"> This is the default.
<td align="right">
<td align="center">
<th valign="top">
<td valign="bottom">
<td valign="middle"> This is the default.

Merged Cells:
You can merge two or more cells using "colspan" and "rowspan."

<td colspan="2">
		<td rowspan="2">
		<td rowspan="2">

Please note that mixing colspans and rowspans in the same column or row will probably give bad results.