HTML Attribute

All HTML elements can have attributes
HTML attributes provide additional information about the elements or attributes and that is the modifier of the HTML element.
Each and every element or tag can have attributes, which define the behavior of that element.
An attribute should always be applied with its name and value pair.
Attributes name and values are case sensitive, and it is recommended by W3C (world wide web) that it should be written in Lowercase only.
Add multiple attributes in one HTML element, but it needs to give space between two attributes.

Syntax:

<element attribute_name="value">content</element>

Example:

<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <h1> This is Style attribute</h1>
 <p style="height: 50px; color: blue">add style property in element</p>
<p style="color: red">change the color of content</p>
</body>
</html>

OUTPUT:

HTML Attribute

Explanation of above example:

<p style="height: 50px; color: blue"> add style property in element</p>

We have used paragraph tags in which we have applied style attributes. An attribute is used for applying CSS property on any HTML element. It provides a height to paragraph element of 50px and turns its color to blue.

The title attribute in HTML:

The title attribute is used as a text tooltip in most browsers. It displays its text when the user moves the cursor over a link or text and you can use it with text or link to show the description of that link or text

Example:

<!DOCTYPE html>
<html>
 <head>
</head>
<body>

 <h1 title="This is heading tag">Example of title attribute</h1>
 <p title="This is paragraph tag">Move the cursor over the heading </p>

</body>
</html>

OUTPUT:

The href attribute in HTML:

The href attribute is the main attribute of <a> anchor tag, it defines a hyperlink. The href attribute provides the URL of the page the link goes to.

Example:

<!DOCTYPE html>
<html>
 <head>
</head>
<body>
 <h1> href attribute</h1>
 <p>Below is the link of anchor tag,</p>
 <a href="https://www.i2tutorials.com/">This is a link</a>
</body>
</html>

OUTPUT:

Without link address:

<a href="">This is a link</a>

The src Attribute:

The img tag is used to embed an image in an HTML page and the src(source ) attribute specifies the path to the image to be displayed.

Example:

<!DOCTYPE html> 
<html> 
 <head> 
</head> 
<body>   
 <h1>Example of src attribute</h1> 
 <img src="https://static.javatpoint.com/htmlpages/images/whitepeacock.jpg" height="400" width="600">     
</body> 
</html>

OUTPUT:

Note: The above example also contains the height and width attributes, which define the height and width of the image on the web page.

Single or Double Quotes?:

You can seen that we have used attribute with double quotes, but some people might use single quotes in HTML attribute. So the use of single quotes with HTML attributes is also allowed.

Example:

<!DOCTYPE html>
<html>
<body>
<h2>Single or Double Quotes?</h2>
<p title='ab "CD" Ef'> with double quotes</p>
<p title="AB 'cd' eF"> with single quotes</p>
</body>
</html>

OUTPUT:

The alt Attribute:

The alt attribute for the IMG tag provides an alternate text for an image if the image for some reason cannot be displayed. This can be a slow connection, or an error in the src(source) attribute, or if the user uses a screen reader.

Example:

<!DOCTYPE html>
<html>
<body>
<h2>The alt Attribute</h2>
<img src="img_girl.jpg" alt="Girl with a jacket" width="500" height="400">
</body>
</html>

OUTPUT: