DEV Community

Cover image for 5 Powerful HTML Attributes That Don't Require JavaScript
Ashish Patel
Ashish Patel

Posted on • Updated on

5 Powerful HTML Attributes That Don't Require JavaScript

Certainly! Here's a refined version with code examples for each attribute:

  • 1. Spellcheck: This attribute ensures that the browser checks spelling within specific elements, such as input fields or text areas, without requiring JavaScript. It's particularly useful for forms or content where accuracy matters.
   <textarea spellcheck="true"></textarea>
Enter fullscreen mode Exit fullscreen mode
  • 2. Download: The download attribute allows users to download resources directly when clicking on a link. It's handy for providing downloadable content like images, documents, or media files without JavaScript.
   <a href="path/to/file.pdf" download>Download PDF</a>
Enter fullscreen mode Exit fullscreen mode
  • 3. Video Thumbnail (Poster): By using the poster attribute in the <video> element, you can specify an image to display as a placeholder before the video starts playing. This mimics the functionality of a video thumbnail, enhancing user experience.
   <video controls poster="path/to/thumbnail.jpg">
       <source src="path/to/video.mp4" type="video/mp4">
       Your browser does not support the video tag.
   </video>
Enter fullscreen mode Exit fullscreen mode
  • 4. Translate: Employing the translate attribute, you can specify whether an element's content should be translated when a webpage is translated into another language. Setting it to "no" preserves the original content, useful for brand names or specific terms.
   <h1 translate="no">Your Company Name</h1>
Enter fullscreen mode Exit fullscreen mode
  • 5. Autocomplete: The autocomplete attribute enables or disables autocomplete functionality for input fields, providing control over whether the browser should suggest previously entered values. This can enhance user convenience and streamline form submission.
   <input type="text" autocomplete="on">
Enter fullscreen mode Exit fullscreen mode

If you'd like to show your support for my work, you can buy me a coffee through the following link: Buy Me a Coffee. Your generosity helps fuel my creativity and allows me to continue sharing valuable content. Thank you for your support!

Sources:

Top comments (22)

Collapse
 
andyjessop profile image
Andy Jessop • Edited

Nice list! Also the Popover API is getting better support: developer.mozilla.org/en-US/docs/W... and can be used declaratively

<button popovertarget="mypopover">Toggle the popover</button>
<div id="mypopover" popover>Popover content</div>
Enter fullscreen mode Exit fullscreen mode
Collapse
 
sudouken profile image
Matthew

Web Dev Simplified released a video demoing that six months ago. Pretty cool.

Collapse
 
ashishxcode profile image
Ashish Patel

Yeah ❤️

Collapse
 
ashishxcode profile image
Ashish Patel

Interesting, Thanks for sharing 💪

Collapse
 
manoarya profile image
Manohar Anand

Amazing

Collapse
 
jackpwatson888 profile image
Jack Watson

What a great post!!! Thanks.

Collapse
 
fpaghar profile image
Fatemeh Paghar

Spellcheck: The example showcasing the spellcheck attribute in a textarea effectively demonstrates its utility for ensuring accurate spelling in user inputs without relying on JavaScript.

Autocomplete: The autocomplete attribute's role in controlling browser suggestions for input fields is effectively communicated through a clear example, emphasizing its potential to streamline user interactions.

Collapse
 
sharmi2020 profile image
Sharmila kannan

good work:)

Collapse
 
ashishxcode profile image
Ashish Patel

Thank You :)

Collapse
 
lunev profile image
Alexander

WYSIWYG editors can ignore or remove empty download attributes. So, it would help if you used the following syntax:
<a href="/images/myw3schoolsimage.jpg" download="w3logo">

Collapse
 
ashishxcode profile image
Ashish Patel

Thanks 👍

Collapse
 
sameech profile image
Samee Ch

I like it, and I will use it in my project

Collapse
 
ashishxcode profile image
Ashish Patel

Glad to Know that, Thank You :)

Collapse
 
officialphaqwasi profile image
Isaac Klutse

Good work, this is my first time knowing this attributes thanks and keep the good work.

Collapse
 
ashishxcode profile image
Ashish Patel

Glad to know that, I hope you use this in your day to day work. Thank You :)

Collapse
 
harshan68 profile image
Harshavardhan

Cool, Will try to use when the requirement comes across.
Nice post 👌

Collapse
 
pindelrio profile image
Pindelrio

Great! Finally a download option easy. Thanks

Collapse
 
dieghard profile image
Diego Markiewicz

Excelent! thanks