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)
Here are a few more attributes
The
start attribute
Start attribute allows you to specify starting number for your list items.
The
required attribute
Set required attribute on input fields that are mandatory to be filled.
The
dir attribute
You can set your text direction from right to left or left to right using
dir
attribute setdir
to auto this will automatically change text direction based on language.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
The
reversed attribute
Using reversed attribute you can reverse the order of list numbers.
Thanks for adding:)
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 😎That's so cool!
I didn't know about that. Thanks for letting me know, Thomas!😊
Oh yeah! That is very better to read! 🕺🙌
Yeah! Thanks, Thomas🙌
It's also worth mentioning for
alt
andtitle
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.Thank you so much for adding this🙌🙏
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:
Thanks for your feedback🙏
I appreciate it 🙌
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.
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.
Really nice guide - thanks for sharing!
I'm glad you liked it 😊
Amazing article Shefali!
Thanks a lot, Ritika!
Thanks for your feedback, Andrew!😊
Great! Thanks for sharing this valuable list.
Thanks for your feedback.🙌
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 😏
I'm glad you found something new here😊