After all this experimenting with our example webpage, it’s time to define elements more formally. Elements have three main components:

<name attribute1="value1" attribute2="value2"...>
...(text or more elements go here)...
</name>
  • name: Identifies the type of the element, such as body or em element. The name of an element can be upper case, lower case, or anything in between. Upper case makes it easier to differentiate elements and text when examining HTML source, while lower case is a more modern style and is easier to type. Either way, it’s a matter of taste: <BODY>, <body>, and even <bODy> are all the same element.

  • attribute: Changes the behavior of an element. For example, the style attribute enables you to change the appearance of an element and its content.

  • value: Enables particular attributes to vary. For example, background: yellow, when present in an element’s style attribute, changes the background of the element to yellow.

Some elements do not require a closing element to work properly. For example, the br element creates a line break, and should not enclose anything. We’ll discuss br further in “Paragraph Breaks”.

Some elements do not require any attributes. In Example 1.6, “Background Color”, the body element had a style attribute, but the body element works just fine without without it. By contrast, the a element, which creates a hyperlink, has an href attribute that defines the link’s destination. If you don’t include the href attribute, the link won’t point anywhere.

Misspellings and Misunderstandings

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

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

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

  • The element is misspelled or does not exist. For example, mxyzptlk, for example, is not an HTML element.

  • The element means something, but that particular browser does not support it. For example, the blink element works in Firefox, but not in Internet Explorer or Safari.

Example 1.7. Blinking Text

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

If you are using Firefox, the text in the “view html” box should be blinking. If you are using Internet Explorer or Safari, the text will not be blinking. This is actually a common situation when composing web pages ― one browser won’t support a particular feature, or supports it incorrectly.

Caution

Most people find the blink element distracting and irritating, and in fact blink is not part of the official HTML standard.

A Digression: What’s a “Tag”?

You’ll often hear people refer to “tags,” as in, “The markup tags tell the Web browser how to display the page.” Almost always, they really meant to say “elements.” Tags are not elements, they define the boundaries of an element. The p element begins with a <p> open tag and ends with a </p> closing tag, but it is not a tag itself.

  • Incorrect: “You can make a new HTML paragraph with a <p> tag!”

  • Correct: “It’s a good idea to close that open <p> tag.”

Now that you possess this valuable information, you’re in the same position as someone who understands electron drift speed and how AC signals actually propagate in copper wire. You get to feel slightly superior to people who talk about how Internet usage “sends”, “streams”, or (my personal favorite) “wastes” electrons. But you really shouldn’t go running around correcting these folks.

Sometimes you’ll hear people say “alt tag,” which is even worse. An “alt tag” is really an alt attribute. This important attribute provides alternative text for images, in case the user can’t see the image for some other reason. We’ll talk more about this attribute later.

The element vs. tag confusion is sort of understandable: it’s a common mistake even among professionals, and they both look like angle-brackety things, after all. But attributes are not tags, not even close. If you hear someone say “alt tag,” this is a key indication that the speaker does not understand HTML very well. (You probably shouldn’t invite them to your next birthday party.)

 

See Also