HTML Attributes are used to provide additional information about an HTML element, such as its properties or behavior. They are added to the opening tag of an element and consist of a name and a value, separated by an equals sign (=).
Key features of HTML Attributes
- Attributes are additional values that add meaning or adjust their behavior of elements.
- Every element or tag can have attributes.
- They always come in pairs (atribute_name=“value”).
- The attribute’s names are case-insensitive but W3C recommends lowercase attributes in HTML.
- Attributes should always be used with the start tag.
- We can add multiple attributes in one HTML element.
Let’s take a look at all the important attributes in HTML:
1. href Attribute
We use the <a> tag to define a hyperlink. In the <a> tag, the href attribute specifies the URL of the page the link goes to. The href attribute consists of two components: the URL (actual link) and the anchor text or clickable text that appears on the page.
Example:
<!DOCTYPE html>
<html>
<head></head>
<body>
<a href="https://fullstackadda.com//">Click the link</a>
</body>
</html>
Output:
After clicking the link
2. src Attribute
We use the <img> tag add an image in an HTML page. The src attribute specifies the image path. We can specify the address of the image inside the double quotes.
Example:
<img src="img_htmlmain.jpg">We can specify the URL in the src attribute in the following two ways:
1. Absolute URL: Path of an external image that is hosted on another website.
2. Relative URL: Path of the image that is hosted within the website. We don’t need to include the domain name in this.
3. Width and Height Attributes
The <img> tag also contains the width and height attributes. As the name suggests, these attributes specify the width and height of the image in pixels).
Example:
<img src="img_htmlmain.jpg" width="500" height="200">
4. alt Attribute
The alt attribute is used with the image <img> tag. It helps us to specify the alternative text in case, the image cannot be displayed on the website. The alt attribute should reflect the image content so that users can understand what the image contains.
Example:
<img src="img_htmlmain.jpg" alt="html full image">5. Title Attribute HTML Attributes
The title attribute specifies extra information about the element. It supports all HTML elements and displays the information when the mouse moves over the element (link or any text).
Example:
<p title="This is paragraph tag">Example of title attribute</p>
Some Attributes
| Attribute | Options | Function |
|---|---|---|
| alt | <area>, <img>,<input> | Specifies an alternate text when the original element fails to display |
| valign | top, middle, bottom | Vertically aligns tags within an HTML element. |
| bgcolor | numeric, hexidecimal, RGB values | Places a background color behind an element |
| background | URL | Places a background image behind an element |
| id | User Defined | Names an element for use with Cascading Style Sheets. |
| class | User Defined | Classifies an element for use with Cascading Style Sheets. |
| width | Numeric Value | Specifies the width of tables, images, or table cells. |
| height | Numeric Value | Specifies the height of tables, images, or table cells. |
| title | User Defined | “Pop-up” title of the elements. |
- HTML attributes are used to provide additional information about an HTML element, such as its properties or behavior.
- Attributes should always be used with the start tag. HTML Attributes HTML Attributes HTML Attributes