Friends

Wednesday, October 12, 2011

What The Heck Are Global Attributes In HTML?

Wednesday, October 12, 2011  ilmu-reparasi-komputer  No comments

Global attributes are regular HTML and XHTML attributes that provide additional information about the element that a browser can use to render the element for example. Except global attributes can be applied to all HTML and XHTML elements (even those not defined in the W3.org specifications).

HTML 4.01 gave us the core attributes, which in HTML5 are called global attributes, which are listed below:
id
The id attribute gives the element a unique identifier. There can not be multiple elements in the same web page with the same id value. The value of the id attribute must be at least one character long and must not contain any space characters like a space, tab, carriage return, form feed or line feed. The id attributes value must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods ("."). The id attributes values are also case-sensitive. The id attribute can also contain escaped characters and any ISO 10646 character as a numeric code. For instance, the identifier "B&W?" may be written as "B\&W\?" or "B\26 W\3F". In HTML and XHTML the base, head, html, meta, script, style and title elements are not allowed to have the id attribute. But in HTML5 and XHTML5, every element can have the id attribute according to the W3.org specs.
class
The class attribute specifies one or more classification names to the element. If you specify two or more class name values to the class attribute you must separate each class name with white space characters, for example: <span class="first-class-name second-class-name">...</span>. Any number of elements on the same web page may be assigned the same class name or names. Duplicate class names are ignored for example: <span class="first-class-name first-class-name">...</span>, only one of the class names will be used and the other will be ignored. You should not start a class name with a number even though some browsers will erroneously support them like Internet Explorer. Just like the id attribute the class attributes value must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods ("."). You may also use Unicode characters for your CSS class names, for example: <span class="☣">...</span> and it validates! You may also use Unicode escape points to specify numbers for your CSS style rules and call them with your class names, for example:
<?xml version="1.0" encoding="UTF-8"?>
<!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" xml:lang="en" lang="en">
<head>
 <title>Welcome To HTML & XHTML</title>

 <style type="text/css">
 .\34 {
    color: blue;
 }
 </style>

</head>
<body>

 <p class="4">Some Text...</p>

</body>
</html>
The above HTML and XHTML paragraph element with the class attribute, with the value of 4, for instance: <p class="4">Some Text...</p> calls the CSS style rule .\34 { color: blue; }, which has the selector \34 which is actually the UTF-8 code for the number 4. Just like the id attribute the class attribute can also contain escaped characters and any ISO 10646 character as a numeric code. For instance, the identifier "B&W?" may be written as "B\&W\?" or "B\26 W\3F". In HTML and XHTML the base, basefont, head, html, meta, param, script, style and title elements. But in HTML5, every element can have the class attribute according to the W3.org specs.
style
The style attribute specifies inline style information for the element it is placed in. The value of the style attribute will be the CSS declarations from the CSS declaration block but without the curly brackets or selector. You must also separate each CSS style declaration with a semicolon (;). You cannot however place pseudo-class styles like :hover and so on or pseudo-element styles like :first-letter and so on in the style attribute. You also can't specify any CSS media types in a style attribute. In HTML and XHTML the base, basefont, head, html, meta, param, script, style and title elements are not allowed to have the style attribute. But in HTML5 and XHTML5, every element can have the style attribute according to the W3.org specs. The style attribute and its CSS values are known as inline styles as well as local styles, which will override any style sheet that applies to the same element. Inline styles only apply to the element that they are stated in, and will not affect any other element.
title
The title attribute offers additional information about the element for which it is placed in. The title attributes values can be rendered in browsers in many different ways. For example, visual browsers frequently display the title attributes value as a tool tip when a user places their mouse pointer over the element. Audio user agents may speak the title attributes value in a similar way. If the title attributes value contains any Unicode characters like the U+000A LINE FEED (LF) characters, the content of the title attributes value is split into multiple lines. Each U+000A LINE FEED (LF) character represents a line break. In HTML and XHTML the applet, base, basefont, head, html, meta, param, script and title elements are not allowed to have the title attribute. But in HTML5 and XHTML5, every element can have the title attribute according to the W3.org specs.
dir
The dir attribute tells the users browser the direction in which the displayed text is intended to be read for the element which it is placed in. The dir attribute is also known as an enumerated attribute because it has a fixed number of values. The dir attribute has two keyword values ltr and rtl. The keyword value ltr has a mapping directional state of left-to-right. And the keyword value rtl has a mapping directional state of right-to-left. The default text direction for browsers is left-to-right if there is no parent element using the dir attribute. It is recommended that you use the dir attribute to indicate text direction rather than using CSS. In HTML and XHTML the applet, base, basefont, bdo, br, frame, frameset, iframe, param and script elements are not allowed to have the dir attribute. But in HTML5 and XHTML5, every element can have the dir attribute according to the W3.org specs.
lang
The lang attribute is used to identify the language of a web pages content. The lang attributes value must be a language code that must comply with RFC 1766, in other words the lang attributes value must be an approved International Standards Organization (ISO) two-letter language code only. Now browsers really don't provide great support for the lang attribute but the benefits are not just in the browser they are in search and assistive technologies like screen readers as well. That is why the lang attribute should be used. In HTML and XHTML the applet, base, basefont, br, frame, frameset, iframe, param and script elements are not allowed to have the lang attribute. But in HTML5 and XHTML5, every element can have the lang attribute according to the W3.org specs.
accesskey
The accesskey attributes value provides the user agent a guide for creating a keyboard shortcut that activates or gives focus to the element it is placed in. The accesskey attributes value can be a single character, which can be numerical, alphabetical, or even a symbol. The accesskey attribute can have a single value or multiple single values separated by a space for instance, the following input search field example has two possible access key values, "s" and "f" separated by a space, for example: <input type="search" accesskey="s f" />.
In order to take advantage of the accesskey attributes keyboard shortcuts in Windows the user will have to press the Alt key in conjunction with the single number, letter or symbol you assigned to the accesskey attribute, for example, Alt + s. Macintosh users will have to press the Control (Ctrl) key in conjunction with the access key, for example, Ctrl + s. UNIX users will have to press the Meta key along with the access key, for example, Meta + s. In Firefox 2.0 and up, users will have to press the Alt key in conjunction with the Shift key and the access key, for example, Alt + Shift + s. And in Oprea browsers users must press the Shift key plus the Esc key, for example, Shift + Esc which will then display a list of links the access key attributes are defined to, after releasing the Shift and Esc keys you can then choose the desired access key from the list. The accesskey attributes values are case-sensitive which for instance, means a capital "A" is not the same as its lowercase version "a". In HTML and XHTML the a, area, button, input, label, legend and textarea elements all support the accesskey attribute. But in HTML5 and XHTML5, every element can have the accesskey attribute according to the W3.org specs.
tabindex
The tabindex attributes is used to define the position of the tab order for the element in the current document and whether the element is focusable. The the tabindex attributes value can be any number between 0 and 32767. If you want to exclude an element from the tab order you will need to set the tabindex attributes value to a negative value, for instance, -1. By default, the tab order is based on the order of the elements in the web page, which will receive focus when navigated by the user via the keyboard. The tab order may include elements nested within other elements. If the tab order is changed using the tabindex attributes, the lower numbered elements are first, which are then followed by the higher numbered elements. All elements with a tabindex attribute value greater than zero will be positioned in the tab order before any element with a tabindex attribute value equal to or less than 0. Elements with a value of 0 are navigated in the order in which they first appear in the web page. In HTML and XHTML the a, area, button, input, object, select and textarea elements all support the tabindex attribute. But in HTML5 and XHTML5, every element can have the tabindex attribute according to the W3.org specs.
The HTML 4.01 core attributes id, class, style, title, dir, lang, accesskey and tabindex were carried over to HTML5 to be called global attributes. HTML5 also added the following global attributes listed below:
contenteditable
The contenteditable attribute indicates if the user is allowed to edit the elements content or not. The contenteditable attribute has three values to choose from true, false or inherit. The value true indicates that the element is editable. The value false indicates that the element is not editable. And the value inherit indicates that the element is editable if its parent is. The contenteditable attribute is also known as an enumerated attribute because it has a fixed number of values. The contenteditable attribute currently has great browser support in all the major browsers. In HTML5 and XHTML5, every element can use the contenteditable attribute according to the W3.org specs.
contextmenu
The contextmenu attribute specifies a context menu that applies to the element it is placed in. The contextmenu attributes value must be the ID of a menu element in the DOM for example:
<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Welcome To HTML5</title>
</head>
<body>

 <p contextmenu="foo">This paragraph has a context menu called "foo" attached.</p>

 <menu id="foo">
  <command label="Step 1: Write Article" onclick="doSomething();">
  <command label="Step 2: Save Article" onclick="doSomething();">
 </menu>

</body>
</html>
The context menu specified by the contextmenu attribute must be requested by the user, for example, by the user right-clicking the element, or pressing a context menu key.
draggable
The draggable attribute indicates that the element is draggable, which means that the element it is placed in can be moved by left-clicking the mouse and holding down on it and moving it to a new position in the browsers window. The draggable attribute is also known as an enumerated attribute because it has a fixed number of values. The draggable attribute has three values to choose from which are also known as states. The first value is true which means the element is draggable. The second value is false which means that the element is not draggable. The third value is auto which uses the default behavior of the user agent. In HTML5 and XHTML5, every element can use the draggable attribute according to the W3.org specs.
hidden
The hidden attribute prevents the element it is placed in and its descendants from being displayed in the browser as well as indicate that the element is not yet, or is no longer, relevant. The hidden attribute actually has no value you will either have to place the hidden attribute in an element in the following way for HTML, for instance, <div hidden>...</div> or <div hidden="">...</div> and in XHTML, for example, <div hidden="hidden">...</div> are considered acceptable. The hidden attribute is a boolean attribute beacuse it can be either true or false. On a side note any scripts or form controls in hidden sections will still run and submit respectively, but they will not be displayed to the user. In HTML5 and XHTML5, every element can use the hidden attribute according to the W3.org specs.
itemid
The itemid attribute sets a global identifier for a microdata item. This is an optional attribute, but if it is used, it must be placed in an element that has both the itemscope and itemtype attributes placed in it. The itemid attribute, if specified, must have a value that is in the form of a valid URL potentially surrounded by spaces for example.
<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Welcome To HTML5</title>
</head>
<body>

 <div itemscope itemtype="http://ssa.gov/people"
 itemid="http://ssa.gov/ssn/123456789">
  <span itemprop="firstname">Stewie</span>
  <span itemprop="lastname">Griffin</span>
 </div>

</body>
</html>
The itemid attribute must not be specified on elements that do not have both an itemscope attribute and an itemtype attribute specified. Also the itemid attribute must not be placed in elements with an itemscope attribute whose itemtype attribute specifies a vocabulary that does not support global identifiers for items, as defined by that vocabularies specification. In HTML5 and XHTML5, every element can use the itemid attribute according to the W3.org specs.
itemprop
The itemprop attribute adds a name/value pair to an item of microdata. Any child of an element with an itemscope attribute can have an itemprop attribute set in order to add a property to that item. The itemprop attribute is part of the microdata system for embedding machinereadable data, the itemprop attribute provides the name of the property, and the content of the element provides its value.
The value may also be an absolute URL provided by elements like the href attribute in a, area, or link elements and the src attribute in the audio, embed, iframe, img, source, track, or video elements and the data attribute for the object element. When placing the itemprop attribute in the meta element the value will be the content attributes value or the empty string if there is no such attribute present in the meta element. If the the itemprop attribute is placed in the time element with a datetime attribute the itemprop attributes value will be the value of the elements datetime attribute. So in other words the name/value pair for the following itemprop attribute <span itemprop="firstname">Stewie</span> would be set in the following way for example, firstname: Stewie. In HTML5 and XHTML5, every element can use the itemprop attribute according to the W3.org specs.
Example on how to use the itemprop attribute.
<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Welcome To HTML5</title>
</head>
<body>

 <div itemscope itemtype="http://ssa.gov/people"
 itemid="http://ssa.gov/ssn/123456789">
  <span itemprop="firstname">Stewie</span>
  <span itemprop="lastname">Griffin</span>
 </div>

</body>
</html>
itemref
The itemref attribute indicates a list of space-separated elements to crawl in order to find additional name/value pairs for a microdata item. By default, an item only searches the children of the element that contains the itemscope attribute. However, sometimes it does not make sense to have a single parent item if the data is intermingled. When this happens, the itemref attribute can be set to indicate additional elements to search. The itemref attribute is part of the microdata system for embedding machinereadable data, the itemref attribute specifies a list of elements (by ID values) on the current page to be included in an item for instance, itemref="address phone" would include the elements with the id="address" and id="phone". The itemref attribute is optional, but when used it must be placed in an element that has the itemscope attribute placed in it for example.
<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Welcome To HTML5</title>
</head>
<body>

 <div itemscope itemtype="http://www.example.com/space" itemref="licenses">
  <img itemprop="space" src="images/sun.jpeg" alt="An image of a sunspot.">
  <span itemprop="title">Sunspots on the sun.</span>
 </div>
 <div itemscope itemtype="http://www.example.com/space" itemref="licenses">
  <img itemprop="space" src="images/moon.jpeg" alt="An image of the moon.">
  <span itemprop="title">The moon.</span>
 </div>

 <p id="licenses">All images are licensed under the <a itemprop="license"
 href="http://www.opensource.org/licenses/mit-license.php">MIT
 license</a>.</p>

</body>
</html>
In HTML5 and XHTML5, every element can use the itemref attribute according to the W3.org specs.
itemscope
The itemscope attribute is part of the microdata system for embedding machinereadable data, the itemscope attribute creates a new item, a group of properties in the form of name/value pairs. So basically, an element with an itemscope attribute creates a new item that contains a group of name/value pairs defined by enclosed elements with itemprop attributes, for example:
<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8"> 
 <title>Welcome To HTML5</title>
</head>
<body>

 <div itemscope>
  <span itemprop="firstname">Stewie</span>
  <span itemprop="lastname">Griffin</span>
 </div>

</body>
</html>
Here is how to code the itemscope attribute for XHTML5.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
 <meta charset="UTF-8" />
 <title>Welcome To XHTML5</title>
</head>
<body>

 <div itemscope="itemscope">
  <span itemprop="firstname">Stewie</span>
  <span itemprop="lastname">Griffin</span>
 </div>

</body>
</html>
In HTML5 and XHTML5, every element can use the itemscope attribute according to the W3.org specs.
itemtype
The itemtype attribute is part of the microdata system for embedding machinereadable data, the itemtype attribute indicates a standardized item type indicated by a URL, for example, http://www.example.com/space or a reversed DNS label, for instance, com.example.space. The itemtype attribute is used to define a global type for a microdata item. The itemtype attribute is an optional attribute, but if it is used, it must be placed in an element that has the itemscope attribute placed in it in order to define a type for the microdata item, for example:
<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Welcome To HTML5</title>
</head>
<body>

 <div itemscope itemtype="http://ssa.gov/people"
 itemid="http://ssa.gov/ssn/123456789">
  <span itemprop="firstname">Stewie</span>
  <span itemprop="lastname">Griffin</span>
 </div>

</body>
</html>
In HTML5 and XHTML5, every element can use the itemtype attribute according to the W3.org specs.
spellcheck
The spellcheck attribute indicates the element is to have its spelling and grammar checked. The spellcheck attribute is also known as an enumerated attribute because it has a fixed number of values. The spellcheck attribute has two keyword values to choose from which are the empty string, true and false. The empty string, true value state indicates that the element is to have its spelling and grammar checked. And the false value state indicates that the element is not to be checked. Also the spellcheck attribute default state indicates that the element is to act according to a default behavior, possibly based on the parent element's own spellcheck state which can be either true of false. So basically the spellcheck attribute has two values true and false, for example:
<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Welcome To HTML5</title>
</head>
<body>

 <p spellcheck="true">Spell check is on.</p>
 <p spellcheck="false">Spell check is off.</p>

</body>
</html>
In HTML5 and XHTML5, every element can use the spellcheck attribute according to the W3.org specs.
data-
The data- attribute is a custom data attribute which is an attribute in no namespace whose name starts with the string "data-", and has at least one character after the hyphen, and is XML-compatible, and contains no characters in the range U+0041 .. U+005A (LATIN CAPITAL LETTER A .. LATIN CAPITAL LETTER Z). Custom data attributes are intended to store custom data private to the page or application, for which there are no more appropriate attributes or elements to use. The data- attributes are not intended for use by software that is independent of the site that uses the attributes. The data- attribute indicates a user-defined metadata that may be put in elements without concern of collision with current or future attributes. Use of the data- attribute avoids the common method of creating custom attributes or overloading the class attribute. So in other words you can define your own attributes for your web pages, but they must start with "data-" and the data- attribute name must be at least one character long and must be prefixed with "data-" and it should not contain any uppercase letters, for example:
<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Welcome To HTML5</title>
</head>
<body>

 <ul id="video-games">
  <li data-gaming-platform="playstation 3" data-esrb-rating="M">Call of Duty: Black Ops</li>
  <li data-gaming-platform="xbox 430" data-esrb-rating="M">Halo Reach</li>
  <li data-gaming-platform="wii" data-esrb-rating="T">James Bond: Goldeneye 007</li>
 </ul> 

</body>
</html>
In HTML5 and XHTML5 every element may have any number of custom data- attributes specified, with any value according to the W3.org specs. They refer to the DOM Dataset API.
role
The role attribute is used to allow web developers a way to describe what part an element plays, in addition to what it is. The role attribute basically adds new semantics and metadata to existing elements, helping search engines and assistive technologies better process web pages. The role attribute is also known as a collection attribute. The role attribute takes as its value one or more white-space separated QNames which include the following defined values listed below.
alert
A message with important, and usually time-sensitive, information. Also see alertdialog and status.
alertdialog
A type of dialog that contains an alert message, where initial focus goes an element within the dialog. Also see alert and dialog.
application
A region declared as a web application, as opposed to a web document.
article
A section of a page that consists of a composition that forms an independent part of a document, page, or site.
banner
contains the prime heading or internal title of a page.
button
An input that allows for user-triggered actions when clicked or pressed. Also see link.
checkbox
A checkable input that has three possible values: true, false, or mixed.
columnheader
A cell containing header information for a column.
combobox
A presentation of a select; usually similar to a textbox where users can type ahead to select an option, or type to enter arbitrary text as a new item in the list. Also see listbox.
complementary
indicates that the section supports but is separable from the main content of resource.
contentinfo
contains meta information about the content on the page or the page as a whole.
definition
indicates the definition of a term or concept.
dialog
A dialog is an application window that is designed to interrupt the current processing of an application in order to prompt the user to enter information or require a response. Also see alertdialog.
directory
A list of references to members of a group, such as a static table of contents.
document
A region containing related information that is declared as document content, as opposed to a web application.
form
A landmark region that contains a collection of items and objects that, as a whole, combine to create a form. Also see search.
grid
A grid is an interactive control which contains cells of tabular data arranged in rows and columns, like a table.
gridcell
A cell in a grid or treegrid.
group
A set of user interface objects which are not intended to be included in a page summary or table of contents by assistive technologies.
heading
A heading for a section of the page.
img
A container for a collection of elements that form an image.
link
An interactive reference to an internal or external resource that, when activated, causes the user agent to navigate to that resource. Also see button.
list
A group of non-interactive list items. Also see listbox.
listbox
A widget that allows the user to select one or more items from a list of choices. Also see combobox and list.
listitem
A single item in a list or directory.
log
A type of live region where new information is added in meaningful order and old information may disappear. Also see marquee.
main
acts as the main content of the document.
marquee
A type of live region where non-essential information changes frequently. Also see log.
math
Content that represents a mathematical expression.
menu
A type of widget that offers a list of choices to the user.
menubar
A presentation of menu that usually remains visible and is usually presented horizontally.
menuitem
An option in a group of choices contained by a menu or menubar.
menuitemcheckbox
A checkable menuitem that has three possible values: true, false, or mixed.
menuitemradio
A checkable menuitem in a group of menuitemradio roles, only one of which can be checked at a time.
navigation
indicates a collection of items suitable for navigating the document or related documents.
note
indicates the content is parenthetic or ancillary to the main content of the resource.
option
A selectable item in a select list.
presentation
An element whose implicit native role semantics will not be mapped to the accessibility API.
progressbar
An element that displays the progress status for tasks that take a long time.
radio
A checkable input in a group of radio roles, only one of which can be checked at a time.
radiogroup
A group of radio buttons.
region
A large perceivable section of a web page or document, that the author feels is important enough to be included in a page summary or table of contents, for example, an area of the page containing live sporting event statistics.
row
A row of cells in a grid.
rowgroup
A group containing one or more row elements in a grid.
rowheader
A cell containing header information for a row in a grid.
scrollbar
A graphical object that controls the scrolling of content within a viewing area, regardless of whether the content is fully displayed within the viewing area.
search
indicates that the section provides a search facility.
separator
A divider that separates and distinguishes sections of content or groups of menuitems.
slider
A user input where the user selects a value from within a given range.
spinbutton
A form of range that expects a user to select from amongst discrete choices.
status
A container whose content is advisory information for the user but is not important enough to justify an alert. Also see alert.
tab
A grouping label providing a mechanism for selecting the tab content that is to be rendered to the user.
tablist
A list of tab elements, which are references to tabpanel elements.
tabpanel
A container for the resources associated with a tab, where each tab is contained in a tablist.
textbox
Input that allows free-form text as its value.
timer
A type of live region containing a numerical counter which indicates an amount of elapsed time from a start point, or the time remaining until an end point.
toolbar
A collection of commonly used function buttons represented in compact visual form.
tooltip
A contextual popup that displays a description for an element.
tree
A type of list that may contain sub-level nested groups that can be collapsed and expanded.
treegrid
A grid whose rows can be expanded and collapsed in the same manner as for a tree.
treeitem
An option item of a tree. This is an element within a tree that may be expanded or collapsed if it contains a sub-level group of treeitems.
Now that you know about the role attributes values, you should also beaware that there are some guidelines when using the role attributes values for instance, the ARIA role attribute and aria- attribute can not be set in a manner that conflicts with the semantics described in the following tables in the provided link, see the tables in section 3.2.6 Annotations for assistive technology products (ARIA) of the W3.org specs for more detailed information. The role attribute describes the role(s) the current element plays in the context of the document. The role attribute is used by applications and assistive technologies to determine the purpose of UI widgets. In the case of a web page the role attribute may be declarative as a function of particular elements or it may be an attribute which is configurable by the page author. Additionally, role information may be used to define each action which may be performed on an element. This allows a user to make informed decisions on which actions may be taken on an element and activate the selected action in a device independent way. In HTML5 and XHTML5, every element can use the role attribute according to the W3.org specs.
aria-
The aria- attribute also known as the WAI-ARIA Attributes Module states that the WAI-ARIA attributes as a module that can be included in a modularlized DTD. WAI stands for Web Accessibility Initiative and ARIA stands for Accessible Rich Internet Applications. Note that the WAI-ARIA attributes are in no namespace, and the attribute name begins with "aria-" to reduce the likelihood of collision with existing attributes. So basically, the aria- attribute defines a way to make web content and web applications more accessible to people with disabilities. It especially helps with dynamic content and advanced user interface controls developed with Ajax, HTML, JavaScript, and related technologies. The aria- attribute is also known as a collection attribute. Now the aria- attribute has pre-defined attribute names that must begin with aria- which I will list below along with all their possible values.
aria-activedescendant
Identifies the currently active descendant of a composite widget. The aria-activedescendant attributes values can be any space-separated list of one or more values from the id attribute.
aria-atomic
Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute. Also see aria-relevant. The aria-atomic attribute has two values to choose from which are true and false.
aria-autocomplete
Indicates whether user input completion suggestions are provided. The aria-autocomplete attribute has four values to choose from which are inline, list, both and none.
aria-busy
Indicates whether an element, and its subtree, are currently being updated. The aria-busy attribute has two values to choose from which are true and false.
aria-checked
Indicates the current "checked" state of checkboxes, radio buttons, and other widgets. Also see aria-pressed and aria-selected. The aria-checked attribute has four values to choose from which are true, false, mixed and undefined.
aria-controls
Identifies the element (or elements) whose contents or presence are controlled by the current element. Also see aria-owns. The aria-controls attributes values can be any space-separated list of one or more values from the id attribute.
aria-describedby
Identifies the element (or elements) that describes the object. Also see aria-labelledby. The aria-describedby attributes values can be any space-separated list of one or more values from the id attribute.
aria-disabled
Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable. Also see aria-hidden and aria-readonly. The aria-disabled attribute has two values to choose from which are true and false.
aria-dropeffect
Indicates what functions can be performed when the dragged object is released on the drop target. This allows assistive technologies to convey the possible drag options available to users, including whether a pop-up menu of choices is provided by the application. Typically, drop effect functions can only be provided once an object has been grabbed for a drag operation as the drop effect functions available are dependent on the object being dragged. The aria-dropeffect attribute has six values to choose from which are copy, move, reference, execute, popup and none.
aria-expanded
Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed. The aria-expanded attribute has three values to choose from which are true, false and undefined.
aria-flowto
Identifies the next element (or elements) in the recommended reading order of content, overriding the general default to read in document source order. The aria-flowto attributes values can be any space-separated list of one or more values from the id attribute.
aria-grabbed
Indicates an element's "grabbed" state in a drag-and-drop operation. The aria-grabbed attribute has three values to choose from which are true, false and undefined.
aria-haspopup
Indicates that the element has a popup context menu or sub-level menu. The aria-haspopup attribute has two values to choose from which are true and false.
aria-hidden
Indicates that the element is not visible or perceivable to any user as implemented by the author. Also see aria-disabled. The aria-hidden attribute has two values to choose from which are true and false.
aria-invalid
Indicates the entered value does not conform to the format expected by the application. The aria-invalid attribute has four values to choose from which are true, false, grammar and spelling.
aria-label
Defines a string value that labels the current element. Also see aria-labelledby. The aria-label attributes values can be any string of characters, which means the values can be numbers, letters, symbols, etc.
aria-labelledby
Identifies the element (or elements) that labels the current element. Also see aria-label and aria-describedby. The aria-labelledby attributes values can be any space-separated list of one or more values from the id attribute.
aria-level
Defines the hierarchical level of an element within a structure. The aria-level attributes values can be any integer (number) greater than 0.
aria-live
Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region. The aria-live attribute has three values to choose from which are off, polite, and assertive.
aria-multiline
Indicates whether a text box accepts only a single line, or if it can accept multiline input. The aria-multiline attribute has two values to choose from which are true and false.
aria-multiselectable
Indicates that the user may select more than one item from the current selectable descendants. The aria-multiselectable attribute has two values to choose from which are true and false.
aria-orientation
Indicates whether the element and orientation is horizontal or vertical. The aria-orientation attribute has two values to choose from which are vertical and horizontal.
aria-owns
Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship between DOM elements where the DOM hierarchy cannot be used to represent the relationship. Also see aria-controls. The aria-owns attributes values can be any space-separated list of one or more values from the id attribute.
aria-posinset
Defines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM. Also see aria-setsize. The aria-posinset attributes values can be any integer (number) greater than 0.
aria-pressed
Indicates the current "pressed" state of toggle buttons. Also see aria-checked and aria-selected. The aria-pressed attribute has four values to choose from which are true, false, mixed and undefined.
aria-readonly
Indicates that the element is not editable, but is otherwise operable. Also see aria-disabled. The aria-readonly attribute has two values to choose from which are true and false.
aria-relevant
Indicates what user agent change notifications (additions, removals, etc.) assistive technologies will monitor within a live region. Also see aria-atomic. The aria-relevant attribute has five values to choose from which are additions, removals, text and all.
aria-required
Indicates that user input is required on the element before a form may be submitted. The aria-required attribute has two values to choose from which are true and false.
aria-selected
Indicates the current "selected" state of various widgets. Also see aria-checked and aria-pressed. The aria-selected attribute has three values to choose from which are true, false and undefined.
aria-setsize
Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM. Also see aria-posinset. The aria-setsize attributes value can be any integer greater than or equal to 1, and less than or equal to the size of the set.
aria-sort
Indicates if items in a table or grid are sorted in ascending or descending order. The aria-sort attribute has four values to choose from which are ascending, descending, none and other.
aria-valuemax
Defines the maximum allowed value for a range widget. The aria-valuemax attributes value can be any real numerical value.
aria-valuemin
Defines the minimum allowed value for a range widget. The aria-valuemin attributes value can be any real numerical value.
aria-valuenow
Defines the current value for a range widget. Also see aria-valuetext. The aria-valuenow attributes value can be any real numerical value.
aria-valuetext
Defines the human readable text alternative of aria-valuenow for a range widget. The aria-valuetext attributes values can be any string of characters, which means the values can be numbers, letters, symbols, etc.
XML also has global attributes that are defined in the w3.org XML specifications which are often used in XHTML. The XML global attributes are listed below:
xml:lang
The xml:lang attribute is a special language identification attribute in XML, which defines and identifies the natural or formal language in which the content of the XML document is written in. So basically, the xml:lang attribute specifies rhe language of the web page. The xml:lang attribute may be used only once in a document, for example, in the root element html, but it may be used to indicate a change of language anywhere within a web page as many times as needed.
The values of the xml:lang attribute are the language identifiers as defined by the IETF BCP 47 language tags, or the empty string. Setting the xml:lang attributes value to the empty string indicates that the primary language is unknown. The xml:lang attributes value is defined by the ISO-639, which is basically a two-letter language code that is optionally followed by a hyphen and a two-letter country code. Traditionally, the language is given in lowercase and the country in uppercase (and for safety, this rule should always be followed), but processors are expected to use the values in a case-insensitive manner. Also, the ISO-3166 provides extensions for nonstandardized languages or language variants. Valid xml:lang attribute values include notations such as en, en-US, en-UK, en-cockney, i-navajo, and x-minbari.
The xml:lang attribute is almost the same as the lang attribute, except for that the xml:lang attribute must be applied within web pages that use an XHTML doctype. Now browsers really don't provide great support for the xml:lang attribute but the benefits are not just in the browser they are in search and assistive technologies like screen readers as well. That is why the xml:lang attribute should be used. In XHTML5, every element can use the xml:lang attribute according to the W3.org specs.
xml:space
The xml:space attribute indicates whether any whitespace inside the element is significant and should not be altered by the XML processor. The xml:space attribute is included from XHTML 1.0 and is used to set whether spaces need to be preserved within the element or the default whitespace handling should be employed. It is curious that an element defined to override traditional whitespace rules would allow such an attribute, and in practice this attribute is not used by web developers.
The xml:space attribute can use one of two enumerated values, which are preserve and default. The preserve value will preserve all whitespace (newlines, spaces, and tabs) present within the element. And the value default will allow the XML processor to use its default processing rules when deciding to preserve or discard the whitespace inside the element. In XHTML 1.0 recommendation, the xml:space attributes value is currently fixed as "preserve", so there's no way not to preserve whitespace in XHTML. The xml:space attribute has no effect on HTML elements, as the default behavior in HTML is to preserve whitespace. In XHTML5, every element can use the xml:space attribute according to the W3.org specs.
xml:base
The xml:base attribute specifies a base URI other than the base URI of the document or external entity. The value of xml:base attribute is interpreted as a Legacy Extended IRI (LEIRI) as defined in the W3C Note "Legacy extended IRIs for XML resource identification" [LEIRI]. The syntax of Legacy Extended IRIs (LEIRIs) and LEIRI references is the same as that for IRIs and IRI references except that ucschar is redefined. So basically in laymans terms, the xml:base attributes value can be a URL or relative path that can potentially contain non-ASCII characters like chinese characters. In XHTML5, every element can use the xml:base attribute according to the W3.org specs.

Posted in:

0 comments:

Post a Comment

#
### ###