DEV Community

Cover image for Unique HTML Attributes You Should Know About
ishrat
ishrat

Posted on

Unique HTML Attributes You Should Know About

HTML (Hypertext Markup Language) has a variety of attributes that can be used to enhance the structure and functionality of web pages.

While there are many common attributes, here are some unique or less commonly known HTML attributes that you might find interesting:

contenteditable:

  • This attribute makes an element editable. Users can modify the content directly in the browser.

    <div contenteditable="true">
        This content can be edited.
    </div>
    

Contenteditable

spellcheck:

  • This attribute is used to enable or disable the spell-checking feature for an element.

    <textarea spellcheck="true">
        This textarea has spell-checking enabled.
    </textarea>
    

spellcheck

draggable:

  • This attribute makes an element draggable. It is often used in conjunction with JavaScript for drag-and-drop functionality.

    <img src="image.jpg" draggable="true" alt="Draggable Image">
    

sandbox:

  • Used with the <iframe> element, the sandbox attribute restricts what the embedded content can do, such as preventing it from executing scripts or submitting forms.

    <iframe src="sandboxed-page.html" sandbox="allow-same-origin allow-scripts"></iframe>
    

download:

  • This attribute is used with the <a> (anchor) element to specify that the target should be downloaded when a user clicks on the link.

    <a href="document.pdf" download="my-document">Download PDF</a>
    

hidden:

  • This attribute is used to hide elements on the page. It's a simple way to initially hide content that can be revealed later through CSS or JavaScript.

    <p hidden>This paragraph is initially hidden.</p>
    

defer:

  • Used with the <script> element, the defer attribute ensures that the script will be executed after the document has been parsed.

    <script defer src="myscript.js"></script>
    

async:

  • Similar to defer, the async attribute is used with the <script> element, but it indicates that the script should be executed asynchronously.

    <script async src="myscript.js"></script>
    

Accept Attribute:

  • You can use the accept attribute with the element (only for file type) to specify the types of files a server can accept.
<input type="file" accept=".jpg, .jpeg, .png">

Enter fullscreen mode Exit fullscreen mode

Translate:

  • This attribute is used to specify whether the content of an element should be translated when the page is localized.
    <p translate="no">This content should not be translated.</p>

Enter fullscreen mode Exit fullscreen mode

These attributes provide additional functionality and control over the behavior of HTML elements. Remember that some attributes may have browser compatibility considerations, so checking documentation and using them appropriately is essential.

Top comments (21)

Collapse
 
lico profile image
SeongKuk Han

Wow, spellcheck, draggable, and translate. I didn't know about these attributes. Thanks for the article.

Collapse
 
pinky057 profile image
ishrat

My pleasure :)

Collapse
 
best_codes profile image
Best Codes

I didn't know about translate. Very cool!

Collapse
 
pinky057 profile image
ishrat

My pleasure :)

Collapse
 
tqbit profile image
tq-bit

How come I had no idea there's a 'hidden' attribute??

Collapse
 
pinky057 profile image
ishrat

I also got to know them a few weeks ago!🤷‍♀️

Collapse
 
sufian profile image
Sufian mustafa • Edited

Thank you for writing, I really appreciate it!

btw the pic on the top of your blog is my wallpaper🤭

Collapse
 
pinky057 profile image
ishrat

Glad to hear that!😌
I love this kind of wallpaper !

Collapse
 
chukwuma1976 profile image
Chukwuma Anyadike

These are good to know.

Collapse
 
pinky057 profile image
ishrat

My pleasure :)

Collapse
 
long123 profile image
Long

á

Collapse
 
elanatframework profile image
elanatframework

Thank you for nice article.

Collapse
 
pinky057 profile image
ishrat

My pleasure :)

Collapse
 
dannickbedard profile image
Dannick Bedard

Thanks for sharing!

Collapse
 
pinky057 profile image
ishrat

My pleasure :)

Collapse
 
vivek09thakur profile image
Vivek Thakur

Literally I am gonna use them in my projects thanks 👍

Collapse
 
pinky057 profile image
ishrat

Glad to hear that!

Collapse
 
glntn101 profile image
Luke

Thanks for share, good article!

Collapse
 
pinky057 profile image
ishrat

My pleasure :)

Collapse
 
madsstoumann profile image
Mads Stoumann

contenteditable can also be set to plaintext-only, if you want editable content without rich-text formatting.