DEV Community

Cover image for 13 HTML Attributes You Should Know About

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...
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๐Ÿ˜Š

Collapse
 
musfiquahaque profile image
Musfiqua haque

It's really awesome And I find it good for developing my html knowledge.
Thanks a lot.

Collapse
 
devshefali profile image
Shefali

I'm glad you liked it ๐Ÿ˜Š

Thank you so much for checking out!

Collapse
 
casualwriter profile image
Casualwriter

thank you, very useful.

Collapse
 
devshefali profile image
Shefali

I'm glad you liked it ๐Ÿ˜Š

Collapse
 
mehmoodulhaq570 profile image
Mehmood-Ul-Haq

well expalined,

Collapse
 
devshefali profile image
Shefali

Thanks for checking out:)

Collapse
 
devshefali profile image
Shefali

That's very helpful. Thanks for your feedback, Kevin!

Collapse
 
vindexus profile image
Colin Kierans

Nice, I didn't know about the spellcheck attribute and that seems useful

Collapse
 
devshefali profile image
Shefali

I'm glad you found something new here.