HTML and CSS Reference
In-Depth Information
that can be easily understood and processed by code, and therefore allows the same element
to have user facing and a computer facing meaning.
//
Data attributes should be specified in lower case characters only, and words
should be separated with a hyphen.
This is a good general rule with HTML, since all attributes are converted to
lower case in the DOM anyway.
As we will see below, these attributes can be returned from elements as an object
via the
data()
method on DOM elements. This will convert the attribute names
as follows:
data-this-is-long=”true”
is converted to the following property on the data object:
thisIsLong=true
The next way we can select elements in a document is by class. Elements can be given
one or more classes with the
class
attribute. All HTML elements support the
class
attribute
(the restrictions from HTML4 applying to some elements have been removed). Inside
tasks.html you will see the following examples:
<input type="text" required="required" name="task"
class="large">
<tr
class="even"
>
A class is just an arbitrary name: it is a way of grouping together otherwise unrelated ele-
ments to denote they share some characteristic. The characteristic they usually have in
common is that they should have the same styles applied via CSS, and therefore the class
attribute is usually associated purely with CSS.
In reality classes can be used to group elements for any reason. When using jQuery it is
common to assign classes to elements purely to allow jQuery selections to efficiently find
related elements.
For instance, in tasks.html every second row in the table is given the class of
even
. All even
rows can be selected using the following selection criteria:
> $('.even')
(Note the “.” at the start of the selection criteria)
