HTML Attributes

❮ Previous Next ❯

Every HTML element can have some extra details about them. These additional pieces of information are called attributes. They are the modifier of the HTML elements.

We can define every element with one or multiple attributes.
Attributes can alter the default behaviour of an HTML element. It can also modify the default view of the elements.
Attributes are always mentioned in the start tag of an element. They can not be specified in the end tag.
Attributes are generally specified in name/value pairs like name="value".
HTML is not a case-sensitive language. So attributes can have uppercase or lowercase letters. But it is advised to specify attributes of HTML elements in lowercase letters.

Syntax

<tagname attribute-name="value">content</tagname>

Check the example shown below. The example have elements with attributes.

Example

<!DOCTYPE html>

<html lang="en-US">

<head>

<title>Attributes Examples</title>
</head>

<body>

<h1 style="color:red;">HTML Elements with Attributes.</h1>

<p title="First Paragraph">This paragraph has a title attribute. Mouse over to see it.</p>

<a href="https://resultuniversity.com">Visit Result University</a>

<img src="garden.jpg" alt="A Garden" width="250" height="250">

</body>

</html>

Try on Editor

In the above example, some HTML elements' start tags have extra information. These additional pieces of information are attributes. For example:

<html> element has a lang attribute with value "en-US".
<h1> tag is specified with style attribute with value "color:red;".
<p> tag is specified with title attribute with value "First Paragraph".
<a> tag is specified with href attribute with value "https://resultuniversity.com".
<img> tag is specified with four attributes, namely src, alt, width and height.

Let's discuss these attributes in more detail.

The lang Attribute

Inside the <html> tag you should always provide a lang attribute.

It helps the browser in setting the language of the HTML document. With this, the browser can display the contents' language accurately on the screen.

It also helps search engines in indexing the page.

Code

Example

<!DOCTYPE html>

<html lang="en">

<head>

<title>Lang Attributes Example</title>
</head>

<body>

<h1>Set Lang attribute to English.</h1>

<p>This is a paragraph of the document. The lang attribute's value has been set to "en" which is a code for English language.</p>

</body>

</html>

Try on Editor

The value of the lang attribute can also contain the country code along with the language code.

The first two characters will be language code followed by a hyphen and the last two characters will be specified with the country code.

To set the language as English and the country as the United States, you need to set lang="en-US".

See the example below for more clear understanding.

Code

Example

<!DOCTYPE html>

<html lang="en-US">

<head>

<title>Lang Attributes Example</title>
</head>

<body>

<h1>Set Lang attribute to English-United States</h1>

<p>This is a paragraph of the document. The lang attribute's value has been set to "en-US" which is a code for English language and country United States.</p>

</body>

</html>

Try on Editor

The style Attribute

When we need to give some specific styles to HTML elements, we apply style attributes to them. With style attribute, one can modify an element's default view in the browser.

The style attribute can change the font, color and size of an element.

Syntax

<tag style="property:value;">Content</tag>

As in the below example, we have changed the font color of the heading to red.

Code

<h1 style="color:red;">This is a Red Color Heading</h1>

Example

<!DOCTYPE html>

<html lang="en-US">

<head>

<title>Style Attribute Example</title>
</head>

<body>

<h1 style="color:red;">This is a Red Color Heading</h1>

</body>

</html>

Try on Editor

We will learn this concept in more detail in the HTML Styles chapter.

The title Attribute

If we need to give some extra information or a hint about an element, we can use the title attribute in the start tag of that element.

When we mouse over such an element, the value of the attribute is shown as a tooltip.

Check out the below example. For better understanding, click on 'Try on Editor' to view the result.

Code

<p title="First Paragraph">This paragraph has a title attribute. Mouse over to see it.</p>

Example

<!DOCTYPE html>

<html lang="en-US">

<head>

<title>Title Attribute Example</title>
</head>

<body>

<p title="First Paragraph">This paragraph has a title attribute. Mouse over to see it.</p>

</body>

</html>

Try on Editor

The href attribute

The href attribute is applied to element <a>. Element <a> defines a hyperlink in an HTML document.

The href value holds the URL of another HTML document.

Code

<a href="https://resultuniversity.com">Visit Result University</a>

Example

<!DOCTYPE html>

<html lang="en-US">

<head>

<title>href Attribute Example</title>
</head>

<body>

<a href="https://resultuniversity.com">Visit Result University</a>

</body>

</html>

Try on Editor

In the example above, when we click, 'Visit Result University', a new web page (HTML document) opens.

Read Chapter: HTML Links for detailed discussion.

The src Attribute

The src attribute contains the location (URL) of the external resource.

When the src attribute is specified in the <img> tag, the browser loads the image from the URL and embeds it in the document.

Code

Example

<!DOCTYPE html>

<html lang="en-US">

<head>

<title>src Attribute Example</title>
</head>

<body>

<h1>Image with src Attribute</h1>

<p>Location of the image is specified in src attribute.</p>

<img src="garden.jpg" width="300" height="300">

</body>

</html>

Try on Editor

The value of the src i.e. the URL can be specified in two ways:

1. Absolute URL:
An absolute URL is a full URL that specifies the complete address of the resource location.

For ëxample:
src="https://resultuniversity.com/html/aloevera.jpg"

So an absolute URL contains the name of the protocol (HTTP/HTTPS), domain (resultuniversity.com) and path (/html/aloevera.jpg).

If an image is hosted on another website, we will provide an absolute URL in the value of the src.

2. Relative URL:
If the resource (URL) is located within the website, we can provide only the path as the value in the src attribute. Such value is termed relative URL.

For example:
src="aloevera.jpg"

Note:
If a relative URL starts with a slash, it is relative to the domain.

If a relative URL starts without a slash, it is relative to the current page.

The alt Attribute

The alt attribute as the name suggests provides an alternate text to the image.

If the image loads properly, the value provided in the alt attribute i.e. the text is kept hidden from the visible screen. But for some reason, if the image fails to load properly the value of the alt attribute will be shown instead of the image.

Code

Example

<!DOCTYPE html>

<html lang="en-US">

<head>

<title>alt Attribute Example</title>
</head>

<body>

<h1>Image with alt Attributes</h1>

<p>Alt attribute is specified to "A Garden".</p>

<img src="garden.jpg" alt="A Garden" width="300" height="300">

</body>

</html>

Try on Editor

See what happens if the image fails to load. An image can fail to load due to various reasons like a slow internet connection, or a wrong URL specified.

Example

<!DOCTYPE html>

<html lang="en-US">

<head>

<title>alt Attribute Example</title>
</head>

<body>

<h1>Image with alt Attributes</h1>

<p>Alt attribute is specified to "A Garden". Image has failed to load.</p>

<img src="nopic.jpg" alt="A Garden" width="300" height="300">

</body>

</html>

Try on Editor

The Width and Height Attribute

Width and height attributes set the width and height of an element to a specific value.

Let's take an example of an image whose width is set to 300 pixels and whose height is set to 250 pixels.

Code

Example

<!DOCTYPE html>

<html lang="en-US">

<head>

<title>width height Attribute Example</title>
</head>

<body>

<h1>Image with width and height Attributes</h1>

<p>An image whose width is set to 300 pixels and whose height is set to 250 pixels.</p>

<img src="aloevera.jpg" alt="A Garden" width="300" height="250">

</body>

</html>

Try on Editor

Notes

As HTML is not a case-sensitive language, you are free to use uppercase letters for attributes name.

But W3C recommends the use of lowercase letters for attribute names.

In our HTML tutorial, we will use lowercase letters for attribute names.

Though HTML doesn't strictly ask for quotes around the values of the attributes, it is always a good practice to quote around the attribute's value to eliminate unexpected results.

Example

<!DOCTYPE html>

<html lang="en-US">

<head>

<title>Title attribute</title>
</head>

<body>

<h1>The title attribute with Space</h1>

<p>There is no quotation around the value of title attribute.</p>

<p title=Desktop Computer>Mouse over the text to see the tooltip.</p>

</body>

</html>

Try on Editor

The value of the title attribute contains space and hence the text of the tooltip is only 'Desktop'.

So if the value contains space, you must use quotes.

W3C also recommend having quotes around the values

Both single and double quotes around the attributes' value are allowed. But commonly double quotes are preferred. Single quotes are used when the value itself contains double quotes or vice versa.

Code

<p title="I'm John">Value of the title attribute contains single quote.</p>

<p title='"John"'>Value of the title attribute contains double quote.</p>

Example

<!DOCTYPE html>

<html lang="en-US">

<head>

<title>Title attribute</title>
</head>

<body>

<h1>The title Attribute with Single and Double Quotes</h1>

<p title="I'm John">Mouse over the text to see the tooltip. Value of the title attribute itself contains single quote.</p>

<p title='"John"'>Mouse over the text to see the tooltip. Value of the title attribute itself contains double quote.</p>

</body>

</html>