What is significance of declaring attribute in HTML elements ?

Last Updated : 02 Feb, 2022

In this article, we will know HTML Attributes’ significance while declaring and their implementation through the examples. All HTML elements have attributes that will provide additional information about that particular element. It takes 2 parameters, ie, a name & a value which define the properties of the element and are placed inside the element tag.

The name parameter takes the name of the property we would like to assign to the element and the value takes the properties value or extent of the property names that can be aligned over the element. Every name has some value that must be written within quotes.

Syntax:

<element attribute_name="attribute_value">

HTML src Attribute: If we want to insert an image into a webpage, then we need to use the <img> tag and the src attribute. We will need to specify the address of the image as the attribute’s value inside the double quote.

Example: This example explains the HTML src Attributes to specify the source address of the file.

HTML

<html> 
  
<head> 
    <title>src Attribute</title> 
</head> 
  
<body> 
    <img src= 
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/Geek_logi_-low_res.png"> 
</body> 
  
</html>

Output:

HTML alt Attribute: This is an alternate tag that is used to show or display something if the primary attribute i.e., the <img> tag, fails to display the value assigned to it. This can also be used to describe the image to a developer who is actually sitting at the coding end.

Example: This example explains the HTML alt Attributes to specify the name of the file when the image is not loaded properly.

HTML

<html> 
  
<head> 
    <title>alt Attribute</title> 
</head> 
  
<body> 
  
    <!--If the image is not found or the img field 
    is left blank the alt value gets displayed-->
    <img src
="https://media.geeksforgeeks.org/wp-content/cdn-uploads/Geek_logi_-low_res.png" 
         alt="The Logo"><br> 
    <img src="" alt="Since the src value is blank, the alt value is displayed"> 
</body> 
  
</html>

Output:

HTML width and height Attribute: This attribute is used to adjust the width and height of an image.

Example: This example explains the HTML width & height Attributes to specify the different sizes of the images.

HTML

<html> 
  
<head> 
    <title>Width and Height</title> 
</head> 
  
<body> 
    <img src= 
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/Geek_logi_-low_res.png" 
         width="300px" height="100px"> 
</body> 
  
</html>