DEV Community

Kaja Uvais
Kaja Uvais

Posted on

1

10 Rare HTML Attributes You Should Know About

HTML is full of hidden gems that many developers often look past. These rare html attributes can improve your web development process, enhance performance, and make interactivity of your projects quite unique.

Attributes in HTML provide additional information about the elements of HTML.

1. Hidden

The hidden attribute is used to hide the element on the web page without removing it from the DOM. you can use this attribute with all HTML elements.

<p hidden>This text is hidden.</p>
Enter fullscreen mode Exit fullscreen mode

2. Contenteditable

The contenteditable attribute is used to specify whether the element’s content is editable or not. It allows users to modify the content within the element.

 <div contenteditable="true">You can edit this text!</div>
Enter fullscreen mode Exit fullscreen mode

3. Spellcheck

You can apply the spellcheck attribute to elements (except for passwords), content-editable elements, and element to enable or disable spell checking by the browser.

<textarea spellcheck="false">No spell check here!</textarea>
Enter fullscreen mode Exit fullscreen mode

4. Title

The title attribute is used to provide additional information about an element. when the user hover over the element the information is display it acts like a tooltip.

<a href="document.pdf" title="Click to download">DownloadFile</a>
Enter fullscreen mode Exit fullscreen mode

5. Accept

you can use accept attribute with the element, only for the file type, to specify which types of files a server accepts.

<input type="file" accept=".jpg, .jpeg, .png">
Enter fullscreen mode Exit fullscreen mode

6. Autocomplete

You can control the autocomplete feature of a browser through using the autocomplete attribute with elements like form, input, and textarea.

<input type="text" name="name" autocomplete="on" />
Enter fullscreen mode Exit fullscreen mode

7. Inputmode

The inputmode attributes provides a hint about the type of data that will be entered into a text input.

<input type="text" inputmode="numeric" placeholder="Phone numbers">
Enter fullscreen mode Exit fullscreen mode

8. Download

The download attribute in HTML allows you to specify that a file should be downloaded when a user clicks on a link.
The download attribute is used in a (anchor) tags. You can specify the name for the downloaded file and tell the browser that the target resource should be downloaded instead of navigating to it.

<a href="document.pdf" download="document.pdf">Download PDF</a>
Enter fullscreen mode Exit fullscreen mode

9. Poster

The poster attribute is used in video element to display an image until the user plays the video.

<video controls poster="image.png" width="500">
    <source src="video.mp4" type="video/mp4" />
</video>
Enter fullscreen mode Exit fullscreen mode

10. Srcset

The srcset attribute in HTML is a powerful tool used with the tag to provide multiple image sources for different screen resolutions or device types. It helps the browser to select different images for different screen sizes.

<img src="image.jpg" srcset="image.jpg, image-2x.jpg, image-3x.jpg">
Enter fullscreen mode Exit fullscreen mode

That’s all for today.

Thanks for reading.

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay