DEV Community

13 HTML Attributes You Should Know About

Shefali on November 07, 2023

In HTML, attributes are used to provide additional information about HTML elements. In this post, you’ll learn about 13 HTML attributes that can en...

Read full post

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🙌🙏

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 🙌

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.