DEV Community

Cover image for 13 HTML Attributes You Should Know About
Shefali
Shefali

Posted on • Updated on • Originally published at shefali.dev

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Buy Me A Coffee

Top comments (32)

Collapse
 
devsyedmohsin profile image
Syed Mohsin Raza

Here are a few more attributes

The start attribute

Start attribute allows you to specify starting number for your list items.

 <ol start="20">
       <li>Pineapple🍍</li>
       <li>Apple🍎</li>
       <li>Greenapple 🍏</li>
 </ol>
Enter fullscreen mode Exit fullscreen mode

3 items of fruits starting from 20 20 is specified using the start attribute3 items of fruits

The required attribute

Set required attribute on input fields that are mandatory to be filled.

<input type="password" required>
Enter fullscreen mode Exit fullscreen mode

The dir attribute

You can set your text direction from right to left or left to right using dir attribute set dir to auto this will automatically change text direction based on language.

<p dir="rtl">Awesome!</p>
Enter fullscreen mode Exit fullscreen mode

some text written from right to left

The disabled attribute

Use disabled attribute for options element to disable a item from dropdown. You can add disabled attribute to any focus-able element

 <select>
   <option>HTML</option>
   <option>CSS</option>
   <option disabled>REACT</option>
 </select>
Enter fullscreen mode Exit fullscreen mode

Unable to select a option from list because of disabled attribute

The reversed attribute

Using reversed attribute you can reverse the order of list numbers.

  <ol reversed>
        <li>Pineapple🍍</li>
        <li>Apple🍎</li>
        <li>Greenapple 🍏</li>
  </ol>
Enter fullscreen mode Exit fullscreen mode

list numbers starting in reversed order starting from 3 and ending at 1 instead of 1 to 3

Collapse
 
devshefali profile image
Shefali

Thanks for adding:)

Collapse
 
thomasbnt profile image
Thomas Bnt ☕

Hello very cool post about HTML attr !

Don't hesitate to put colors on your codeblock like this example for have to have a better understanding of your code 😎

console.log('Hello world!');
Enter fullscreen mode Exit fullscreen mode

Example of how to add colors and syntax in codeblocks

Collapse
 
devshefali profile image
Shefali

That's so cool!

I didn't know about that. Thanks for letting me know, Thomas!😊

Collapse
 
thomasbnt profile image
Thomas Bnt ☕

Oh yeah! That is very better to read! 🕺🙌

Thread Thread
 
devshefali profile image
Shefali

Yeah! Thanks, Thomas🙌

Collapse
 
donburks profile image
Don Burks

It's also worth mentioning for alt and title that these attributes are used by SEO engines to help index content and associate keywords, and are therefore important. They're also critical in terms of accessibility because they are accessed by software such as screen readers to help users understand the context.

Collapse
 
devshefali profile image
Shefali

Thank you so much for adding this🙌🙏

Collapse
 
goodevilgenius profile image
Dan Jones

One small note on the download attribute. In your example, the value on the attribute is unneeded. Specifying a value means that the browser will use that value as the default filename. This is especially useful if you use a CDN that has obscure filenames. But, if you just want to use the filename part of the path, you can leave the value empty.

So, here are two examples:

<a href="resume.pdf" download>Download my resume</a>

<a href="https://cool-cdn.com/user/bucket/01e99dfa-f12c-4c2b-98da-d66961cf628e.pdf" download="resume.pdf">Download my resume</a>
Enter fullscreen mode Exit fullscreen mode
Collapse
 
devshefali profile image
Shefali

Thanks for your feedback🙏

I appreciate it 🙌

Collapse
 
chasm profile image
Charles F. Munat

This is a great starter list. Although I strongly discourage learners from trying to "front load" knowledge by memorizing, for example, all the HTML elements, seeing a list such as this, which limits itself to a reasonable number, helps coders to know that there are elements and attributes out there that are worth going back to.

When I build my apps, I start with plain HTML and I think hard about the structure of of the content. I consider the semantics, and I ask myself, "Is there an HTML element that encodes this meaning?"

And then I go to MDN and look at the documentation for that element and consider all the potential attributes. Which ones do I need?

So I code just in time, but also semantically.

Collapse
 
devshefali profile image
Shefali

I agree with you.

It's not that good for beginners, but can help us throughout our HTML journey.

It just depends on our personal preference.

Collapse
 
kehoecj profile image
Clayton Kehoe

Really nice guide - thanks for sharing!

Collapse
 
devshefali profile image
Shefali

I'm glad you liked it 😊

Collapse
 
ritikaagrawal08 profile image
Ritika Agrawal

Amazing article Shefali!

Collapse
 
devshefali profile image
Shefali

Thanks a lot, Ritika!

Collapse
 
Sloan, the sloth mascot
Comment deleted
Collapse
 
devshefali profile image
Shefali

Thanks for your feedback, Andrew!😊

Collapse
 
srinivasan-thirumani profile image
srinivasan

Great! Thanks for sharing this valuable list.

Collapse
 
devshefali profile image
Shefali

Thanks for your feedback.🙌

Collapse
 
jordantylerburchett profile image
Jordan-Tyler Burchett

Nice list there are a few here I hadn't heard of and must try. I had to bookmark this one, thank you!

Happy Venturing 😏

Collapse
 
devshefali profile image
Shefali

I'm glad you found something new here😊