HTML attributes provide extra information about HTML elements.
- 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:
<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:
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):
<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.
<img src="img_girl.jpg" alt="Girl with a jacket">
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.
<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:
<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.
<a href="https://www.worldofitech.com/html/">Visit our HTML tutorial</a>
<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:
<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">
- 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
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.