Elements
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>
-
namebodyoremelement. 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. -
attributestyleattribute enables you to change the appearance of an element and its content. -
valuebackground: yellow, when present in an element’sstyleattribute, 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:
-
Identify anything that is between angle brackets (
<>) as a “element” -
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
blinkelement 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. In fact, I am aware of only one good use of blink on the entire Web..
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.”
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.)