HTML Attributes Explained with Examples
HTML attributes provide additional information about HTML elements. They are used to modify the behavior or appearance of an element. Attributes are specified within the opening tag of an element and consist of a name and a value, separated by an equals sign. Common attributes include “class” for defining CSS styles, “id” for uniquely identifying an element, and “src” for specifying the source of an image or media file.
HTML attributes give additional information about the HTML elements and are always specified in the start tag. In our previous blog on HTML tags, we learned about different tags, such as paragraph tag <p> and image tag <img>, in their simplest form. Now we will explore some of the HTML tags that can have attributes to give extra information. This article will get you started with HTML attributes, covering the different attributes and how they work with the help of examples.
Must read: What is HTML?
Explore Top HTML Interview Questions and Answers
Table of Contents
Check Out Popular HTML Courses
Best-suited HTML & CSS courses for you
Learn HTML & CSS with these high-rated online courses
What are HTML Attributes?
HTML attributes are the modifier of the HTML elements or tags. Simply put, attributes are special words that provide additional information about the elements or attributes.
Syntax:
<tag attribute_name="attribute_value">Some content...</tag>
Key features of HTML Attributes
- Attributes are additional values that add meaning or adjust the behaviour of elements.
- Every element or tag can have attributes.
- They always come in pairs (atribute_name=“value”).
- The attribute’s names are case-insensitive, but W3C recommends lowercase attributes in HTML.
- Attributes should always be used with the start tag.
- We can add multiple attributes in one HTML element.
Also Read: Top HTML Interview Questions and Answers
Let’s take a look at all the important attributes in HTML:
1. href Attribute
We use the <a> tag to define a hyperlink. In the <a> tag, the href attribute specifies the URL of the page the link goes to. The href attribute consists of two components: the URL (actual link) and the anchor text or clickable text on the page.
Example:
<a href="https://www.shiksha.com/online-courses/">Click to visit Shiksha Online</a>
2. src Attribute
We use the <img> tag add an image in an HTML page. The src attribute specifies the image path. We can specify the address of the image inside the double quotes.
Example:
<img src="img_tulip.jpg">
We can specify the URL in the src attribute in the following two ways:
1. Absolute URL: Path of an external image hosted on another website.
2. Relative URL: Path of the image hosted within the website. We don’t need to include the domain name in this.
3. Width and Height Attributes
The <img> tag also contains the width and height attributes. As the name suggests, these attributes specify the width and height of the image in pixels).
Example:
<img src="img_tulip.jpg" width="500" height="200">
4. alt Attribute
The alt attribute is used with the image <img> tag. It helps us to specify the alternative text in case, the image cannot be displayed on the website. The alt attribute should reflect the image content so that users can understand what the image contains.
Example:
<img src="img_tulip.jpg" alt="Red Tulips in a Garden">
5. style Attribute
The style attribute helps us set the style, such as font, size, colour, etc., of the HTML element.
Example:
<p style=" background:lightblue; color:navy;">Style attribute in HTML.</p>
6. lang Attribute
The lang attribute specifies the language used in an HTML document to assist search engines and browsers. This attribute is always used inside the <html> tag.
Here is an example to specify English as the language:
<!DOCTYPE html><html lang="en"><body>Content Goes Here</body></html>
We can also use the country codes to the language code. The first two characters specify the language of the web page while the last two characters specify the country.
Here is an example that specifies English as the language and Australia as the country:
<!DOCTYPE html><html lang="en-AU"><body>Content Goes Here.</body></html>
Also Read: Difference Between HTML and XML
7. Title Attribute
The title attribute specifies extra information about the element. It supports all HTML elements and displays the information when the mouse moves over the element (link or any text).
Syntax:
<element title = "text">
Example using paragraph tag:
<p title="This is paragraph tag">Example of title attribute</p>
Conclusion
This wraps up the basics of HTML attributes. We learned about the different attributes in HTML and why they are used. We explored some general-purpose attributes that apply to most HTML elements and also looked at some element-specific attributes you may encounter while creating an HTML document. So now you are clear on this concept and how it works!
FAQs
What are HTML attributes?
HTML attributes are additional properties that can be added to HTML elements to provide extra information or modify their behavior.
How are attributes specified in HTML?
Attributes are specified within the opening tag of an HTML element. They consist of a name-value pair separated by an equals sign, such as .
Can an element have multiple attributes?
Yes, an element can have multiple attributes. Each attribute is separated by a space within the opening tag of the element.
Are attributes case-sensitive in HTML?
No, attributes in HTML are generally not case-sensitive. However, it is good practice to use lowercase letters for attributes to ensure compatibility across different browsers.
This is a collection of insightful articles from domain experts in the fields of Cloud Computing, DevOps, AWS, Data Science, Machine Learning, AI, and Natural Language Processing. The range of topics caters to upski... Read Full Bio
Top Picks & New Arrivals
