What is HTML Attributes ?
HTML elements can have attributes. Attributes provide additional information about an element.
To define the characteristics of an HTML element, an attribute is used and placed inside the opening tag of the element. All attributes are made up of two parts − name and value
- The name is the property you want to set. For example, the paragraph <h1> element in the example carries an attribute whose name is align, which you can use to indicate the alignment of paragraph on the page.
- The value is what you want the value of the property to be set and always put within quotations. The below example shows three possible values of align attribute: left, center and right.
Attribute names and attribute values are case-insensitive.
However, in its recommendation for HTML 4, the World Wide Web Consortium (W3C) recommends lowercase attributes / attribute values.
Example
<!DOCTYPE html>
<html>
<head>
<title>Align Attribute Example</title>
</head>
<body>
<p align ="left">This is left aligned</p>
<p align ="center">This is center aligned</p>
<p align ="right">This is right aligned</p>
</body>
</html>
This will display the following result
Align Attribute Example
This is left aligned
This is center aligned
This is right aligned
HTML Attributes
Below is an alphabetical list of some attributes often used in HTML, which you will learn more about in this tutorial:
| 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) |
The href Attribute
HTML links are defined with the <a> tag. The link address is specified in the href attribute:
Example
<!DOCTYPE html>
<html>
<body>
<h2>The href Attribute</h2>
<p>HTML links are defined with the a tag. The link address is specified in the href attribute:</p>
<a href="http://www.ukacademe.com">This is a link</a>
</body>
</html>
The src Attribute
HTML images are defined with the <img> tag.
The filename of the image source is specified in the src attribute:
Example
<!DOCTYPE html>
<html>
<body>
<h2>The src Attribute</h2>
<p>HTML images are defined with the img tag, and the filename of the image source is specified in the src attribute:</p>
<img src="img_girl.jpg" width="500" height="600">
</body>
</html>
The width and height Attributes
Images in HTML have a set of size attributes, which specifies the width and height of the image:
<!DOCTYPE html>
<html>
<body>
<h2>Size Attributes</h2>
<p>Images in HTML have a set of size attributes, which specifies the width and height of the image:</p>
<img src="img_girl.jpg" width="500" height="600">
</body>
</html>
Note:The image size is specified in pixels: width="500" means 500 pixels wide.
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.
Example:
<!DOCTYPE html>
<html>
<body>
<h2>The alt Attribute</h2>
<p>The alt attribute should reflect the image content, so users who cannot see the image gets an understanding of what the image contains:</p>
<img src="img_girl.jpg" alt="Girl with a jacket" width="500" height="600">
</body>
</html>
Note:The alt attribute is also useful if the image does not exist:
The style Attribute
The style attribute is used to specify the styling of an element, like color, font, size etc.
<!DOCTYPE html>
<html>
<body>
<h2>The style Attribute</h2>
<p>The style attribute is used to specify the styling of an element, like color:</p>
<p style="color:red">I am a paragraph.</p>
</body>
</html>
The lang Attribute
The language of the document can be declared in the <html> tag.
The language is declared with the lang attribute.
For accessibility applications (screen readers) and search engines, declaring a language is important:
<!DOCTYPE html>
<html lang="en-US">
<body>
...
</body>
</html>
The first two letters indicate the (en) language. Use two more letters (US) if there is a dialect.
The title Attribute
Here, a title attribute is added to the <p> element. When you mouse over the paragraph, the value of the title attribute will appear as a tooltip:
<!DOCTYPE html>
<html>
<body>
<h2 title="I'm a header">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>
We Suggest: Use Lowercase Attributes
The standard HTML5 does not require names of the lowercase attributes. It is possible to write the title attribute such as title or TITLE with uppercase or lowercase.
For more stringent types of documents such as XHTML, W3C recommends HTML lowercase and requires lowercase.
We Suggest: Quote Attribute Values
The standard HTML5 does not require quotes for attribute values. The href attribute can be written without quotes, as shown above:
Bad:
<!DOCTYPE html>
<html>
<body>
<a href=http://www.ukacademe.com>This is a link</a>
</body>
</html>
Good:
<!DOCTYPE html>
<html>
<body>
<a href="https://www.w3schools.com">This is a link</a>
</body>
</html>
W3C recommends quotes in HTML and requires quotes for more stringent types of documents such as XHTML.
Sometimes it is necessary to use quotes. This example does not display the title attribute properly, as it contains a space:
Example:
<!DOCTYPE html>
<html>
<body>
<h1>About UK Academe</h1>
<p title=About Academe> You cannot omit quotes around an attribute value if the value contains spaces.</p>
<p>If you move the mouse over the paragraph above, your browser will only display the first word from the title.</p>
</body>
</html>
Single or Double Quotes?
The most common attribute values in HTML are double quotes, 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:
Example:
<p title='John "ShotGun" Nelson'>
Or vice versa:
<p title="John 'ShotGun' Nelson">Summary
- All HTML elements can have attributes
- The title attribute provides additional "tool-tip" information
- The href attribute provides address information for links
- The width and height attributes provide size information for images
- The alt attribute provides text for screen readers
- At W3Schools we always use lowercase attribute names
- At W3Schools we always quote attribute values with double quotes