DEV Community

Cover image for ✨13 HTML Attributes you must know about ✔
TAQUI ⭐
TAQUI ⭐

Posted on

✨13 HTML Attributes you must know about ✔

hey devs

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

Follow me in Github✅

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>
Enter fullscreen mode Exit fullscreen mode

multiple attribute with <input/> and <select> elements allow users to select/enter multiple values at once.

2. Spellcheck Attribute 🥓

<input type="text" spellcheck="false" />
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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" />
Enter fullscreen mode Exit fullscreen mode

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"  />
Enter fullscreen mode Exit fullscreen mode

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" />
Enter fullscreen mode Exit fullscreen mode

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" />
Enter fullscreen mode Exit fullscreen mode

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 />
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>

Enter fullscreen mode Exit fullscreen mode

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>

Enter fullscreen mode Exit fullscreen mode

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"  />
Enter fullscreen mode Exit fullscreen mode

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 .

Follow me in Github✅

Happy Coding 😊

Top comments (1)

Collapse
 
devluc profile image
Devluc

Learned a lot from the article