Little Web Hut

HTML 4.01 and XHTML 1.0 Reference



Core Attributes

Attribute Description
id The id attribute assigns a unique name to a tag. This allows style sheets or scripts to reference the tag.

Example using the id attribute with a <p> tag: 
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
 <title>HTML Test</title>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <style type="text/css">
  #sample1 {color:red}
 </style>
</head>

<body>
 <p>This text does not use styles.</p>
 <p id="sample1">This text is red by using the sample1 id name.</p>
</body>

</html>
Test It XHTML Style
class The class attribute assigns a class name to a tag. The class name does not need to be unique. More than one tag can have the same class name. This allows style sheets or scripts to reference multiple tags with a single class name.

Example using the same class name with multiple <p> tags: 
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
 <title>HTML Test</title>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <style type="text/css">
  .sample1 {color:red}
 </style>
</head>

<body>
 <p>This text does not use styles.</p>
 <p class="sample1">This text is red by using the sample1 class name.</p>
 <p class="sample1">This text is also red by using the same class name.</p>
</body>

</html>
Test It XHTML Style

The class attribute may have more than one class name if they are separated by spaces. This allows a single tag to belong to multiple classes.

Example using multiple class names with a single <p> tag: 
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
 <title>HTML Test</title>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <style type="text/css">
  .sample1 {color:red}
  .sample2 {font-style:italic}
 </style>
</head>

<body>
 <p>This text does not use styles.</p>
 <p class="sample1">This text is red by using the sample1 class name.</p>
 <p class="sample2">This text is italic by using the sample2 class name.</p>
 <p class="sample1 sample2">Text is red and italic by using both class names.</p>
</body>

</html>
Test It XHTML Style
style The style attribute specifies styles for the tag. For Cascading Style Sheets (CSS), the syntax is name:value. Each name:value pair is separated by semicolons.

Example using the <p> tag: 
<p style="color:red; font-style:italic">This text is styled as red italic.</p>
Test It XHTML Style
title The title attribute specifies additional information about the tag. It is common for browsers to display the title when the pointing device stops over the object.

Example using the <span> tag: 
<p>Pause your pointing device over CSS below.</p>
<p">Use <span title="Cascading Style Sheets">CSS</span> for styles.</p>
Test It XHTML Style

Focus Attributes

Attribute Description
accesskey The accesskey specifies a shortcut key for a tag. The action that is taken when an access key is invoked depends on the tag and may also depend on the browser. For example, if it is used with an <a> tag, some browsers may follow the link when the access key is invoked and other browsers may give focus to the link.

Invoking the access key may be accomplished in different ways on different operating systems and on different browsers. Three common methods that are in use are pressing "alt" plus the access key at the same time, or pressing "alt" plus "shift" plus the access key at the same time, or pressing "ctrl" plus the access key at the same time.

Example using the <a> tag: 
<a accesskey="w" href="http://www.littlewebhut.com">Visit Little Web Hut</a>
Test It XHTML Style

Example using the <input> tag: 
<form action="example_input.php" method="post">
 <p>
 Text: <input accesskey="t" type="text" name="texttest" /><br />
 Password: <input accesskey="p" type="password" name="passtest" /><br />
 <input type="submit" value="Send" /> <input type="reset" />
 </p>
</form>
Test It XHTML Style
onblur The onblur attribute specifies a script to be run when the tag loses focus.

Example: The following code was used to create the sample below. 
<a onfocus="document.getElementById('eventblur').style.color = 'red';" 
   onblur="document.getElementById('eventblur').style.color = 'green';"
   href="#onblur">Onblur test, click here to test</a>
<p id="eventblur">This text turns red when the above link receives
 focus and turns green when the link loses focus.<br />
 <br />
Note: This sample may not work with all browsers.</p>

Sample: Onblur test, click here to test

This text turns red when the above link receives focus and turns green when the link loses focus.

Note: This sample may not work with all browsers.
onfocus The onfocus attribute specifies a script to be run when the tag receives focus.

Example: The following code was used to create the sample below. 
<a onfocus="document.getElementById('eventfocus').style.color = 'red';" 
   onblur="document.getElementById('eventfocus').style.color = 'green';"
   href="#onfocus">Onfocus test, click here to test</a>
<p id="eventfocus">This text turns red when the above link receives
 focus and turns green when the link loses focus.<br />
 <br />
Note: This sample may not work with all browsers.</p>

Sample: Onfocus test, click here to test

This text turns red when the above link receives focus and turns green when the link loses focus.

Note: This sample may not work with all browsers.
tabindex The tabindex attribute specifies the tabbing position of the tag. The tabbing sequence runs from lower values to higher values. The valid range of values is between 0 and 32767.

Example using the <input> tags: 
<p>The tabbing order is set to match the labels.</p>
<form action="example_input.php" method="post">
 <p>
 Third: <input tabindex="30" type="text" name="third" /><br />
 Second: <input tabindex="20" type="text" name="second" /><br />
 First: <input tabindex="10" type="text" name="first" /><br />
 <input tabindex="40" type="submit" value="Fourth" />
 <input tabindex="50" type="reset" value="Fifth" />
 </p>
</form>
Test It XHTML Style

Event Attributes

Attribute Description
onclick The onclick attribute specifies a script to be run when the object is clicked with a mouse or other pointing device.

Example: The following code was used to create the sample below: 
<p onclick="this.style.color = 'red';"
 ondblclick="this.style.color = 'green';">Click here to turn red,
 double click to turn green.</p>

Sample:

Click here to turn red, double click to turn green.
ondblclick The ondblclick attribute specifies a script to be run when the object is double clicked with a mouse or other pointing device.

Example: The following code was used to create the sample below: 
<p onclick="this.style.color = 'red';"
 ondblclick="this.style.color = 'green';">Click here to turn red,
 double click to turn green.</p>

Sample:

Click here to turn red, double click to turn green.
onkeydown The onkeydown attribute specifies a script to be run when a key is pressed down.

Example: The following code was used to create this sample: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>onkeydown onkeyup</title>
</head>

<body onkeydown="this.style.color='red';"
 onkeyup="this.style.color='green';">
<p>Keydown to turn red, keyup to turn green.<br />
  <br />
Note: This example may not work with all browsers.</p>
</body>
</html>
Test It XHTML Style
onkeypress The onkeypress attribute specifies a script to be run when a key is pressed and released.

Example: The following code was used to create this sample: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>onkeypress</title>
</head>
 
<body onkeypress="this.style.color='red';"
  onclick="this.style.color='green';">
<p>Keypress to turn red, mouse click to turn green.<br />
  <br />
Note: This example may not work with all browsers.</p>
</body>
</html>
Test It XHTML Style
onkeyup The onkeyup attribute specifies a script to be run when a key is released.

Example: The following code was used to create this sample: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>onkeydown onkeyup</title>
</head>

<body onkeydown="this.style.color='red';"
 onkeyup="this.style.color='green';">
<p>Keydown to turn red, keyup to turn green.<br />
  <br />
Note: This example may not work with all browsers.</p>
</body>
</html>
Test It XHTML Style
onmousedown The onmousedown attribute specifies a script to be run when the mouse button, or other pointing device button, is pressed while over the object.

Example: The following code was used to create the sample below: 
<p onmousedown="this.style.color = 'red';"
 onmouseup="this.style.color = 'green';">Mouse down here to turn red,
 mouse up to turn green.</p>

Sample:

Mouse down here to turn red, mouse up to turn green.
onmousemove The onmousemove attribute specifies a script to be run when the mouse, or other pointing device, is moved while it is over the object.

Example: The following code was used to create the sample below: 
<p onmousemove="this.style.color = 'red';"
 onmouseout="this.style.color = 'green';">Mouse move here to turn red,
 mouse out to turn green.</p>

Sample:

Mouse move here to turn red, mouse out to turn green.
onmouseout The onmouseout attribute specifies a script to be run when the mouse, or other pointing device, is moved away from an object after being over it.

Example: The following code was used to create the sample below: 
<p onmouseover="this.style.color = 'red';"
 onmouseout="this.style.color = 'green';">Mouse over here to turn red,
 mouse out to turn green.</p>

Sample:

Mouse over here to turn red, mouse out to turn green.
onmouseover The onmouseover attribute specifies a script to be run when the mouse, or other pointing device, is moved onto the object.

Example: The following code was used to create the sample below: 
<p onmouseover="this.style.color = 'red';"
 onmouseout="this.style.color = 'green';">Mouse over here to turn red,
 mouse out to turn green.</p>

Sample:

Mouse over here to turn red, mouse out to turn green.
onmouseup The onmouseup attribute specifies a script to be run when the mouse button, or other pointing device button, is released while over the object.

Example: The following code was used to create the sample below: 
<p onmousedown="this.style.color = 'red';"
 onmouseup="this.style.color = 'green';">Mouse down here to turn red,
 mouse up to turn green.</p>

Sample:

Mouse down here to turn red, mouse up to turn green.

Language Attributes

Attribute Description
dir The dir attribute tells the browser whether the text should be displayed from left-to-right or right-to-left. It does not reverse the direction of the characters, like the <bdo> tag does, but it can help the browser to determine if the text should be aligned on the left side or the right side.

For left-to-right use the value "ltr". For right-to-left use the value "rtl".

Example: 
<p dir="rtl">This is sample text with dir set to rtl.</p>
<p dir="rtl">This is more sample text with dir set to rtl.</p>
Test It XHTML Style
lang The lang attribute specifies a language. This attribute can be useful for braille translation software, speech synthesizers, dictionary definitions, etc.

Some of the possible values - This in only a partial list.
Two letter codes Language
"ar" Arabic
"de" German
"el" Greek
"en" English
"es" Spanish
"fr" French
"he" Hebrew
"hi" Hindi
"it" Italian
"ja" Japanese
"nl" Dutch
"pt" Portuguese
"ru" Russian
"sa" Sanskrit
"ur" Urdu
"zh" Chinese

Example: 
<p lang="en">This is english text.</p>
xml:lang1 The xml:lang attribute specifies a language for XHTML documents. This attribute can be useful for braille translation software, speech synthesizers, dictionary definitions, etc.

Some of the possible values - This in only a partial list.
Two letter codes Language
"ar" Arabic
"de" German
"el" Greek
"en" English
"es" Spanish
"fr" French
"he" Hebrew
"hi" Hindi
"it" Italian
"ja" Japanese
"nl" Dutch
"pt" Portuguese
"ru" Russian
"sa" Sanskrit
"ur" Urdu
"zh" Chinese

Example: 
<p xml:lang="en" lang="en">This is english text.</p>
Notes: 1. XHTML only.

The material on this site (LittleWebHut.com) is for educational purposes only. We make no warranty or guarantee of the accuracy or reliability of information contained herein or at other sites to which we link.  The risk from using this site, the information contained herein, or the sites to which we link lies entirely with the user.  By using this site, you agree to have read and accepted our Terms of Use and Privacy Policy.