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
emelement. 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>, and even
<bODy>are all the same element.
styleattribute enables you to change the appearance of an element and its content.
: Enables particular attributes to vary. For example,
background: yellow, when present in an element’s
styleattribute, 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
Some elements do not require any attributes. In
Example 1.6, “Background Color”, the
element had a
style attribute, but the
body element works just fine without without it. By
a element, which creates a hyperlink, has
href attribute that defines the link’s
destination. If you don’t include the
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
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.
Most people find the
distracting and irritating, and in fact
is not part of the official HTML standard.
A Digression: What’s a “Tag”?
You’ll often hear people refer to “tags,”
“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
p element begins with a
<p> open tag and ends
</p> closing tag,
but it is not a tag itself.
Incorrect: “You can make a new HTML paragraph with a
Correct: “It’s a good idea to close that open
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 “
which is even worse. An “
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.)