IDs and classes
My last couple of posts have been about freeing HTML. One aspect of this is making the right sort of use of the attributes id and class.
You can assign an id or class attribute to just about any HTML element. An id attribute assigns a unique identifying name to it; a class attribute assigns it to one or more classes. (As the names suggest.)
There are a couple of things here already worth taking note of.
- Give an element an
id, and it’s supposed to be unique. Only one element on the page can have that ID. Many browsers fail to enforce this rule, but as a designer/developer you should never take advantage of this laxness. - An element can be a member of several classes. When assigning it, just list the class names with a space between each.
This gives us a first hint in how we can make best use of these attributes. When designing a site as a collection of Web pages, or developing it (through program code and database data) to produce Web pages, we can use IDs for elements that appear just once—perhaps on every page. And we can analyse our material (‘content’) to decide what classes we need.
This will give us some useful rules of thumb for naming: good names for IDs are: “menu”, “content”, “main”, “search-box”, “navigation”, “breadcrumb”, “shell”, “extras”, “logo”, and so on. If we allow ourselves to think about hierarchies—and not get too anxious that we are on the verge of thinking about visual display—we can add “header”, “footer”, “sidebar”, “maincol”, and so on.
I have said that for class names we should analyse our material: this will give us names like “text”, “date”, “link”, “address”, “event”, “price”, “summary”, “exposition”, and so on and so on.
In other words, we can assign elements an ID based on their function—what role they have on the final page—and assign them to classes based on what they contain—or better still, are.