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>
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>
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>
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>
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">
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" />
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">
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>
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>
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">
That’s all for today.
Thanks for reading.
Top comments (0)