5 Useful HTML Attributes That You May Have Missed

HTML offers a vast number of attributes, and because of that, it’s pretty apparent to miss the rare and the powerful one. So in today’s blog, we will cover the five most potent and useful HTML attributes that you may have missed while learning.

What are HTML Attributes?

HTML elements have attributes that provide additional information about the elements. The attributes configure the elements and adjust their behavior to meet the user’s criteria in various ways. HTML attributes must be defined inside the starting tag in the dictionary format, i.e. name and value pair.

1. Accept

Using HTML, we can create the forms through which you can upload your files. The accept attribute specifies the type of file that can be submitted through the file upload option, for example, image or text. You can use accept attribute only with the <input> element.

<form action="/action_page.php">
  <input type="file" name="logo" accept="image/*">
  <input type="submit">
</form>

2. Download

The download attribute specifies that the target URL will get downloaded when the user clicks on the button or hyperlink. This attribute allows users to download files from your website. And for using this attribute, you need to set the href attribute first. Every time the value of the download attribute will be the name of the newly-downloaded file.

Note: The browser automatically detects the file format and adds that extension to the file.

<a href="/document/widgetcorelogo.jpg" download>

3. Multiple

The multiple attribute is a Boolean attribute used only with the <input> and <select> element. Using multiple attribute, the user is allowed to choose or enter the multiple values. For example, when using with <select> tag, the user can select multiple options, and when using with the <input> tag, the user can upload multiple files.

<form action="/action_page.php">
  Select images: <input type="file" name="img" multiple>
  <input type="submit">
</form>

<select multiple>
  <option value="JS">JS</option>
  <option value="HTML">HTML</option>
  <option value="CSS">CSS</option>

</select>

4. Translate

The translate attribute specifies whether the content of the element should get translated or not. It is the global attribute that means it can be used with any HTML element.

<p translate="no">This cannot be translated to any language.</p>
<p>This can be translated to any language.</p>

5. Poster

The poster attribute specifies an image that the user should see if the video is downloading or before hitting the play button. You can use the poster attribute only with the <video> element.

<video width="320" height="240" autoplay poster="/images/logo.img">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.webm" type="video/webm">
Your browser does not support the requested video.
</video>

Did you find these useful HTML attributes helpful? Tell us in the comment section below. Happy Coding!