HTML and CSS Reference
In-Depth Information
Using the id attribute to create a destination for a
We haven't talked about the
id
attribute yet; it's an important attribute with special
properties, and we'll get into more detail about other special properties of
id
later
in the topic. For now, think of it as a way of uniquely identifying an element. One
special property that elements with
id
s get is that you can link to them. Let's see
how to use the id attribute to create a destination in a page for
<a>
.
Find the location in the page where you'd like to
create a landing spot. This can be any text on the
page, but often is just a heading.
1
Choose an identifier name for the destination, like
“coffee” or “summary” or “bio,” and insert an
id
attribute into the opening tag of the element.
2
Let's give it a try. Say you want to provide a way to link to the Chai Tea item on
the Starbuzz page. Here's what it looks like now:
Here's t
he snippet
from “in
dex.html”
with th
e Chai headin
g
and des
cription.
<h2>
Chai Tea, $1.85
</h2>
<p>
A spicy drink made with black tea, spices, milk
and honey.
</p>
Following the two steps above, we get this:
Ad
d the id to
the
op
ening tag of
the
he
ading.
It'
s important
that your
id
be unique. Th
at is, the
“ch
ai” id must b
e the only
“ch
ai” id in the
page!
<h2 id="chai">
Chai Tea, $1.85
</h2>
<p>
A spicy drink made with black tea, spices, milk and
honey.
</p>
By giving i
t an id, you
've made a
destination
out of th
e Chai Tea
heading in
the “index
.html” page
.
