HTML attributes are the words you can place inside the HTML tags. It is the additional information added to the HTML opening tags and comes with the attribute name and its value pair like attribute_name = "value". It can be unique for many elements with its value.
Syntax
|
1 |
<tagname attribute_name="value">Enter your content here...</tagname> |
can also be used as single-quoted attribute values:
|
1 |
<tagname attribute_name='value'>Enter your content here...</tagname> |
Single Quoted or Double Quoted Attributes Values
The attribute value comes inside the double quotes(” “). However, you can also use the single quote(‘ ‘) to add the value of the attribute.
If you want to add single quotes inside the attribute value, you have to use the double quotes(” “) to write attribute values.
|
1 |
<input type="text" value="Welcome back 'Bill'"> |
Output
To add double quotes inside the attribute value, you have to use the double quotes(‘ ‘) to write attribute values.
|
1 |
<input type="text" value='Welcome back "Bill"'> |
Output
The href HTML Attributes in Anchor Tag
Let us takes an example of the HTML anchor tag containing the href attribute with URL as the value. Below is the example showing the attribute added inside the opening anchor tag.
|
1 |
<a href="https://tutorialdeep.com/html-anchor-tag/">HTML anchor tag</a> |
Output
The attribute href has a value as URL https://tutorialdeep.com/html-anchor-tag/ using the equals to(=) operator.
You can add the attribute to any HTML elements. The main thing you have to follow is the HTML tag related attributes. You can add only the matching attributes to the tag elements. For example, The above anchor tag attribute will not work with the action attribute of the HTML form tag.
Most Commonly Used HTML Attributes
Here is the list of most commonly Used attributes in HTML:-
classidtitlestyle
These attributes are the HTML global attributes and can be added to each and every HTML tags except <html>, <head>, <title>, <meta>, and other base elements.
Let’s start with describing the class attribute.
The class HTML Attributes
A class can be used to add the class to the element to select and apply style and script. The class is not a unique attribute and can be different or the same on a web page. You can also add multiple classes to the single element in HTML
|
1 |
<p class="mypara">The paragraph containing a class attribute.</p> |
Output
The paragraph containing a class attribute.
The above example contains the class attribute in the paragraph element.
The id HTML Attributes
A id attribute can be used to add the id to the HTML element. It can be useful to identify the element as its value should be unique on a web page. You cannot add the multiple ids to the same element.
|
1 |
<p id="para1">The paragraph containing id attribute.</p> |
Output
The paragraph containing id attribute.
The above paragraph element contains the unique id ‘para1’ to identify the element in HTML.
The title Attribute
A title attribute can be used to add the title to the HTML element. It can be useful to define the purpose of the element added to the web page. You can check the title of the element by mouse hovering over the element.
|
1 |
<p title="This is the paragraph to define the title.">The paragraph containing title attribute. Hover me to check the title.</p> |
Output
The paragraph containing title attribute. Hover me to check the title.
The example contains the title for the paragraph element. It can be a long string or anything you want to define for the required element.
The style Attribute
A style attribute can be used to apply CSS property(like color, font-size, border, etc) directly to the element.
|
1 |
<p style="color:red;">This is the paragraph.</p> |
Output
This is the paragraph.
See HTML global attributes for more common attributes in HTML.