DEV Community

Cover image for Top 10 Unique HTML Attributes You Should Know About. πŸš€πŸ’‘πŸ’―
margishpatel
margishpatel

Posted on

Top 10 Unique HTML Attributes You Should Know About. πŸš€πŸ’‘πŸ’―

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>
Enter fullscreen mode Exit fullscreen mode

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">
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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">
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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)

Collapse
 
amustafa16421 profile image
Mustafa_A

Nice List πŸ‘