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.

<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.

<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.

<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.

<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.

 <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.

<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.”

<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.

<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.

<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.

<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.

<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.

<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.

<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.

You can also follow me on X(Twitter) for getting daily tips on web development.

Keep Coding!!