HTML, the markup language for creating web pages, has a variety of attributes that provide functionalities and define different aspects of elements on a web page. Some unique or less commonly known attributes include:
1) contenteditable: This attribute makes the content of an element editable by the user. It can be applied to various HTML elements like <div>, <p>, or <span> to allow direct user input.
Example:
<div contenteditable="true">
This content can be edited by the user.
</div>
2) draggable: When set to true, this attribute allows an element to be draggable. It's often used in conjunction with JavaScript to create drag-and-drop functionalities.
Example:
<img src="image.jpg" draggable="true" alt="Drag me">
3) hidden: This attribute hides the element from being displayed. It's different from CSS display: none; as it completely removes the element from the document's layout flow.
Example:
<p hidden>This paragraph is hidden</p>
4) download: Used with <a> elements, it prompts the user to download the linked resource rather than navigating to it. When clicked, it initiates the download of the specified resource.
Example:
<a href="myfile.pdf" download>Download PDF</a>
5) spellcheck: This attribute, when included in an editable element, enables or disables spell checking for the content within that element.
Example:
<textarea spellcheck="true"></textarea>
6) sandbox: Primarily used with <iframe> elements, it restricts what the embedded content can do (such as preventing scripts, form submission, or same-origin restrictions) for added security.
Example:
<iframe src="https://example.in" sandbox="allow-scripts"></iframe>
7) loading: This attribute controls how the browser loads an external resource specified in elements like <img>, <iframe>, <script>, etc. It helps improve page performance by specifying lazy loading or eager loading of resources.
Example:
<img src="image.jpg" loading="lazy" alt="Lazy-loaded image">
8) defer: Used with the <script> element, the defer attribute ensures that the script will be executed after the document has been parsed.
Example:
<script defer src="myscript.js"></script>
9) async: Similar to defer, the async attribute is used with the <script> element, but it indicates that the script should be executed asynchronously.
Example:
<script async src="myscript.js"></script>
10) Translate: This attribute is used to specify whether the content of an element should be translated when the page is localized.
Example:
<p translate="no">This content should not be translated.</p>
While these attributes provide additional functionalities, it's essential to use them appropriately and consider browser compatibility and accessibility concerns when implementing them in web projects.
Hope you like it.
That’s it — thanks.
To read my other articles click here.
👋Hey there, Let’s connect on:
Linkdin: Margish Patel
Twitter: @margish96patel
Email: babariyamargish97@gmail.com
Top comments (1)
Nice List 👍