HTML Dog

Skip to navigation

Common Attributes

Common attributes can be used in most HTML tags. They comprise of Core attributes, I18n (internationalisation) attributes and Event attributes.

Core Attributes

id

Identifies a unique element. The value of id can be used by CSS to reference that element. It can also be used by scripting languages to reference the element. Links can be made directly to an element with a specific id. The value of the id attribute must be unique.

If you have the HTML:


<p id="jelly">Wobble wobble wobble.</p>

You can use the CSS:


#jelly { background-color: red; }

Or link to that paragraph using the following HTML:


<a href="#jelly">Jelly</a>

class

Used to reference elements with CSS. Any number of elements can have the same value (unlike id)

If you have the HTML:


<p>The stuff was <span class="custard">yellow</span>, very, very <strong class="custard">yellow</strong>.</p>

You can use the CSS:


.custard { color: yellow; }

title

Adds a title to an element. Many browsers will display the value of this attribute when the element is hovered-over or is in focus.

style

Applies style to an element. The value should be CSS code and used something like this:


<p style="background-color: blue; color: yellow;">Yellow text on a blue background.<p>

Note: The style attribute is deprecated in the latest version of HTML and embedded or external CSS should be used instead.

I18n attributes

dir

Specifies the direction of content. Values can be ltr (left to right) or rtl (right to left).

xml:lang

Specifies the language of an element. Values can be abbreviations such as en (English), fr (French) or de (German).

Event attributes

The value of these attributes is JavaScript code. This is commonly a short one-liner or a function call.

onclick

The JavaScript of the value is executed when a pointing-device is used to 'click' on the element.

ondblclick

The JavaScript of the value is executed when a pointing-device is used to 'double-click' on the element.

onmousedown

The JavaScript of the value is executed when the button on a pointing-device is pressed down while the cursor is over the element.

onmouseup

The JavaScript of the value is executed when the button on a pointing-device is released while the cursor is over the element.

onmouseover

The JavaScript of the value is executed when the cursor is moved onto an element.

onmousemove

The JavaScript of the value is executed when the cursor is moved over an element.

onmouseout

The JavaScript of the value is executed when the cursor is moved off an element.

onkeypress

The JavaScript of the value is executed when an element is in focus and a key on the keyboard is pressed down and released.

onkeydown

The JavaScript of the value is executed when an element is in focus and a key on the keyboard is pressed down.

onkeyup

The JavaScript of the value is executed when an element is in focus and a key on the keyboard is released.

Note: these are not the only event attributes; there are other event attributes more specific to certain tags that are not classed as 'common attributes'.