HTML and CSS Reference
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.
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.
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
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
By giving i t an id, you 've made a
destination out of th e Chai Tea
heading in the “index .html” page .