Many HTML tags have more features which can be activated. For example, there is a command called <font>. The FONT command by itself does nothing. However, by adding extra information in the command, you can use the FONT command to change the color and size of certain text. However, you must say what color, and what size.

In order to give this information, you need to use attributes. An attribute comes after the main command in a tag. The attribute introduces special information ("values") about colors, sizes, locations, addresses and so forth. The value is usually in quotes; though the attribute can work without quotes, using quotes is considered good style. The attributes are separated by spaces; there are no spaces inside an attribute. Therefore, a command with attributes looks like this:

<command attribute="value" attribute="value"> </command>

A specific example would be:

<font size="+2" color="red"> </font>

Remember, attributes must be formed by (in order, no spaces between):

  1. a space
  2. an attribute name
  3. an equal sign
  4. a value (in quotes)

Some commands have no attributes. Others have only one or two attributes. Some commands have many possible attributes.

Important: Attributes and their information ONLY appear in the BEGINNING tags, and NEVER in the ENDING tags. This is shown in the examples above. The ending tag with the back-slash must ONLY have the main command.

Some commands with attributes:

Attribute #1
Attribute #2 Ending Tag Explanation
color="green"> </font> font size & color
size="10" />   divider sizes
style="line-height: 24px;"> </p> paragraph format
direction="right"> </marquee> animated text

A few notes:

  • "hr" does not need an ending tag. However, notice that I ended the command with a slash--as noted on the previous page, XHTML rules require this.
  • It is not necessary to use all attributes. I provide two attributes for each command just for examples; you can use as many or as few as you need.
  • Attributes can be used in any order. For example, in the "font" command above, you don't need to use "size" before "color." It could be the reverse; it makes no difference.
  • Notice the second attribute in the "p" command. I threw in some CSS for you there--a more advanced format which we haven't learned yet. Still, you can experiment with it. (By the way, inline CSS always appears in the "style" attribute.)
  • "font" is the only command in the list above that requires attributes. Only a few commands must have attributes, like the image and link commands.
  • The <marquee> command is cute and fun... the first few times. It can be VERY annoying if used often. Most professional web designers stay away from it, just like they try to avoid animated GIF images.
  • Again: attributes do not appear in the ending tags. The ending tags have the command only, never the attributes.

I think it's time for another...



Video Review