 |
| (HTML Attributes) |
What Is HTML Attributes?
Attributes provide additional information about HTML elements. We discussed about HTML Elements in previous so check it out here.- All HTML elements can have attributes.
- Attributes provide additional information about an element.
- Attributes are always specified in the start tag.
- Attributes usually come in name and value pairs like: name="value"
Basic Attributes:
Below the list of frequently used attributes in all fields. In my next post i will publish all HTML Attributes with Example.
| Attribute | Description |
|---|---|
| alt | Specifies an alternative text for an image, when the image cannot be displayed |
| disabled | Specifies that an input element should be disabled |
| href | Specifies the URL (web address) for a link |
| id | Specifies a unique id for an element |
| src | Specifies the URL (web address) for an image |
| style | Specifies an inline CSS style for an element |
| title | Specifies extra information about an element (displayed as a tool tip) |
[info title="Example" icon="check-circle"]*// alt aad src attribute
<img src="logo.png" alt="sspradhan.com">
*// disabled attribute
<button type="button" disabled>Click Me!</button>
*// href attribute
<a href="https://www.sspradhan.com">This is a link</a>
*// id attribute
<h1 id="myHeader">Hello World!</h1>
<button onclick="displayResult()">Change text</button>
<script> function displayResult() { document.getElementById("myHeader").innerHTML = "Have a nice day!"; }
</script>
*// style attribute
<p style="color:red">I am a paragraph</p>
*// title attribute
<p title="I'm a tooltip"> This is a paragraph. </p>
[/info]
<img src="logo.png" alt="sspradhan.com">
*// disabled attribute
<button type="button" disabled>Click Me!</button>
*// href attribute
<a href="https://www.sspradhan.com">This is a link</a>
*// id attribute
<h1 id="myHeader">Hello World!</h1>
<button onclick="displayResult()">Change text</button>
<script> function displayResult() { document.getElementById("myHeader").innerHTML = "Have a nice day!"; }
</script>
*// style attribute
<p style="color:red">I am a paragraph</p>
*// title attribute
<p title="I'm a tooltip"> This is a paragraph. </p>
[/info]
Suggestions:
If you are serious at web development then you need to know some basic things how to use attributes. Below i am Explaining some suggestions how to use it.
Always Quote Attribute Values:
The HTML5 standard does not require quotes around attribute values.
The href attribute, demonstrated above, can be written without quotes.
[info title="Bad" icon="check-circle"]<a href=https://www.sspradhan.com>[/info]
[info title="Bad" icon="check-circle"]<a href="https://www.sspradhan.com">
OR
<a href='https://www.sspradhan.com'>[/info]
I always recommends quotes in HTML and it is necessary at some point and also in XHTML.
Always Use Lowercase Attributes:
As per HTML5 standard it doesn't require lowercase attributes you can use a title attribute like title or TITLE.But if you are serious in development then must use Lowercase Attributes for better understanding.
For any suggestions about this or anything else then just comment below and share and subscribe for more development tutorial.