HTML Attributes

In HTML, attributes provide addition information about HTML tags or elements.

  • Each tag can have attributes that define the behavior of the element.
  • Attributes provide additional information about tags.
  • It always specified in the start tag.
  • It is case sensitive and written in lowercase only (recommended by w3C).
  • It is always used with name/value like name="value".
  • Multiple attributes can be used with one HTML tag.
<tag attribute_name="value">content Here</tag>   

The href Attribute

The <a> tag is used to define a hyperlink. The href attribute tells us the URL of the page.

Example 1

Try Now


<!DOCTYPE html>
<html>
<head>
<title>Attributes example1</title>
</head>
<body>
<a href="https://www.agyanadda.com">Visit Agyanadda</a>
</body>
</html>

The style Attribute

The  <h1> tag is used to describe the headline. The style attribute specifies the CSS properties with their value.

Example

Try Now


<!DOCTYPE html>
<html>
<head>
<title>Attributes example 2</title>
</head>
<body>
<h1 style="color:red;"> Here "h1" is a tag and "style" is an attribute </h1>
</body>
</html>

In the given above example <h1> is tag and style is attribute and color is properties and red is properties value. 

The src Attribute

The <img> is HTML tag which is used to embed an image. The src attribute specifies the image path to be displayed.

Example 1

Try Now


<!DOCTYPE html>
<html>
<head>
<title>Attributes example </title>
</head>
<body>
<img src="smile.png">
</body>
</html>

The width and Height Attributes

The <img> tag also contains the width and height attributes. It specifies the width and height of the image in pixels.

Example 2

Try Now


<!DOCTYPE html>
<html>
<head>
<title>Attributes example 3</title>
</head>
<body>
<img src="smile.png" width="400" height="500">
</body>
</html>

html attribute ayanadda

The alt Attribute

The <img> tag also contains the alt attributes.  It is used to specify an alternate text for the image. If the image not found or the path invalid or due to the slow internet connection then the alt attribute works. You can easily identify it.

Example 2

Try Now


<!DOCTYPE html>
<html>
<head>
<title>Attributes alt example </title>
</head>
<body>
<img src="smile.png" width="200" height="200" alt="image found">
<img src="smile.JPEG" width="200" height="200" alt="image Not found">
</body>
</html>

The title Attribute

The <img> tag also contains title attribute. It is used to define some extra information about an element.  The value of the title attribute will be displayed as a tooltip when we mouse hover over the element.

Try Now


<!DOCTYPE html>
<html>
<head>
<title>Attributes title example</title>
</head>
<body>
<img src=smile.png"" title="I am a tooltip">
</body>
</html>

The lang Attribute

The lang attribute is used to declare the language of the web page. It is always include inside the <html> tag.  It assists search engines and browsers.

<!DOCTYPE html>
<html lang="en">
<body>
...
...
</body>
</html>

In the given above example, country codes can also be added. The first two characters define the language of the HTML page.

The following is given, a below example where English is specified as the language and the United States as the country.


<!DOCTYPE html>
<html lang="en-US">
<body>
...
...
</body>
</html>

Note:  we should use all attribute names in lowercase. It is W3C recommends.

Chapter Summary

  • All HTML tags can have attributes.
  • The href attribute of <a> specifies the URL of the page.
  • The style attribute of <h1> specifies the CSS formatting.
  • The src attribute of <img> specifies the path to the image.
  • The height and width attributes <img> specify the size information.
  • The alt attribute of <img> specifies an alternate text for an image.
  • The lang attribute of the <html> tag specifies the language of the web pages.
  • The title attribute specifies some extra information about an element.

Prev Next