HTML Attributes
Attributes are those that will provide additional information about HTML elements.
HTML Attributes
- All HTML elements will be having attributes
- Attributes will provide additional information about an element
- Attributes should always be specified in the start tag
- Attributes are mentioned in name/value pairs like: name="value"
The lang Attribute
The language of the document should be declared in the <html> tag.
The language should be declared with the lang attribute.
Declaring a language is very important for ensuring the accessibility of various applications (screen readers) and search engines:
Example
<!DOCTYPE html>
<html lang="en-US">
<body>
...
</body>
</html>
The first two letters specify the language (en). If there is a presence of a dialect, use two more letters (US).
The title Attribute
Here, a title attribute should be added to the <p> element. The value of the title attribute will be displayed as a tooltip when the mouse is hovered over the paragraph:
The href Attribute
HTML links will be defined with the <a> tag. The link address will be specified in the href attribute:
Size Attributes
HTML images will be defined with the <img> tag.
The source filename(src), and the image size (width and height of the image) are all given as attributes:
The image size should be specified in pixels: width="104" means 104 screen pixels wide.
You will be learning more about images and the tag later in this tutorial.
The alt Attribute
The alt attribute denotes an alternative text that will be used, when an image cannot be displayed.
The alt attribute value can be read by screen readers. This way, a person who is "listening" to the webpage, e.g. a blind person, can "hear" the alt element as the text is not displayed.
We Suggest: Use Lowercase Attributes
The HTML5 standard will not be requiring lowercase attribute names.
The title attribute can also be mentioned using uppercase or lowercase attributes like Title and/or TITLE.
NGO always recommendsthe usage of lowercase in HTML, and demands the usage of lowercase for stricter document types like XHTML.
At NGO, lowercase attribute names are always used.
We Suggest: Quote Attribute Values
The HTML5 standard will not be requiring quotes around the attribute values.
The href attribute, as demonstrated in the above scenario, can be written as:
NGO recommends quotes in HTML, and demands quotes for stricter document types like XHTML.
Sometimes it is necessary to use quotes. This example will not display the title attribute correctly, because it contains a space:
Using quotes are commonly found. Omitting quotes can lead to errors. At NGO quotes are always used around attribute values.
Single or Double Quotes?
Double quotes that are used around attribute values is commonly used in HTML, but usage of single quotes can also be done.
during certain situations, if the attribute value itself contains double quotes, it is necessary to use single quotes:
Example
<p title='John "ShotGun" Nelson'>
Or vice versa:
Example
<p title="John 'ShotGun' Nelson">
summary of the chapter
- All HTML elements will be having attributes
- The title attribute gives additional "tool-tip" information
- The href attribute gives address information for the necessary links
- The width and height attributes gives the image size information
- The alt attribute provides alternate text for screen readers when image is not visible
- At NGO,lowercase attribute names are always used
- At NGO,quote attribute values are always used with with double quotes
HTML Attributes
given Below is an list of some attributes that are frequently used in HTML:
| Attribute | Description |
|---|---|
| alt | specifies an alternative text for an image, when the image cannot be shown or displayed |
| disabled | Specifies to disable an input element |
| href | Specifies the link URL (web address) |
| id | Specifies an element's unique id |
| src | Specifies an image's URL (web address) |
| style | Specifies an element's inline CSS style |
| title | Specifies element's extra information (displayed as a tool tip) |
A complete list of all attributes for each HTML element, is listed in our: HTML Attribute Reference.