Add an “id” attribute to the top-most tag, a UL tag.
<ul id="menu">
Sometimes it is useful to be able to choose a specific tag out of all of the tags on a page. The “id” attribute lets us do this. An id attribute is a lot like the class attribute, except that there can be only one id of any given name per page. When we add the id of “menu” to this unordered list, we’re telling the browser that this is the only element of any kind on this page identified as “menu”.
The browser doesn’t care what the name is, only that it’s unique: it doesn’t know that this is a menu just because we named it “menu”, for example.
The id attribute can be targeted in both CSS and Javascript. In CSS, we target a unique element just like we target classes of elements, but by using a pound or hash symbol (“#”) instead of a period or dot.
Copy the entire list—all of the HTML in menu.html—and paste it into mistresses.html before the closing body tag and after the last closing dl tag.
</dl>
<ul id="menu">
<li>
<h3>Movie reviews</h3>
<ol>
<li>
<a href="/Movies/all-the-presidents-men/">All the President’s Men</a>
<p>“The truth is, these are not very bright guys, and things got out of hand.”</p>
</li>
<li>
<a href="/Movies/WagDog/">Wag the Dog</a>
<p>“It doesn’t have to prove out, we just gotta distract ‘em…”</p>
</li>
<li>
<a href="/Movies/hitchhikers-guide/">Hitchhiker’s Guide to the Galaxy</a>
</li>
<li>
<a href="/Movies/detroit/">Detroit Rock City</a>
<p>“Don’t be a fembot.”</p>
</li>
<li>
<a href="/Movies/CapricornOne/">Capricorn One</a>
<p>“See, I told you. Tell me about the lonely plight of a dedicated journalist…”</p>
</li>
</ol>
</li>
<li>
<h3>Book reviews</h3>
<ol>
<li>
<a href="/Books/washington-goes-war/">Washington Goes to War</a>
<p>“It was still possible in 1941 to walk through the White House gate…”</p>
</li>
<li>
<a href="/Books/boss/">Boss</a>
<p>“Daley’s election board members looked innocent throughout the…”</p>
</li>
<li>
<a href="/Books/mike-royko-life-print/">A Life in Print</a>
<p>“Stork also sought advice from Jimmy Breslin, who told her…”</p>
</li>
<li>
<a href="/Books/memoirs-found-bathtub/">Memoirs Found in a Bathtub</a>
</li>
<li>
<a href="/Books/futurological-congress/">The Futurological Congress</a>
<p>“The chemicals of evil were beginning to resist and push back…”</p>
</li>
</ol>
</li>
</ul>
</body>
Save the page and reload it in your browser, and you should see a couple of simple lists at the bottom of the page with quotes from most of the movies and books.
