Shefali

Posted on Nov 7, 2023 • Updated on Nov 14, 2023 • Originally published at shefali.dev

13 HTML Attributes You Should Know About

#webdev #html #beginners #programming

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

Top comments (32)

Syed Mohsin Raza • Nov 8 '23

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>

The `required attribute`

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

<input type="password" required>

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>

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>

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>

Shefali • Nov 8 '23

Thanks for adding:)

Thomas Bnt ☕ • Nov 13 '23

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!');

Shefali • Nov 14 '23

That's so cool!

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

Thomas Bnt ☕ • Nov 14 '23

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

Shefali • Nov 15 '23

Yeah! Thanks, Thomas🙌

Don Burks • Nov 15 '23

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.

Shefali • Nov 15 '23

Thank you so much for adding this🙌🙏

Charles F. Munat • Nov 15 '23

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.

Shefali • Nov 15 '23

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.

Dan Jones • Nov 15 '23

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>

Shefali • Nov 15 '23

Thanks for your feedback🙏

I appreciate it 🙌

Kevin Naidoo • Nov 18 '23

Nice article. While not exactly related, just worth pointing out to Junior devs - the "accept" attribute should not be trusted, you can use this to make the user experience better however on the server side - you always still need to validate the mime types.