DEV Community

Cover image for 11 Useful HTML Attributes You Must Know
Codeflix
Codeflix

Posted on • Edited on

11 Useful HTML Attributes You Must Know

#beginners #html #programming #tutorial

Hello, Readers, sorry I was busy in some work so it got late.

Let's Get Started

HTML attributes allow you to perform a lot more complex tasks directly on your HTML files. Here are some of the most useful ones to know!

HTML is the building block of the web. Knowing some less-known, but useful parts of this markup language can make your life a lot easier. HTML attributes provide several features that can help you to get the most out of HTML. It defines additional characteristics or properties of an HTML element.

In this article, you'll learn about 11 HTML attributes that you probably haven’t heard of yet.

1. Multiple

This attribute allows users to enter multiple values. You can use the multiple attribute with tags and tags. This boolean attribute is valid only for email or file input types.

Using multiple Attribute With Tag 

<label for="language">Select languages:</label>
<select name="language" id="language" multiple>
<option value="C++">C++</option>
<option value="Python">Python</option>
<option value="JavaScript">JavaScript</option>
<option value="Java">Java</option>
</select>
Enter fullscreen mode Exit fullscreen mode

Using multiple Attribute for File Input

By using the multiple attribute for file input, you can select multiple files (by holding the Shift or Ctrl keys).

<input type="file" multiple>
Enter fullscreen mode Exit fullscreen mode

Using multiple Attribute for Email Input

By using the multiple attribute for email input, you can enter a list of comma-separated email addresses. All the white spaces will be removed from each address in the list.

<input type="email" multiple>
Enter fullscreen mode Exit fullscreen mode

2.Contenteditable

You can make the HTML content editable on a web page using the contenteditable attribute. This is a global attribute, i.e, it's common to all HTML elements.

<p contenteditable="true">
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
Enter fullscreen mode Exit fullscreen mode

3.Spellcheck

The spellcheck attribute specifies whether the element may be checked for spelling errors or not. You can spellcheck text in the elements, text in the editable elements, or text in the input elements(except passwords).

<p contenteditable="true" spellcheck="true">
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
Enter fullscreen mode Exit fullscreen mode

4.Dowmload

You can download a resource using the download attribute. The download attribute tells the browser to download the specified URL instead of navigating to it. You can use the download attribute with tag and tag.

Note: The download attribute only works with same-origin URLs. It follows the rules of the same-origin policy.

<a href="xyz.png" download="myImage">Download</a>
Enter fullscreen mode Exit fullscreen mode

5.Accept

The accept attribute of the tag specifies the type of files a user can upload. You can specify a comma-separated list of one or more file types as its value.

Accepting an Audio File 

<input type="file" id="audioFile" accept="audio/*">
Enter fullscreen mode Exit fullscreen mode

Accepting a video file 

<input type="file" id="videoFile" accept="video/*">
Enter fullscreen mode Exit fullscreen mode

Accepting an Image File 


<input type="file" id="imageFile" accept="image/*">
Enter fullscreen mode Exit fullscreen mode

Accepting a Microsoft Word File 

<input type="file" id="docpicker"
accept=".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document">
Enter fullscreen mode Exit fullscreen mode

Accepting PNG or JPEG Files 

<input type="file" id="imageFile" accept=".png, .jpg, .jpeg">
Enter fullscreen mode Exit fullscreen mode

Accepting a PDF File 

<input type="file" id="pdfFile" accept>
Enter fullscreen mode Exit fullscreen mode

6. translate

The translate attribute tells the browser that the element should be translated or not when the page is localized. It can have 2 values: "yes" or "no".

<p translate="no">
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
Enter fullscreen mode Exit fullscreen mode

7. poster

The poster attribute is used to show an image while the video is downloading or until the user plays the video.

Note: If you don't specify anything, nothing is displayed until the first frame is available. When the first frame is available, it's shown as the poster frame.

<video controls
src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4"
poster="posterImage.png">
</video>
Enter fullscreen mode Exit fullscreen mode

8. inputmode

The inputmode attribute indicates the browser which keyboard to display when a user has selected any input or textarea element. This attribute accepts various values:

None 

<input type="text" inputmode="none" />
Enter fullscreen mode Exit fullscreen mode

Numeric 

<input type="text" inputmode="numeric" />
Enter fullscreen mode Exit fullscreen mode

Tel 

<input type="text" inputmode="tel" />
Enter fullscreen mode Exit fullscreen mode

Decimal 

<input type="text" inputmode="decimal" />
Enter fullscreen mode Exit fullscreen mode

Email 

<input type="text" inputmode="email" />
Enter fullscreen mode Exit fullscreen mode

URL 

<input type="text" inputmode="url" />
Enter fullscreen mode Exit fullscreen mode

Search 

<input type="text" inputmode="search>
Enter fullscreen mode Exit fullscreen mode

9. pattern

The pattern attribute of the <input> element allows you to specify a regular expression for which the element's value will be validated against. You can use the pattern attribute with several input types like text, date, search, URL, tel, email, and password.

<form>
<input name="username" id="username" pattern="[A-Za-z0-9]+"> 
</form>
Enter fullscreen mode Exit fullscreen mode

10. autocomplete

The autocomplete attribute specifies whether the browser should automatically complete the input based on user inputs or not. You can use the autocomplete attribute with several input types like text, search, URL, tel, email, password, date pickers, range, and color. You can use this attribute with the elements or

elements.
<form>
<input name="username" id="username" pattern="[A-Za-z0-9]+"> 
</form>

11. autofocus

The autofocus attribute is a boolean attribute indicating that an element should be focused on page load. You can use this attribute with , , , , or elements.

Using autofocus Attribute With input Element 

<input type="text" autofocus>

Using autofocus Attribute With select Element 

<select name="languages" id="languages">
<option value="C++">
C++
</option>
<option value="Python">
Python
</option>
<option value="JavaScript">
JavaScript
</option>
<option value="Java">
Java
</option>
</select>
Using autofocus Attribute With textarea Element
<textarea autofocus>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
</textarea>

THE END

Top comments (4)

Collapse
 
ichichich3011 profile image
ichichich3011 •

Really cool selection, but I guess the title is a little bit misleading since you are referring to attributes in the article instead of tags as stated in the title
Still a really nice collection of rather unknown features 😊

Collapse
 
codeflix profile image
Codeflix •

MY WEBSITE (UNDER CONSTRUCTION) codeflix.atwebpages.com/

Collapse
 
calinzbaenen profile image
Calin Baenen •

I agree with @ichichich3011. I suggest "11 Html tag attributes you must know about." or some similar variation.

Collapse
 
codeflix profile image
Codeflix •

Thanks for the feedback

Read next

oculus42 profile image

Do we need Promise.allSettled()?

Samuel Rouse -

patrick_61cbc6392b72286f6 profile image

Axios vs Fetch: Which is Best for HTTP Requests?

Patrick -

probir-sarkar profile image

Next.js Interview Mastery: Essential Questions 81-90 (Part 9)

Probir Sarkar -

mikeyoung44 profile image

AI Creates Digital Twins of 1,000 People with 85% Accuracy in Behavioral Predictions

Mike Young -