HTML – Attributes

HTML Attributes provides additional information about the Tag/Element. Attributes are placed inside starting tags and can help in changing or modifying the behavior of that tag. Attributes contain name, id, class, href link, source, value, and other properties to make any tag more useful.

Example
<a attribute_1="attribute_value" attribute_2="attribute_value" attribute_3="attribute_value">......</a>

The attribute_1, attribute_2, attribute_3 will be replaced by the names of the attributes, and attribute_value will be replaced by the actual values of these attributes.

Important points about attributes

The Attributes are the necessary and additional properties of a tag.

These attributes provide additional support to that tag and provide more information about that tag.

They can be used with both paired and unpaired tags, and they always placed inside the starting tag of paired tags.

We can use more than one attribute at the same time inside an element.

Global Attributes

The global attributes define the basic and common properties of an element. These global attributes used for making classes-group of elements, also identify a single element with a unique id, applying inline styling to that element, and using the title attribute to give a tag title.

Class Attribute

The class attribute is used inside Html tags and it helps in making groups of tags through which the style properties can be applied to all tags of the same class. It can be used multiple times for the same tags and more than one class can be used inside a single tag. It helps in styling the document and used as a selector in both CSS and JavaScript as well as in Bootstrap.

Example - Class Attributes

    <div class="box">

        <div class="card">This is an Example of Using class attributes</div>


    </div>

    <div class="box">

        <div class="card">This is an Example of Using class attributes</div>
    </div>

 <div class="class1 class2 class3 calss4">This is an Example of Multiple classes in a single class attribute</div>

 <table class="table table-responsive table-bordered">This is an Example of Multiple classes in a single class attribute</table>

Here the “box” class inside the div tags will help in customizing the properties of these tags, whereas the “card” class will help in customizing the inner div tags.

Id Attribute

The Id attribute is used the same as a class but it is more often used as a unique identifier. It is used to assign a unique id to an element and it also works as a selector for CSS, and JavaScript. One tag can have only one id attribute value whereas multiple classes can be used as values inside a single class attribute.

Example - Id Attribute

    <div id="box">

        <div id="card">This is an Example of Using id attributes</div>


    </div>

    <div id="box2">

        <div id="card">This is an Example of Using id attributes</div>
    </div>

The above example of the class attribute is used here for id attribute. Where the “box” and “box2” are the two different unique values of the div tag. There are two ids of “card“, both are placed under “box” and “box2” ids in div tags, if you apply any style or script to the card id, then it will apply the style or script on all the id cards which are used in the same web page.

Title Attribute

The title attribute tag is used to provide a title description to any element.

Example - Title Attribute

<div>Div tag without title attribute</div>


<div title="My Mix India Html Tutorials">This is an Example of Using Title attribute</div>

The first div tag is used without title attribute and the second div tag is used with the title attribute, hence it will show the title description on mouseover.

Style Attribute

A style attribute is a form of inline CSS which is used for styling the web pages or web documents. It can also be used as an attribute and it helps in styling the content which is placed inside the element blocks and the styling properties only applied to that element.

Example - Style Attribute

<div style="padding:5px;background-color:blueviolet;color:#fff;border:2px solid #ddd;">

    This is an example of the Style Attribute.

</div>

Here style attribute is used inside a div tag. The style attribute provides the customize styling to the div block.

Other Attributes

There are serval other attributes that are used in Html. Besides global attributes the other attributes only used in specific tags. Like alt = alternat, src = source, width = width of element, height = height of the element, href = URL, etc.

Alt Example

It is used to define alternate text.

Alt - Attribute

<img src="image_source.jpg" alt="This is an image">

Src Example

It is used to provide file source.

Src - Attribute

<img src="image_source.jpg">

Width & Height Attribute

These are used to provide width and height to the element.

Width and Height Attribute

<img src="image_source.jpg" width="100px" height="100px" alt="This is an image">

Href Attribute

It is used for defining the URL of any source. It is used mostly in the anchor tag to link with other pages, jump on a specific section, Link of a file, etc. With the target attribute, it specifies the action after the click on the link like- _blank for a new tab/window,_self for the same frame, _parent for the parent frame, and _top for the full window of the body.

Href - Attribute

<a href="mymixindia.com" target="_blank">Go To My Mix India</a>