13 HTML Attributes You Should Know About
Tags: webdev, html, beginners, programming
Published: 2023-11-07 06:31:06

In HTML, attributes are used to provide additional information about HTML elements. In this post, you’ll learn about 13 HTML attributes that can enhance the visual appeal of your websites.

Let’s start!🚀

## Accept Attribute

You can use the `accept` attribute with the `<input>` element (only for file type) to specify the types of files a server can accept.

```html
<input type="file" accept=".jpg, .jpeg, .png">
```

## Alt Attribute

You can use the `alt` attribute with the `<img>` element to specify an alternate text in case the image can’t be displayed on the web page.

```html
<img src="nature.png" alt="A beautiful sunset">
```

## Autocomplete Attribute

You can use the autocomplete attribute with the `<form>`, `<input>` and `<textarea>` elements to control the browser’s autocomplete feature.

```html
<input type="text" name="name" autocomplete="on" />
```

## Contenteditable Attribute

You can use the `contenteditable` attribute to specify whether the element’s content is editable or not. It allows users to modify the content within the element.

This is a global attribute which means you can use this attribute with all HTML elements.

```html
<div contenteditable="true">You can edit this content.</div>
```

## Download Attribute

You can use the `download` attribute with the `<a>` element to specify that when a user clicks the link, the linked resource should be downloaded rather than navigated to.

```html
 <a href="document.pdf" download="document.pdf">Download PDF</a>
```

## Hidden Attribute

You can use the `hidden` attribute to hide the element on the web page. This is useful for controlling visibility through JavaScript or CSS.

This is a global attribute which means you can use this attribute with all HTML elements.

```html
<div hidden>This is hidden content.</div>
```

## Loading Attribute

You can use the `loading` attribute with the `<img>` element to control how the browser loads the image. It has three values: “eager,” “lazy,” and “auto.”

```html
<img src="image.png" loading="lazy" />
```

## Multiple Attribute

You can use the `multiple` attribute with the `<input>` and `<select>` elements to allow users to select/enter multiple values at once.

```html
<input type="file" multiple />
<select multiple>
   <option value="java">Java</option>
   <option value="javascript">JavaScript</option>
   <option value="typescript">TypeScript</option>
   <option value="rust">Rust</option>
</select>
```

## Poster Attribute

You can use the `poster` attribute with the `<video>` element to display an image until the user plays the video.

```html
<video controls poster="image.png" width="500">
   <source src="video.mp4" type="video/mp4" />
</video>
```

## Readonly Attribute

You can use the `readonly` attribute with the `<input>` element to specify that the element is read-only, not editable.

```html
<input type="text" value="This is readonly." readonly />
```

## Srcset Attribute

You can use the `srcset` attribute with the `<img>` and `<source>` (in `<picture>`) elements to provide a list of image sources. This helps the browser to select different images for different screen sizes.

```html
<img src="image.jpg" srcset="image.jpg, image-2x.jpg, image-3x.jpg">
```

## Spellcheck Attribute

You can use the `spellcheck` attribute with `<input>` elements (not passwords), content-editable elements, and `<textarea>` element to enable or disable spell checking by the browser.

```html
<input type="text" spellcheck="false" />
```

## Title Attribute

You can use the `title` attribute to provide additional information about an element. This information is typically displayed when the user hovers over the element.

This is a global attribute which means you can use this attribute with all HTML elements.

```html
<a href="document.pdf" title="Click to download">Download File</a>
```
That’s all for today.

Thanks for reading.

For more content like this [click here](https://shefali.dev/blog).

You can also follow me on [X(Twitter)](https://twitter.com/Shefali__J) for getting daily tips on web development.

Keep Coding!!

<a href="https://www.buymeacoffee.com/devshefali" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/default-orange.png" alt="Buy Me A Coffee" height="41" width="174"></a>