HTML and CSS Reference
In-Depth Information
are well over a hundred HTML codes available that allow you to add symbols to your web pages. A full list of these
Global Attributes
In addition to the specialized attributes that you have looked at so far, every HTML element has a set of attributes
that can be applied to it. These are known as
global
attributes.
In this section, you learn about the global attributes that you will find most useful when creating web pages. You saw
a few of these attributes in examples earlier in this chapter and in the previous two chapters.
The id Attribute
The
id
attribute can be used to assign a unique ID to an element. This can make it easier to select the element using
CSS or JavaScript.
An ID can be as small as one character long and should only be used for one element on a page. You should always
try to make your IDs descriptive as this will make your code easier for others to understand. If you need to place the
same identifier on multiple elements, you should use a class, described in the following section.
<section id="bio">...</section>
This example code would create a new
<section>
element that has the ID
bio
. You could then style this element
by targeting it using this ID.
The class Attribute
The
class
attribute is similar to the
id
attribute in that it can be used to place an identifier on an element so that
you can easily select it with CSS or JavaScript. The difference is that you can use the same class on multiple ele-
ments. This can be useful if you want to be able to target a set of list items, or a number of paragraph elements, for
example.
<ol>
<li>one</li>
<li class="even">two</li>
<li>three</li>
<li class="even">four</li>
<li>five</li>
</ol>
In this example, you have added the class
even
to alternate list items. This means that you could target just these list
items in CSS to create a nice alternating background pattern to help users differentiate the rows.
The hidden Attribute
The
hidden
attribute can be used to instruct the browser to not display an element that is not relevant to the
current state of the page.
