Understanding the Attributes in HTML

An HTML consists of basic 3 parts: Opening tag, content and closing tag.


An attribute gives additional information about the HTML element and it will specify only in the opening tag of the HTML.

    <opening_tag name="value">Content</closing_tag>

Where the name defines the name of the attribute and value defines the value of the attribute. That means attributes are created using name-value pairs.

    <tag_name id="test">Welcome to my test</tag_name>

Attributes can be used to provide additional information about a tag or provide various functionalities to the element of the HTML.

There are different types of attributes such as href Attribute, src Attribute, width and height Attributes, alt Attribute, style Attribute, lang Attribute, title Attribute, etc. 

The link attribute

  • The link address is specified in the link attribute.
  • Example: <a href="">This is a testing link</a>        

The src Attribute

  • The src attribute defines the file name of the image source.
  • Example: <img src="test.jpg">

The width and height Attributes

  • The width and height Attributes specifies the width and height size of the image
  • Example: <img src="img_girl.jpg" width="500" height="600">

The alt Attribute

  • The alt attribute is the altrenative text for an image if the image is not exist
  • Example: <img src="test.jpg" alt="This is an alternative text">

The style attribute

  • The style attribute is used for styling an element like size, font, color etc.

The lang Attribute

  • The language of the document will be declared in the HTML tag.
  • Example: <html lang="en-US">

The title attribute

  • The value of the title will be shown as a tooltip of that HTML element.
  • Example: <p title="This is a tooltip">This is an example of tool tip</p>    
  • In HTML,  and javascript there are two types of attributes- id and the class.