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.
- 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 thehref
attribute is only used with the<a>
element. - Global Attributes: Some attributes are considered global, as they can be used with any element. Some examples are
id
,class
,title
,style
- 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.