goer.org | HTML Tutorial : Introduction : Tags

Table of Contents

About
Introduction
Diving In
Structure
Tinkering
Tags
Attributes
Browser Tools
Basic
Paragraph Breaks
Headings
Font Styles
Colors
Links
Images
Lists
Intermediate
Style Sheets
Classes and IDs
Div and Span
Font Control
Borders
Margins and Padding
Align and Indent
Advanced
Tables
Miscellany
SHTML

Tags

After all this experimenting with our example webpage, it's time to define things a little more formally.

Tag Components

Tags have three main components:

<tagname attribute1="value1" attribute2="value2"...>
...(text or more tags go here)...
</tagname>

Some tags do not require a closing tag or attributes to work properly:

Background Color (source)

<body style="background-color: yellow">

We'll discuss attributes in the next section. For now, let's focus on simple tags.

UPPER CASE, lower case

Case is irrelevant for tags. Some people prefer all upper case, so that when they look at their HTML source, it's easier to differentiate tags and text. I personally prefer all lower case, because I find it easier to type the tags that way. Either way, it's just a particular style choice. <BODY>, <body>, and even <bODy> are all the same tag.

Misspellings and Misunderstandings

Vastly simplified, a browser processes an HTML page something like this:

  1. Identify anything that is between angle brackets (< >) as a "tag"
  2. Determine whether the browser has any instructions for using the tag:
    • If yes, the tag is real -- follow the instructions
    • If no, the tag is garbage -- ignore it

When a browser ignores a tag, that means one of two things:

  1. The tag is misspelled or does not exist. (<mxyzptlk>, for example, is not an HTML tag.)
  2. The tag is legal, but that particular browser does not support it.

An example of #2 is the <blink> tag. This tag works in Mozilla and in nearly all versions of Netscape Navigator. Internet Explorer and many other browsers do not support it.

Blinking Text (source)

Warning: <blink>For external use only</blink>. 
Avoid contact with eyes.

Warning: The Blink Tag

Most people find the <blink> tag distracting and irritating. In fact, I am aware of only one example of a good use of the blink tag on the entire World Wide Web. Well, maybe two.

If you are using any version of Netscape Navigator (other than version 6, I think), the text in the Results box below should be blinking. If you are using Internet Explorer, the text will not be blinking. This is actually a very common situation when using HTML: one browser will support a particular aspect of HTML, while another doesn't... or worse, supports it incorrectly.

Fortunately in the case of the <blink> tag, this is no great loss.

Blink Tag (Results)



Warning: For external use only. Avoid contact with eyes.