HTML Attributes

HTML attributes provide extra information about HTML elements.

In this article, you will learn-

1 HTML Attributes
2 The href Attribute
3 The src Attribute
4 The width and height Attributes
5 The alt Attribute
6 The style Attribute
7 The lang Attribute
8 The title Attribute
9 We Suggest: Always Use Lowercase Attributes
10 We Suggest: Always Quote Attribute Values
11 Single or Double Quotes?
12 Chapter Summary

HTML attributes are special words that provide extra information about the elements or attributes are the modifier of the HTML element.
Each element or tag can have attributes, which characterize the behavior of that element.
Attributes ought to consistently be applied with the start tag.
The Attribute ought to consistently be applied with its name and value pair.
The Attribute name and values are case sensitive, and it is suggested by W3C that it ought to be written in Lowercase as it were.
You can add numerous attributes in one HTML element, but need to give space between two attributes.

• All HTML elements can have attributes

• Attributes provide extra information about elements

• Attributes are constantly indicated in the start tag

• Attributes generally come in name/value pairs like: name=”value”

The href Attribute

The <a> tag defines a hyperlink. The href attribute specifies the URL of the page the link goes to:

Example

<a href="https://www.worldofitech.com/">Visit worldofitech</a>

The src Attribute

The <img> tag is used to embed an image in an HTML page. The src attribute indicates the way to the picture to be displayed:

Example

<img src="img_girl.jpg">

There are two different ways to specify the URL in the src attribute:

Absolute URL Links to an outer image that is hosted on another site. Example: src=”https://www.worldofitech.com//images/img_girl.jpg”.

Notes: External images may be under copyright. In the event that you don’t get permission to use it, you might be in violation of copyright laws. What’s more, you can’t handle outside pictures; it can abruptly be removed or changed.

2. Relative URL – Links to a picture that is hosted inside the site. Here, the URL does not include the domain name. In the event that the URL starts without a slash, it will be comparative with the current page. Example: src=”img_girl.jpg”. On the off chance that the URL starts with a slash, it will be comparative with the domain. Example: src=”/pictures/img_girl.jpg”.

Tip: It is quite often best to use relative URLs. They won’t break in the event that you change domain.

The width and height Attributes

The <img> tag ought to likewise contain the width and height attributes, which indicates the width and height of the image (in pixels):

Example

<img src="img_girl.jpg" width="500" height="600">

The alt Attribute

The necessary alt attribute for the <img> tag indicates an alternate text for an image, if the picture for reasons unknown can’t be displayed. This can be because of a slow connection, or an error in the src attribute, or if the user uses a screen reader.

Example

<img src="img_girl.jpg" alt="Girl with a jacket">

Example

See what occurs on the off chance that we attempt to show an image that doesn’t exist:

<img src="img_typo.jpg" alt="Girl with a jacket">

The style Attribute

The style attribute is used to add styles to an element, like color, textual style, size, and more.

Example

<p style="color:red;">This is a red paragraph.</p>

The lang Attribute

You ought to consistently incorporate the lang attribute inside the <html> tag, to declare the language of the Web page. This is meant to help web crawlers and browsers.

The accompanying example determines English as the language:

<!DOCTYPE html>
<html lang="en">
<body>
...
</body>
</html>

Country codes can likewise be added to the language code in the lang attribute. Thus, the initial two characters characterize the language of the HTML page, and the last two characters characterize the country.

The accompanying example indicates English as the language and United States as the country:

<!DOCTYPE html>
<html lang="en-US">
<body>
...
</body>
</html>

The title Attribute

The title attribute characterizes some additional data about an element.

The worth of the title attribute will be displayed as a tooltip when you mouse over the element:

Example

<p title="I'm a tooltip">This is a paragraph.</p>

We Suggest: Always Use Lowercase Attributes

The HTML standard doesn’t need lowercase attribute names.

The title attribute (and any remaining attributes) can be written with uppercase or lowercase like title or TITLE.

Nonetheless, W3C suggests lowercase attributes in HTML and demands lowercase attributes for stricter document types like XHTML.

We Suggest: Always Quote Attribute Values

The HTML standard doesn’t need quotes around attribute values.

Notwithstanding, W3C suggests quotes in HTML, and demands quotes for stricter document types like XHTML.

Good:

<a href="https://www.worldofitech.com/html/">Visit our HTML tutorial</a>

Bad:

<a href=https://www.worldofitech.com/html/>Visit our HTML tutorial</a>

Here and there you need to use quotes. This example won’t display the title attribute accurately, on the grounds that it contains a space:

Example

<p title=About worldofitech>

Single or Double Quotes?

Double quotes around attribute values are the most widely recognized in HTML, however single quotes can likewise be used.

In certain circumstances, when the attribute worth itself contains double quotes, it is important to use single quotes:

<p title='Salman "ShotGun" Peshawar'>

Or then again the other way around:

<p title="Salman 'ShotGun' Peshawar">

Chapter Summary

All HTML elements can have attributes
The href attribute of <a> specifies the URL of the page the link goes to
The src attribute of <img> specifies the path to the image to be displayed
The width and height attributes of <img> provide size information for images
The alt attribute of <img> provides an alternate text for an image
The style attribute is used to add styles to an element, such as color, font, size, and more
The lang attribute of the <html> tag declares the language of the Web page
The title attribute defines some extra information about an element

Previous Tutorial

Next Tutorial

Thanks for reading! We hope you found this tutorial helpful and we would love to hear your feedback in the Comments section below. And show us what you’ve learned by sharing your photos and creative projects with us.