Layout - Refactoring HTML: Improving the Design of Existing Web Applications - page 193

Add an ID Attribute
Assign each element a unique id by which it can be addressed.
<h2>Resources</h2>
<ul>
<li><a href="/faq.html">Frequently Asked Questions</a></li>
<li><a href="/tutorial.html">Tutorial</a></li>
<li><a href="/contact.html">Contact Us</a></li>
</ul>
<p>Are you <strong>really</strong> sure?</p>
<h2 id='resources'>Resources</h2>
<ul id='resourcelist'>
<li id='l1'><a id='a1' href="/faq.html">Frequently Asked
Questions</a></li>
<li id='l2'>
<a id='a2' href="/tutorial.html">Tutorial</a>
<h2 id='resources'>Resources</h2>
<ul id='resourcelist'>
<li id='l1'><a id='a1' href="/faq.html">Frequently Asked
Questions</a></li>
<li id='l2'>
<a id='a2' href="/tutorial.html">Tutorial</a>
Motivation
ID attributes allow you to precisely target individual elements for styling with CSS, addressing with JavaScript,
transforming with XSLT, and more. They make it much easier for programs to operate on the document.
ID attributes also make it easier for you and other people to link to and cite your content. Instead of referencing
the entire page, they can now reference the individual paragraph, heading, table, or other content.
Potential Trade-offs
Adding ID attributes to every element can bloat file sizes by a noticeable amount. If bandwidth is a major
concern, consider adding ID attributes to only some of the elements. In particular, it's usually enough to put an
id on every p , table , blockquote , ul , ol , dl , and div .
Mechanics
The ID attribute is named id , and it must contain a single XML name. For example, consider this paragraph:
<p>Game over. Sony has
<a href=
"http://www.sgknox.com/2007/01/11/no-porn-on-blu-ray/">
forfeited</a>
and Blu-Ray has lost.</p>