HTML Attributes Explained with Examples

HTML Attributes Explained with Examples

4 mins read17.4K Views Comment
clickHere
Updated on Oct 29, 2023 01:33 IST

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.

2022_03_What-is-48.jpg

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

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>
Copy code

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>
Copy code
2023_10_Screenshot-2023-10-29-012306-1.jpg
Difference Between HTML and CSS
Difference Between HTML and CSS
In this article, we will discuss what is html, what is CSS and the difference between them with the help of example. Later in the article we will also discuss...read more
How to add background image in HTML?
How to add background image in HTML?
Images can make a page look more appealing and captivating. One of such ways for making the page more attractive is adding background image to it. You can add backgrond...read more
HTML Lists: Ordered and Unordered Lists Explained with Examples
HTML Lists: Ordered and Unordered Lists Explained with Examples
This tutorial explains how to create different types of lists: unordered, ordered, and description lists in HTML. In this blog, you will learn what are HTML lists and understand how...read more

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">
Copy code
2022_03_src-attribute.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">
Copy code
2022_03_width-and-height-in-HTML.jpg

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">
Copy code
2022_03_Alt-in-HTML.jpg

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>
Copy code
2023_10_Screenshot-2023-10-29-012624.jpg
Difference Between HTML4 and HTML5
Difference Between HTML4 and HTML5
HTML is the base language that makes up most of the web pages and online applications. Like other programming languages, HTML has been updated several times over years. HTML5 is...read more
10 Best HTML Editors for 2024
10 Best HTML Editors for 2024
Have you ever wondered which HTML editor best suits your coding needs in 2024? Choosing the right tool is crucial in the ever-evolving landscape of web development. Let us read...read more
Creating HTML Links – Tutorial With Examples

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>
Copy code

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>
Copy code

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">
Copy code

Example using paragraph tag:

 
<p title="This is paragraph tag">Example of title attribute</p>
Copy code
2022_03_Title-Attribute.jpg

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.

About the Author

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

Comments