HTML Attributes

In this Tutorial, you will learn about HTML Attributes

HTML attributes are used to provide additional information about HTML elements, such as their values, styles, and behavior. They are added to the opening tag of an element and take the form of name-value pairs.

Here’s an example of an HTML element with an attribute:

<img src="image.jpg" alt="A beautiful landscape">

In this example, the <img> element is used to display an image, and it has two attributes: src and alt. The src attribute is used to specify the source URL of the image, and the alt attribute is used to provide a text description of the image for accessibility purposes.

  1. Element-Specific Attributes: Some attributes are specific to certain elements, and can only be used with those elements. For example, the src attribute is only used with the <img> element, and the href attribute is only used with the <a> element.
  2. Global Attributes: Some attributes are considered global, as they can be used with any element. Some examples are id, class, title, style
  3. Event Attributes: Some attributes are used to add behavior to elements, such as responding to user interactions. These attributes are called event attributes and they are used in JavaScript. Some examples are onclick, onmouseover, onload.

Here’s an example of an HTML element with an id attribute and a class attribute:

<p id="myId" class="myClass">This is a paragraph of text.</p>

In this example, the <p> element has two attributes: id and class. The id attribute is used to give the element a unique identifier, and the class attribute is used to group elements together for styling purposes.

Here is an example of an HTML element with a style attribute:

<h1 style="color: blue;">Welcome to My Web Page</h1>

In this example, the <h1> element has a style attribute, which is used to add inline CSS styles to the element. The value of the style attribute is a CSS declaration, which sets the color property to blue.

That’s a basic tutorial on HTML attributes. There are many other attributes that you can use to enhance your HTML elements, and as you continue to learn web development, you’ll discover more ways to use attributes to create dynamic and engaging web pages.

Scroll to Top