7.1 Class & Id

Although we can add styling to HTML tags by using attributes, and we will see later that we can specify properties using CSS for these very same tags, sometimes we need other ways to select elements or page content with regards to adding layout and styling. Luckily this has already been adressed in the form of two very useful attributes:

  • Class
  • Id

Class and id can be added into most tags and can be given almost any name you want. For example:

<ul id="nav">

Here we have added a little extra markup into the unordered list tag in the form of an id called nav (navigation). On its own this doesn't actually do anything. However, it does now give us the chance to target this unordered list specifically, and so that we can manipulate it uniquely to any other unordered lists on our page(s). And when combined with span and div from the last section, we can also manipulate whole sections of a page as well as parts of an element. For example:

<div id="content">
<p>Content <span class="highlight">goes</span> here...</span>
</div>

Here the id attribute we have called "content", and the class attribute we have called "highlight". These attributes or selectors could have attributes or rather properties set elsewhere, such as in a stylesheet. These properties could cover a wide possible range including colours, fonts, positioning etc.

There are no browser defaults for id's or classes because adding these two selectors do nothing to the elements by default. They are simply markers that can be built into markup for use later with CSS (and with Javascript too if you wish). As for their names, class and id, these offer a clue as to their use. For example, there can be several people in a class, but an id is normally unique to one person.

Id

Id’s are unique identifiers and can only be used once in a HTML document, but as often as required throughout a website. As a footnote, a webpage would not pass a validation test (wee the section on web standards later) if it used the same id more than once. The basic rules are:

  • Each element can have only one id;
  • Each page can have only one element with that id.

Class

Classes are not unique and can be used as many times as required in a HTML document. The basic rules are:

  • The same class can be used on multiple elements;
  • Multiple classes can be used on the same element.

Id's don't impart any special properties over classes and vice versa, and they can be used as required. They can even be used together in single elements but again, on their own they don’t add anything by themselves and require CSS to target them to apply styling. However, id’s do have one special browser functionality over classes, and this is the use of the hash value (#) in a URL. In fact we have already used this feature in the section on linkng within web pages. For example:

<a href="http://yourdomain.co.uk#here">Your Domain</a>

In the above example a browser will attempt to locate the element in page 2 that has an id called "here", and will automatically scroll this page to display that element. As for that element, it could simply be a heading with a little extra markup like this:

<h1 id="here">A heading</h1>

Class and id will be used extensively in the CSS Tutorial, and so it they don't make too much sense yet, please don't worry about it. All will become clear later.