Tuesday, July 20, 2010

(X)HTML Core Attributes - dir, class, id, lang, xml:lang, style and title

There are a few attributes that are considered "core attributes" because they can be applied to nearly every element. They are:

dir

It can take the values rtl or ltr which stand for right-to-left and left-to-right. This attribute specifies base direction of directionally neutral text (i.e., text that doesn't have inherent directionality as defined in Unicode). It also specifies the directionality of tables. Source: W3C.

Example: <p dir="rtl">The quick brown fox</p> In this example, the text is aligned to the right in the same way that text-align:right would. This attribute is inherited by child elements.

This attribute can be applied to all elements except applet, base, basefont, bdo, br, frame, frameset, iframe, param, script.

class

A class is a name under which multiple (X)HTML elements can be grouped for the purpose of styling using CSS or scripting using Javascript. A single element can be associated with multiple classes, each class name being separated by spaces.

Example: <p class="products floated">the quick brown fox jumps</p>

In the above example, the p belongs to two classes: products and floated.

The class attribute can be applied to all elements except base, basefont, head, html, meta, param, script, style, title.

id

An id is a name assigned to a single element in an (X)HTML document for the purpose of styling using CSS and scripting using Javascript and it is also used for creating fragments. An element can have only one id. No two elements should have the same id value.

Example: <p id="tagline">the quick brown fox</p>

The id attribute can be applied to all elements except base, head, html, meta, script, style, title.

lang

The lang attribute identifies the language (human languages, not computer languages) of the text content and attribute values of an element. The language is specified using a two-letter code specified in ISO 639-1. The lang attribute helps screen readers to pronounce words correctly, helps browsers to choose the correct fonts and the punctuation such as correct quotation marks, and helps search engines to identify the language of a web page.

Example: <p>The French word for apple is <span lang="fr">pomme</span>.</p>

This attribute can be applied to any element except applet, base, basefont, br, frame, frameset, iframe, param, script.

This attribute is inherited by child elements. The lang attribute is often applied to the html element to specify the language of the document.

xml:lang

This attribute is similar to the lang attribute, but is used only in XHTML documents.

Example: <p xml:lang="fr">Bonjour! Comment allez-vous?</p>

style

The style attribute is used to apply CSS a rule to an element. The value of the style attribute is one or more CSS declarations separated by semicolons and, optionally, spaces. Curly brace limiters ({ and }) are not allowed. It cannot contain CSS selectors.

The CSS declarations in the style attribute have the highest specificity and are known as inline styles.

Example: <p style="background-color:navajowhite;color:indianred">the quick brown fox</p>

The style attribute can be applied to all elements except base, basefont, head, html, meta, param, script, style, title.

title

The title attribute contains additional information about an element. If the element is displayed, browsers display the value of the title attribute as a tool tip when the mouse hovers over it.

Example: <p><img src="photo1.jpg" alt="Photo of the Himalayas"></p>

The title attribute can be applied to all elements except base, basefont, head, html, meta, param, script, title.

No comments: