HTML Attributes
HTML Attributes Tutorial and Information

• HTML Basics

HTML Basics - HTML Attributes

HTML attributes are specified with the beginning tag of an HTML element after the element name. HTML attributes are used to further specify the element.

What Are HTML Attributes

To see some HTML attributes in action please visit HTML table tutorial, or HTML music tutorial. To see HTML attributes with CSS (Cascading Style Sheet) please visit the CSS tutorial. CSS gives a lot of power to HTML attributes.

Here is an example of a paragraph element with an attribute in the beginning tag:

<p class="css">This is a paragraph element with attribute</p> 

How To Add An Attribute To An Element:

attribute="property:value" 

For Example:

style="color:blue" 

In general, the value of the attribute should be enclosed in double or single quotes, but may be left unquoted in HTML under certain circumstances. However, XHTML (the latest version of HTML) requires all attribute values to be quoted!

Standard HTML Attributes

These are the most important HTML attributes with CSS (Cascading Style Sheets). It is recommended to use style sheets for formatting attributes (E.g. border, font, color, background, align, and more)

id
class
style
title

These attributes are not valid with base, head, html, meta, param, script, style, and title tags.

The id Attribute

The id attribute provides an unique identifier for an element. This means that a specific id attribute can be used only once throughout the entire HTML document. For Example:

id="main" 

The class Attribute

The class attribute is very similar to the id attribute, but can be used more than once throughout the HTML document. For Example:

class="link1" 

The style Attribute

The style attribute is usually used to specify a short section of text, or to change the font color for just one word within a paragraph. For Example:

style="color:blue" 

The title Attribute

The title attribute can be used to add additional information about a link commonly known as "tooltip". The tooltip is a common graphical user interface element. It is used in conjunction with a cursor, usually a mouse pointer. The user hovers the cursor over an item, without clicking it, and a small box appears with supplementary information regarding the item being hovered over. For Example:

<a href="images/browser.gif" title="Image of browser window"> 
sample browser window.</a> 

For a full list of HTML attributes visit the World Wide Web Consortium (W3C) index of attributes:

• Index of HTML Attributes

The Power of CSS and HTML Attributes

CSS (Cascading Style Sheets) give a lot of power to HTML attributes and HTML elements. The CSS file contains all formatting instructions for the element specified by the attribute and the value.

For more information about how to use attributes with CSS please go to:

• How To Use CSS (Cascading Style Sheets)

What Are Event Attributes

Since HTML 4.0, HTML can be used to start actions or events in the browser using event attributes.

Window Event Attributes:

onload
onunload

These attributes are used to load or unload an event or script when the HTML document loads in the web browser. These event attributes are only valid in body and frameset elements.

Mouse Event Attributes:

onclick
ondblclick
onmouseover

These attributes are used to start an event or script when the user clicks a mouse button, double clicks a mouse button, or hovers over an object with the mouse pointer. These mouse pointer event attributes are not valid with base, bdo, br, frame, frameset, head, html, iframe, meta, param, script, style, and title tags.

• Back
• Next

HTML Related Links

• How to Get a Web Site or Online Business Started
• CMS - Content Management System
• How to Choose and Register the Right Domain Name
• Making Revenue - How to Make Money With a Website
• Server and Hosting

© This Article is Copyrighted by WebmasterSeminar.com

Please do not copy or reproduce this article in whole or part, in any form, without mentioning the source and including a live link back to WebmasterSeminar.com - Thank You!

LINK TO THIS TUTORIAL:

Copy the code below and paste into your web page

<a href="http://www.webmasterseminar.com/htmlattributes.php">
Webmaster Seminar</a><br />
HTML Attributes - Free Information, Tutorials and HTML Resources