This article will introduce 20+ powerful HTML attributes that can make your website more dynamic and interactive, and make users feel more comfortable and happy. Let’s explore them together!
1. Accept
The Accept attribute lets the browser know what types of files it can handle.
2. Autofocus
Autofocus sets the focus to a specific element when the page loads.
When a page loads, Autofocus focuses on a specific element so that users can interact with it directly without clicking or using the Tab key to switch focus.
3. Input mode
Input mode specifies the type of content that can be entered in a text box.
Inputmode optimizes the input experience, such as showing the appropriate virtual keyboard on mobile devices.
4. Pattern
Pattern is a regular expression used to verify that user input in a text box meets specified format requirements.
Pattern is often used with the required attribute to validate user input for specific formats like zip codes, phone numbers, and email addresses, ensuring they are not empty.
5. Required
Required is used to specify if a form element is mandatory.
If a form element has Required set, the browser prompts the user to fill in the field if the element is empty when the form is submitted, preventing submission until the field is filled.
6. Autocomplete
Autocomplete enables auto-complete for a form element, making it easier for users to fill out forms quickly and with fewer typing errors.
7. Multiple
Multiple attribute allows multiple selections for form elements such as dropdown lists, file uploads, and checkboxes.
8. Download
Download attribute specifies the file name when a file is downloaded via a link.
When a link has the Download attribute, clicking it downloads the file with the specified name and saves it on the user’s device. The Download attribute is usually used in tags to download PDF, image, audio, video and other files.
9. Content editable
Contenteditable is an attribute used to make an element editable in HTML. When an element has this attribute set, users can enter text, add images, and modify styles.
10. Readonly
Readonly attribute is used to make a form element non-editable by the user.
If a form element has the Readonly attribute set, the user can only view the value of the element but cannot modify it.
11. Hidden
The Hidden attribute is used to hide an element on a webpage.
This attribute is commonly used for form elements, buttons, and images to pass data or control page behavior without affecting the page layout.
12. Spellcheck
The Spellcheck attribute is used to turn spell checking on or off for an element.
If an element has the Spellcheck attribute set, the browser will check for spelling errors as the user enters text and indicate incorrect words with a red wavy line.
13. Translate
The Translate attribute in HTML is used to indicate whether or not an element should be translated.
14. Loading
The Loading attribute in HTML is used to set the browser’s priority when loading resources.
Not all browsers support loading attributes, so it’s important to check compatibility before using them.
15. Onerror
“onerror” is a JavaScript event that triggers when there is an error in the code. You can add the onerror event handler to objects in your web page or the window object to catch JavaScript errors happening globally.
16. Poster
The ‘poster’ attribute of the <video> tag in HTML5 is used to display an image before the video loads and starts playing.
17. Controls
The “controls” attribute is used in HTML5 <video> and <audio> tags to show or hide the media player controls.
Controls attribute works only in HTML5 supported browsers. It won’t display the control if the browser does not support HTML5.
18. Autoplay
Autoplay is an HTML5 attribute used to make media play automatically when a webpage loads, without requiring the user to start it manually.
If autoplay is set to true, the media will start playing automatically when the page loads.
19. Loop
Loop is an HTML5 attribute used with <video> and <audio> tags to enable media to repeat playback continuously after it finishes.
When the loop attribute is set to ‘loop’ for a <video> or <audio> element in HTML5, the media will automatically repeat playing after it finishes playing once.
20. Async
The “async” attribute in HTML <script> tag specifies whether the script should be loaded asynchronously.
When the async attribute is used for a script in HTML, the script will be loaded in the background and won’t delay the display of the page.
21. Defer
The ‘defer’ attribute of the HTML <script> tag specifies that scripts should be loaded lazily.
If you set the defer property to defer, the script will wait until the page has finished loading before it is executed.
22. Draggable
Draggable is an attribute in HTML5 that lets users move elements by dragging them.
When an element is set to draggable, the user can drag the element with the mouse or touch screen.
