Anatomy of an HTML Tag

HTML tags are special instructions found in every web page that tell the browser how to display the information found in the HTML document. The focus for the semester will be on learning the various HTML tags. Here are some notes regarding HTML tags:

1. All tags are enclosed in angle brackets or "wickets". There must be a pair of wickets around each tag.

<em>The em tag causes the text between the tags to be displayed in the italics format</em>

2. Remember that when you open a tag you must also close that tag. The opening tag for italics is <em> and the closing tag is the same but a forward slash is added in front of the tag name - </em> 
If you forget the closing tag then ALL text found after the <em> tag will be italics. This is a very common error.

3. Some tags have attributes. Attributes are options that are available with a tag that further affect the way information is displayed. The font tag is a good example of a tag with many different attributes.

<font color="red">The font tag with the color attribute set to red will display text in a red color</font>

4. Attributes often have values. In the above example the color attribute was assigned a value of red. Note that the value is always enclosed in "quote marks" and there is a space between the tag name and the attribute. Some tags have only limited values that will be accepted.

5. Some tags can have multiple attributes assigned to it. The different attributes are separated from the previous one by a space.

<font color="red" size="36" >color red font 36</font>

6. You can nest tags, this means placing one tag inside another to perform multiple tasks one a particular part of the web page. Here is an example of a nesting tags.

<h1>This is a <em>Heading</em> but the Heading key word has been italicized</h1>

The rule for nesting is that the inner tags must be closed first, then you close the outer tags.

 

In Summary:

1.   All tags must be enclosed with brackets < >.
2. All open tags must be closed by using a / in front of the tag name.
3. Some tags have attributes that provide different options for that tag.
4. Attributes may be assigned values using the equals sign and quote marks around the value.
5. Tags can have multiple attributes.
6. You can nest tags.