What is an HTML Attribute?
- HTML attributes provide additional information about HTML elements.
- Attributes are always specified in the
start tag
- Attributes usually come in name/value
pairs like name="value"
- Name: Specifies the
property for that element.
- Value: Sets the value of that
property for the element.
<html lang="en">
ID Attribute
- The ID attribute is used to assign a unique identifier to an HTML element.
- Each element with an ID has its own unique identity,
- Multiple elements cannot have the same ID.
Example
Class Attribute
- The class attribute can be used with all HTML elements.
- multiple elements can share the same class.
<style>
.box {
background:
skyblue;
font-family: sans-serif;
padding: 10px;
}
.bar {
border: 1px solid black
}
</style>
<p class="box bar">Setting 'box' and 'bar' class to the element.</p>
Title Attribute
- The title attribute provides additional information about an element
- and is often displayed as a tooltip when the mouse hovers over it.
Example:
Style Attribute
- The style attribute in HTML is used to define inline css in our element.
- It is used in conjunction with CSS properties to directly style individual elements within the HTML code.
<body style="background:steelblue;">
<h2 style="font-size: 40px;">Heading of the page</h2>
<p style="color:yellow">This is a paragraph.</p>
</body>
Other useful HTML attributes
href Attribute
- The href attribute is used to link to another page or another web address. It is used in a tag
<a href="https://devjunctionpoint.blogspot.com/"> Home </a>
src Attribute
- src attribute is used to define file location. It accepts the URL of the resource. It is used with <img> , <iframe>, <audio>, <video>, etc.
<img src="../images/E3CCA633-C689-4DD9-8B20-79E7C5A88487.jpg"
alt="Clickable World Map"/>
alt Attribute
- The alt attribute is added as an alternate text in a <img> tag. It holds a description of the image.
HTML Attribute List
| Attribute | Used in | Description |
|---|---|---|
| alt | <img> | Description of the image |
| src | <img> | URL of the image |
| width | <img> | Width of the image |
| height | <img> | Height of the image |
| href | <a> | URL of the link |
| target | <a> | Target of the link |
| rel | <a> | Relation of the link |
| lang | html | Language of the text |
| style | Almost all elements | Style of the element |
| class | Almost all elements | Class of the element |
| id | Almost all elements | Id of the element |
| title | Almost all elements | Title of the element |
| dir | Almost all elements | Direction of the text |
| colspan | <td> | Number of columns to span |
| rowspan | <td> | Number of rows to span |
| for | <label> | For which element the label is |
| placeholder | <input> | Placeholder of the input |
| autofocus | <input> | Focus the input |
| required | <input> | Input is required |
| checked | <input> | Input is checked |
| disabled | <input> | Input is disabled |
| readonly | <input> | Input is readonly |
| max | <input> | Maximum value of the input |
| min | <input> | Minimum value of the input |
| action | <form> | Action of the form |
| method | <form> | Method of the form |
Do leave your comments