13 HTML Attributes You Should Know About

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. You can set it to "on" or "off" to enable or disable autocomplete for specific input fields.

<input type="text" name="name" autocomplete="name" />

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