HTML ATTRIBUTES
An HTML attribute is a modifier of an HTML element type. An attribute either modifies the default functionality of an element type or provides functionality to certain element types unable to function correctly without them. In HTML syntax, an attribute is added to an HTML start tag.
- All HTML elements can have attributes
- Attributes provide additional information about an element
- Attributes are always specified in the start tag
- Attributes usually come in name/value pairs like: name="value
THE LANGUAGE ATTRIBUTE
Identifying the language of your content allows you to automatically do a number of things, from changing the look and behavior of a page, to extracting information, to changing the way that an application works. Some language applications work at the level of the document as a whole, some work on appropriately labeled document fragments.
It is best to add language information to your content now in order to be able to reap the benefits when new developments arise. It is simple to do when creating content, but more difficult to retrofit later.
The language of the document can be declared in the <html> tag.
The language is declared with the lang attribute.
Declaring a language is important for accessibility applications (screen readers) and search engines:
EXAMPLE
<!DOCTYPE html>
<html lang="en-US">
<body>
...
</body>
<html lang="en-US">
<body>
...
</body>
</html>
THE TITLE ATTRIBUTE
The title global attribute contains text representing advisory information, related to the element it belongs to. This information can be typically, but not necessarily, presented to the user as a tooltip. Some typical uses:
- Link: title or description of the linked document
- Media element like an image: description or associated credits
- Paragraph: footnote or a commentary about it
- Quotation: information about the author, and so on.
If this attribute is omitted, it means that the title of the nearest ancestor of this element is still relevant (and could be used as the tooltip for that element). If this attribute is set to the empty string, it explicitly means its nearest ancestor's title is not relevant (and shouldn't be used in the tooltip for this element).
Additional semantics are attached to the title attributes of the
<link>, <abbr>, <input> and <menuitem> elements.
Here, a title attribute is added to the <p> element. The value of the title attribute will be displayed as a tooltip when you mouse over the paragraph:
<!DOCTYPE html>
<html>
<body>
<h2>The title attribute</h2>
<p title="I'm a tooltip">
Mouse over this paragraph, to display the title attribute as a tooltip.
</p>
</body>
</html>
The title attribute
Mouse over this paragraph, to display the title attribute as a tooltip
Size Attributes
HTML images are defined with the <img> tag.
The filename of the source (src), and the size of the image (width and height) are all provided as attributes:
The alt Attribute
The alt attribute specifies an alternative text to be used, when an image cannot be displayed.
The value of the attribute can be read by screen readers. This way, someone "listening" to the webpage, e.g. a blind person, can "hear" the element.
We Suggest: Use Lowercase Attributes
The HTML5 standard does not require lowercase attribute names.
The title attribute can be written with uppercase or lowercase like title or TITLE.
W3C recommends lowercase in HTML, and demands lowercase for stricter document types like XHTML.
Single or Double Quotes?
Double quotes around attribute values are the most common in HTML, but single quotes can also be used.
In some situations, when the attribute value itself contains double quotes, it is necessary to use single quotes:
HTML Attributes
Below is an alphabetical list of some attributes often used in HTML:
| Attribute | Description |
|---|---|
| alt | Specifies an alternative text for an image, when the image cannot be displayed |
| disabled | Specifies that an input element should be disabled |
| href | Specifies the URL (web address) for a link |
| id | Specifies a unique id for an element |
| src | Specifies the URL (web address) for an image |
| style | Specifies an inline CSS style for an element |
| title | Specifies extra information about an element (displayed as a tool tip) |
Comments
Post a Comment