What is an Attribute in HTML?
HTML Attributes define additional properties or characteristics of the element such as height or width of an image. Attributes in HTML are always specified in the opening tag and usually consists of name/value pairs like name=”value”
The attribute in HTML values should always be enclosed in quotation marks.
HTML attribute provide additional HTML element details. i.e, HTML links are defined by a tag. The link/hyperlink address is specified in the “href” attribute. Note that attributes in HTML are always enclosed in quotes.
HTML attributes have a few key characteristics:
- HTML attributes provide additional information on HTML elements
- HTML Attributes are always specified in the beginning tag
- Attributes HTML are presented in name/value pairs such as name=value
Also, some attributes are required for certain elements. For instance, an <img> Src and alt attributes.
In the below example, src inside the <img> tag is an HTML attribute and image path provided is its value. Similarly href inside the <a> tag is an attribute and the link provided is its value, and so on.
<img src=“image.png“ width=“30“ height=“30“ alt=“Smiley“>
<a href=“https://www.google.com/“ title=“Search Engine“>Google</a>
<abbr title=“Hyper Text Markup Language“>HTML</abbr>
<input type=“text“ value=“Mark Alex“>
General HTML Attributes
There are some HTML attributes, such as:
title, id, class, style, etc. that you can use on the majority of HTML elements. The following section describes their usages.
1-The title Attribute
The title HTML attributes is used to provide an element or its content with advisory text. Check out the example below.
<abbr title=“Project Management Professional“>PMP</abbr>
<a href=“images/Ball.jpg“ title=“Click to view a larger image“>
<img src=“images/Balls-thumb.jpg“ alt=“Balls“>
</a>
2-The id HTML Attribute
The id attribute is used to give an element within a document a unique name or identifier. This makes it very easy to select the element using JavaScript or CSS.
<input type=“text“ id=“firstName“>
<div id=“container“>Read content</div>
<p id=“infoText”>This is the first paragraph.</p>
3-The class HTML Attribute
Like the Id attribute, elements are also identified with the class attribute. But unlike id, the class attribute doesn’t have to be unique in the document. This means you can apply the same class to multiple elements in a document, as shown in the below example:
<input type=“text“ class=“highlight“>
<div class=“box highlight“>Some content</div>
<p class=“highlight“>This is a paragraph.</p>
4-The style HTML Attributes
The style attribute allows you to specify CSS styling rules such as font, color, border, etc. directly within the element.
<p style=”color: red;“>This is the second paragraph.</p>
<img src=“images/car.jpg“ style=”width: 300px;“ alt=“yellow car“>
<div style=”border: 1px solid red;“>Some content</div>
See Also
How to create a web page in HTML
How to Link One Page to Another in HTML
