HTML and CSS Reference
In-Depth Information
dropzone
: Indicates the element is an area where draggable elements can be dropped. This
attribute only accepts the values
copy
(the dropped data is duplicated),
move
(the dropped data is
moved to the new location), or
link
(creates a link to the original item, which returns to its
previous location).
spellcheck
: Related to forms and
contenteditable
, this attribute indicates the element's
content is available for automatic spelling and grammar checking. It only accepts the values
true
or
false
, and is minimizable, with the minimized attribute equivalent to
true
.
Numerous
event attributes
are available for client-side scripting, including
onclick
,
ondblclick
,
onkeydown
,
onkeyup
,
onmousedown
,
onmouseover
,
onmouseup
,
onscroll
,
onfocus
, and many more. Each of these events occurs when the user
performs the indicated action upon the element. However, you should try to avoid using
such inline event handlers, so we won't be covering these optional attributes in any
detail. Scripted behavioral enhancements are best separated from the document's
content and structure, just as you should separate presentation. You won't really need to
know about these event handlers until you dip your toe into JavaScript, and that's a
subject for another book.
Custom Data Attributes
New in HTML5,
data attributes
allow web developers to create custom, descriptive attributes with the prefix
data-
followed by whatever attribute name you like (which you can hyphenate further if necessary),
though it shouldn't include any uppercase letters. The attribute's value can be whatever text or data you
might need. This is useful for scripts and web applications as it offers a place to store arbitrary meta-
information about the element in a valid, unobtrusive way in the absence of any more suitable attributes.
It's much better to use a custom data attribute rather than shoehorning machine-readable data into an
inappropriate attribute, or exposing it as raw text when it's not meant to be read by your users. For
example:
<p class=
"
product
"
data-price="$9,799"
data-product-id="V900-shrink-ray"
>
v900 Portable Shrink Ray
</p>
Browsers don't display custom data attributes—they completely ignore them, in fact. Data attributes
shouldn't be used for any CSS styling and shouldn't contain any information you intend to be usable by
your visitors. These attributes only exist as hooks for scripts to latch onto and storage vessels for data that
scripts can use. Hence, you won't see them again for most of this topic. As with the standard interactive
attributes, we've introduced data attributes here so you'll recognize them when you encounter them
elsewhere.
White Space
When you create your HTML documents as plain text, you're free to format them however you want. Line
breaks and indentations can help to make your markup more readable as you work, as you'll see in most
