anatomy of an HTML tag

HTML is made up of content, which is what you want your vistors to see, and tags, which tell the browser how to display that content.

Content is the text, like this paragraph, images, sounds, animations and information.

Tags are bits of HTML that tell the browser how you want your content displayed, how you want it laid out on the screen.

i. Brackets

All HTML tags are enclosed in less-than ( < ) and greater-than ( > ) brackets. These brackets tell the browser "this is an HTML tag". All HTML must have both opening and closing brackets. If you leave the closing bracket off a tag, the browser won't know where the tag ends and your content begins.

ii. Tags

Most HTML tags can almost be read as English - they're either abbreviations or shorthand for what they do. For example, the tag that tells a browser to draw a Horizontal Rule across the screen is hr.

iii. Attributes

An attribute is something that changes the way the tag works. For example, we might want our Horizontal Rule to be drawn only half-way across the screen. For this, the attribute would be width. Each tag has certain attributes that it can take.

iv. Values

The value of an attribute tells it what to do. Each attribute has a certain set of allowed values. For example, the value of the width attribute can be a percentage of the available screen. If we want our Horizontal Rule to be one-half of the screen, the value of width would be 50%. Values should be enclosed in double-quote marks ( " ) and joined to the attribute by an equals sign ( = ).

v. The whole thing

So, to draw a Horizontal Rule across one-half of the screen we use:

We have the opening bracket ( < ), the tag ( hr ), the attribute ( width= ), the value ( "50%" ) and the closing bracket ( > ). It will display this:

vi. Default Values

Often times an attribute will have a default value - this is what the value will be if you don't say otherwise. For example, this hr tag has an align attribute, which tells the browser where you want it. Align can take the values of left, right or center, and center is the default. So, since we didn't explicitly say how we wanted our hr aligned, it was automatically centered.

Take a look at the source code by clicking on View-Document Source.