HTML Attributes - Introduction
Attributes are used to further describe or define HTML elements. This may sound a bit complicated but we use the equivalent of elements
and attributes routinely in every day life.
For example if you take a television that is 150 cm wide and 100 cm high, television is the element and width and height are two attributes with their values. Attributes always have a name and a value and the value is always enclosed in quotes i.e.
<img src="photo.jpg" />
In this example
img is an image element, src is the attribute which tells the browser the
source of the image and photo.jpg is the name of the image and the value of the src attribute.
<h1 class="centerpage">Large centered heading</h1>
In this line of code
<h1> is the element used to display a large heading along with the
class attribute having the value "centerpage" . This can be used to change the default display of the
in an external style sheet.
- id - Assigns a unique identifier to an element, no other element on the page can have the same id and using
this id the element can be styled using an external style sheet or from styles contained in the
<head>of a document . Alternatively you can use a script to search for an element with a particular id and when found the script instructions can be applied to the element.
- class - Gives a name to an element which unlike id can be used by more than one element on the same page. Using classes many elements on a page can have identical styles applied which cuts down on work in the external style sheet and helps establish a uniform look for the website pages.
- style - This attribute specifies an inline style for an element. When an inline style is used it overrides any styles contained in
an external style sheet or styles contained in the
<head>of a document.
- title - This is used to provide extra information about an element and takes the form of an information box which appears, most usually when the mouse moves over an element.
- dir - This attribute sets the directionality of content in an element and the value can be either ltr (left to right) or rtl (right to left). It can be used in all elements except applet, base, basefont, bdo, br, frame, frameset, iframe, param and script.
- lang - This attribute sets the base language of an element and can be used in all elements except applet, base, basefont, br, frame, frameset, iframe, param and script.
Events in computer terms are actions which are triggered in the browser when certain conditions are met, usually involving the running of a script.
- onload - A script is run when the body or frameset loads or to put it another way when a user views a page.
- onunload - Sets a script to run when a user leaves a page.
These events occur in response to some sort of mouse action which then causes a script to run, they can be used with all elements except base, bdo, br, frame, frameset, head, html, iframe, meta, param, script, style and title.
- onclick - A script is run when a mouse clicks on the element.
- ondblclick - A script is run in response to a double mouse click on the element.
- onmousedown - The event is triggered when a mouse button is pushed down whilst over the element. Slightly different from the onclick attribute as the button only has to be pushed down and not released for the script to be triggered.
- onmouseup - The event is triggered when the mouse button is released whilst the pointer is over the element.
- onmouseover - The event is triggered when the mouse pointer is moved over an element.
- onmouseout - The script is run when the mouse pointer moves away from the element.
- onmousemove - The event occurs when the mouse pointer is moved whilst it is over the specified element.
- onkeydown - The script is run when a key is pressed down but not released over the element.
- onkeyup - A script is run when a key is released whilst over the element.
- onkeypress - A script is run when a key is pressed and released over the element.
These attributes all relate to forms and form controls.
- onfocus - The event occurs when the element receives focus, it
can only be used with these elements :
a, area, button, input, label, select, and textarea.
- onblur - The event is triggered when the element loses focus. This attribute can only be used with the a, area, button, input, label, select, and textarea elements.
- onchange - This event is triggered when a form input control loses focus and its value has been modified since gaining focus. This attribute can be used with the input, select, and textarea elements.
- onselect - The event occurs when a user selects some text in a text field and can be used with the input and textarea elements.
- onsubmit - The event is triggered when a form is submitted and can only be used with the form element.
- onreset - the event is triggered when a form is reset and can only be used with the form element.