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:

HTML Attributes
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"&gt
</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