Question

If I have a menu that is displayed at the top and bottom of a long HTML page and the DIV is setup with <div id="menu"><ul><li>Home</li><li>About</li></ul></div>

Can I just repeat this code at the bottom of the page? Or should the ID be a Class in this case?

I’ve read that ID should only be used once on the page.

Answer 1

Yes, an ID should only be used once. If you need both menus to pick up the same CSS settings, you can use <div class="menu"/> If many of their setting are the same, but some (such as the position) differ, you can use something like: <div id="top-menu" class="menu" /> and <div id="bottom-menu" class="menu" /> – this is quite a common usage, where the id controls the external position of an object on the page, which can often be unique, while a class controls its inner layout, which may be shared with other similar components.

W3 Schools has a good primer on class and id selectors: http://www.w3schools.com/css/css_id_class.asp

From their description:

The id Selector

The id selector is used to specify a style for a single, unique
element.

The class Selector

The class selector is used to specify a style for a group of elements.
Unlike the id selector, the class selector is most often used on
several elements.

This allows you to set a particular style for many HTML elements with
the same class.