✨13 HTML Attributes you must know about ✔
Tags: html, webdev, programming, beginners
Published: 2023-11-17 13:53:18


![hey devs](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tmob4y50k8q8orbu9g5i.gif)

Hello everyone, this is [Md Taqui Imam](https://tinyurl.com/MdTaquiImam) 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

{% cta https://github.com/taqui-786 %}Follow me in Github✅{% endcta %}

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 .

{% cta https://github.com/taqui-786 %}Follow me in Github✅{% endcta %}

## Happy Coding 😊