HTML Tutorial
HTML Attributes
HTML Attributes provides more information to the HTML element in which it is declared.
<body bgcolor="#000"></body>This is an HTML attribute
An attribute usually comes with a value, this value defines the function needed from the attribute.
We also have some attributes that do not require a value. You will learn about those attributes in later chapters.
Features of an HTML Attribute
- Attributes provide more information and definition to an HTML element.
- Attributes are declared in the start tag only.
- Attributes come with values, but there are also some attributes that do not require a value.
Procedures for Declaring an Attribute
- Provide the name of the attribute,
- followed by an operator sign(=) and a quote(" or '),
- then declare the value needed and another quote(" or ') to embrace the value.
See Examples
<html lang="en-US"></html> <!-- Sets the language type of an HTML document to the US - English. -->
<body width="700"></body> <!-- Sets the width of a webpage body to 700px -->
<input type="text" /> <!-- Creates a text input field. -->
Global HTML Attributes
Global HTML attributes are attributes that can be used on all HTML elements. These attributes perform functions that are common to all HTML elements, although they might not have an effect on all. All HTML elements must allow these global attributes, even the custom-defined elements (elements not specified in the HTML standard).
The HTML Global attributes are grouped as follows:
Group | Attributes | Description |
data-* attributes |
data-foo , data-baz , data-bar |
The data-* global attributes are a kind of custom global attributes that allows a developer to store extra information on the standard, semantic HTML elements by using custom-defined names, prefixed with data- keyword and can be easily accessed. |
Event handler attributes | onabort , onautocomplete , onautocompleteerror , onblur , oncancel , oncanplay , oncanplaythrough , onchange , onclick , onclose , oncontextmenu , oncuechange , ondblclick , ondrag , ondragend , ondragenter , ondragexit , ondragleave , ondragover , ondragstart , ondrop , ondurationchange , onemptied , onended , onerror , onfocus , oninput , oninvalid , onkeydown , onkeypress , onkeyup , onload , onloadeddata , onloadedmetadata , onloadstart , onmousedown , onmouseenter , onmouseleave , onmousemove , onmouseout , onmouseover , onmouseup , onmousewheel , onpause , onplay , onplaying , onprogress , onratechange , onreset , onresize , onscroll , onseeked , onseeking , onselect , onshow , onsort , onstalled , onsubmit , onsuspend , ontimeupdate , ontoggle , onvolumechange , onwaiting |
These are attributes used to trigger events on a web page. |
Other global attributes | Other global attributes will be explained in this table below. |
ARIA Attributes
Accessible Rich Internet Applications makes web applications to be easily accessible to the people with disabilities by providing sets of attributes which are prefixed with aria-
.
List of All ARIA Attributes and Descriptions
List of ARIA attributes and their descriptions as specified on the W3C website.
Attribute | Description | Value or Data Type |
aria-activedescendant |
Identifies the currently active descendant of a composite widget. This is used to the assistive technology about the active child which has focus. More on this later. | The ID of the currently active child object |
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. | "true" | "false" default |
aria-autocomplete |
Indicates whether user input completion suggestions are provided. | "both" | "inline" | "list" | "none" default |
aria-busy (state) |
Indicates whether an element, and its subtree, are currently being updated. | "true" | "false" default |
aria-checked (state) |
Indicates the current "checked" state of checkboxes, radio buttons, and other widgets. See related aria-pressed and aria-selected. |
|
aria-controls |
Identifies the element (or elements) whose contents or presence are controlled by the current element. See related aria-owns. | A list of one or more ID references. |
aria-describedat |
Specifies a URI referencing content that describes the object. See related aria-describedby. | A URI (Uniform resource identifier) |
aria-describedby |
Identifies the element (or elements) that describes the object. | A list of one or more ID references. |
aria-disabled |
Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable. | "true" | "false" default |
aria-dropeffect |
Indicates what functions can be performed when the dragged object is released on the drop target. |
|
aria-expanded |
Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed. |
|
aria-flowto |
Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion, allows assistive technology to override the general default of reading in document source order. |
A list of one or more ID references. |
aria-grabbed |
Indicates an element's "grabbed" state in a drag-and-drop operation. |
|
aria-haspopup |
Indicates that the element has a popup context menu or sub-level menu. |
|
aria-hidden |
Indicates that the element and all of its descendants are not visible or perceivable to any user as implemented by the author. |
|
aria-invalid |
Indicates the entered value does not conform to the format expected by the application. |
|
aria-label |
Defines a string value that labels the current element. |
string - any text defined by the developer |
aria-labelledby |
Identifies the element (or elements) that labels the current element. |
A list of one or more ID references. |
aria-level |
Defines the hierarchical level of an element within a structure. |
integer - A numerical value without a fractional component. |
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. |
|
aria-multiline |
Indicates whether a text box accepts multiple lines of input or only a single line. | "true" | "false" default |
aria-multiselectable |
Indicates that the user may select more than one item from the current selectable descendants. |
|
aria-orientation |
Indicates whether the element and orientation is horizontal or vertical. |
|
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. |
A list of one or more ID references. |
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. |
A numerical value without a fractional component. |
aria-pressed |
Indicates the current "pressed" state of toggle buttons. | "false" | "mixed" | "true" | "undefined" default |
aria-readonly |
Indicates that the element is not editable, but is otherwise operable. |
|
aria-relevant |
Indicates what user agent change notifications (additions, removals, etc.) assistive technologies will receive within a live region. | "additions" | "additions text" default | "all" | "removals" | "text" |
aria-required |
Indicates that user input is required on the element before a form may be submitted. |
|
aria-selected |
Indicates the current "selected" state of various widgets. |
|
aria-setsize |
Defines the number of items in the current set of listitems or treeitems. |
A numerical value without a fractional component. |
aria-sort |
Indicates if items in a table or grid are sorted in ascending or descending order. |
|
aria-valuemax |
Defines the maximum allowed value for a range widget. |
Any real numerical value. |
aria-valuemin |
Defines the minimum allowed value for a range widget. |
Any real numerical value. |
aria-valuenow |
Defines the current value for a range widget. |
Any real numerical value. |
aria-valuetext |
Defines the human readable text alternative of aria-valuenow for a range widget. |
Unconstrained value type. String: Any kind of characters. |
Lists of HTML Attributes and Descriptions
What You Should Know at the End of This Lesson
- Know what the HTML attribute is.
- Determine the
width
andheight
of a web page body using attributes. - Teach someone else what HTML attribute is.