Hello everyone, this is Md Taqui Imam here!
✨13 HTML Attributes every developer must know about.
I'm excited to share some really useful HTML attributes that I think will improve your web devlopment skills. And
HTML provides many handy attributes that can enhance your web pages without writing any additional code. In this post, I'll go over 13 attributes that are super helpful to know.
Let's get started! These basics will serve you well in all your HTML projects. 👇
1. Multiple Attribute 👨👨👦👦
<input type="file" multiple />
<select multiple >
<option value="Mango">Mango</option>
<option value="Banana">Banana</option>
<option value="Apple">Apple</option>
<option value="Lemon">Lemon</option>
</select>
multiple attribute with <input/> and <select> elements allow users to select/enter multiple values at once.
2. Spellcheck Attribute 🥓
<input type="text" spellcheck="false" />
Spellcheck attribute is very useful attribute when you want to disable spell checking and not want red underline in text in your <input/>, content-editable or <textarea/>.
3. Title Attribute ✒
<a href="document.pdf" title="Click To Download"> Download Pdf </a>
Title Attribute is used like a Tooltip to provide additional information about an element which is displayed when you hover the element.
4. Poster Attribute 🖼
<video controls poster="thumbnail.png" width="1000">
<source src="video.mp4" type="video/mp4" />
</video>
Poster Attribute is used with the video element to display an image like "thumbnail on youtube video" until user play the video.
5. Srcset Attribute ⚙
<img src="image.png" srcset="image.jpg, image-2x.jpg, image-3x.jpg" />
Srcset attribute is used with <img/> and <source/> element to provide a list of image sources.
6. Autocomplete Attribute 💀
<input type="text" name="fullname" autocomplete="on" />
autocomplete attribute is used with <form>, <input> and <textarea> element to control enable and control the autocomplete feature .
7. Accept Attribute ✔
<input type="file" accept=".jpg, .jpeg, .png" />
accept attribute is used with <input/> element with (file type only) to specify the file type should be accepted.
8. loading Attribute ⏳
<img src="image.png" loading="lazy" />
loading attribute is used with the img element to control how the browser loads the image. It has different options like ["eager", "auto", "lazy"].
9. Readonly Attribute 📖
<input type="text" value="This is for read only" readonly />
readonly Attribute is used with <input/> element to specify that element is only for read not editable.
10. Download Attribute ⬇
<a href="resume.pdf" download="resume.pdf" > Download Resume </a>
download attribute is used with <a> element to specify that the link resource is to download file not to navigate page .
11. Hidden Attribute 👓
<div hidden >This is hidden content .</div>
hidden attribute is for hidding element on the web page. This is one of the very useful attribute for controlling visibility through *Javascript and CSS *.
12. Contenteditable Attribute 📝
<div contenteditable="true">Click Here to edit this Content .</div>
contenteditable attribute is used to make a content editable. It allows users to modify the content within the element.
13. Alt Attribute ⭐
<img src="image.png" alt="A Man image" />
alt attribute is used with <img/> element to specify alternate text that should be shown in place of image in case when image can't be loaded or displayed .
End 👋
Thanks for learning with me today! Feel free to share any other questions you have. I'll do my best to explain clearly. Wishing you the best as you work on your next web project. Until next time!
Don't forget to Drop "🦄🔥💖" and Share it .
Top comments (1)
Learned a lot from the article