Through this article, we have explained the Top 12 Useful Attributes of HTML with examples. Become a master of HTML and make your website more easily accessible by including these important attributes in your project.
Many developers underestimate the power of HTML, but HTML5 has brought exciting advancements. While HTML includes many attributes, this article focuses on the important attributes that few developers are aware of.
Let's dive in and expand our knowledge!
Top 12 Attributes List
- Contenteditable attribute
- Data attribute
- Required attribute
- Range attribute
- Preload attribute
- Controls attribute
- Download attribute
- Title attribute
- Srcset attribute
- Autocomplete attribute
- Poster attribute
- Spellcheck attribute
1. Contenteditable attribute
The "contenteditable" attribute in HTML determines whether the content within an element can be edited. When set to true, users can modify the content by clicking on it and typing.
You can assign either true or false values to the contenteditable attribute to enable or disable editing.
True: Content within the element is editable.
False: Content within the element cannot be edited.
<body>
<div contenteditable="true">This text can be edited by the user.</div>
<div contenteditable="false">This text cannot be edited by the user.</div>
</body>
If the contenteditable attribute is set without a value, it defaults to an empty string, which is interpreted as true. Therefore, the text becomes editable automatically.
The contenteditable attribute can be applied to any HTML element, such as a div, span, or paragraph (p). And you can make it more customized using CSS.
2. Data attribute
The "data" attribute in HTML allows us to store custom data on an HTML element, making it easier to keep it private within the page or application. This is mainly used to store scripting or custom application information.
Data attributes are divided into two parts:
Attribute Value: This can be any string.
Attribute Name: Must be at least one character long, contain no capital letters, and be prefixed with 'data-'.
You can store any type of data in the data attribute, as long as it is a string. Multiple data attributes can be used on the same element to store various kinds of data.
To access the value of the attribute, you can use JavaScript or another programming language to retrieve the data stored in the data attribute. For instance, in JavaScript, you can utilize the getAttribute method to obtain the value of a data attribute.
<body>
<h3>Click on any language to find out the year it was launched.</h3>
<p onclick="showDetails(this)" id="JavaScript" data-language-released="1996"> JavaScript</p>
<p onclick="showDetails(this)" id="Java" data-language-released="1995"> Java</p>
<script>
function showDetails(language) {
var languageReleased = language.getAttribute("data-language-released");
alert(language.innerHTML + " was released in " + languageReleased + ".");
}
</script>
</body>
3. Required attribute
The "required" attribute in HTML tells the browser that an input field must have something written in it before the form can be sent. If it's used, the user has to type something into the field before they can send the form.
Radio, checkbox, number, text, and more types of input can be used with this attribute.
<body>
<form>
First Name:<input type="fName" id="FirstName" name="name" required><br><br>
Last Name:<input type="lname" id="LasstName" name="name" required> <br><br>
Email:<input type="mail" id="mail" name="mail" required> <br><br>
Password: <input type="password" id="password" name="password" required> <br><br>
<input type="submit" value="Submit">
</form>
</body>
4. Range attribute
In HTML forms, the 'range' input element creates a slider. This slider lets users pick a number by moving a handle on a track.
<body>
<form>
<label for="volume">Volume:</label><br>
<input type="range" id="volume" name="volume" min="0" max="100" value="30"><br>
<input type="submit" value="Submit">
</form>
</body>
The 'min', 'max', 'value', and 'step' attributes are used to set up the minimum, maximum, default values, and how much the slider moves when you drag it.
5. Preload attribute
The "preload" attribute, found in the <video> tag, determines how the browser handles video content loading. It can take three values:
none: The video isn't preloaded (default).
metadata: Only video metadata is preloaded (e.g., dimensions, duration).
auto: The entire video is preloaded.
Preload is easily used to manage video loading in the browser, optimize webpage loading speed, or reduce network data usage. One thing to keep in mind is that preload behavior may vary depending on the browser and the user's connection speed.
<body>
<video src="video.mp4" width="300px" height="250px" controls preload="auto"></video>
</body>
When the website loads, the browser will be prompted to preload the entire video.
6. Controls Attribute
The HTML "control" attribute is utilized to display audio and video controls. It's a boolean attribute applicable to <audio> and <video> tags.
Without any assigned value, it's either present or absent. When present, the browser shows default controls for the video. If absent, no controls are displayed, requiring JavaScript for custom controls or interactions with the video element.
As an example <audio>
<body>
<audio controls>
<source src="audio.ogg" type="audio/ogg">
<source src="audio.mp3" type="audio/mpeg">
</audio>
</body>
As an example <video>
<body>
<video src="My_video.mp4" height="300px" width="300px" controls></video>
</body>
Remember, the way default controls look and work can vary depending on the browser and your operating system. You can change how they look using CSS or make your own custom controls using JavaScript.
7. Download attribute
The "download" attribute allows users to download a file directly when they click on a hyperlink. However, it requires the href attribute to be set. You can specify the name of the downloaded file using this attribute.
If the download attribute is empty, the original file name is used. It's commonly used with the <a> and <area> elements, providing a simple way for users to download files like documents, PDFs, or other media from websites.
<body>
<a href="./Text_file.pdf" download="Important_text_file">Click here to download file</a> <br> <br>
<a href="Ghost.jpg" download="Car_img">Click here to download image</a>
</body>
When you click the first link, it'll ask you to save text_file.pdf. Similarly, clicking the second link prompts you to save car.jpg.
Remember, the download feature only works for links from the same website. If linking to a different site, you'll need a server-side method to force the download.
8. Title attribute
The "title" attributes in HTML are used to provide additional information about links, images, and other elements. When a user hovers over that element, the value of the title attribute appears as a tooltip that shows the information we provided. We can use the title attribute with any HTML element.
<body>
<a href="https://codemafias.com" title="Learn more about codemafias">Hover here</a> <br> <br>
<div title="Codemafias">This is div tag - Hover here</div>
</body>
In this example, when you hover over the link, a tooltip saying "Learn more about codemafias" pops up. Likewise, hovering over the text shows a tooltip saying "Codemafias.".
9. Srcset attribute
The "srcset" attribute in HTML allows you to define a set of images for various scenarios, like different device sizes.
It's handy for optimizing website performance as it helps display the most suitable image based on the user's device and connection. It's essential when using <source> within <picture>.
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<picture>
<source media="(min-width: 800px)"
srcset="https://images.unsplash.com/photo-1481349518771-20055b2a7b24?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8M3x8cmFuZG9tfGVufDB8fDB8fA%3D%3D&w=1000&q=80">
<source media="(min-width: 500px)" srcset="https://hatrabbits.com/wp-content/uploads/2017/01/random.jpg">
<img src="https://wallpapershome.com/images/pages/ico_h/21485.jpg" style="width:auto;">
</picture>
</body>
It's important to understand that the srcset attribute works only in modern browsers. Therefore, it's wise to include a fallback image using the src attribute for older browsers that don't support it.
10. Autocomplete attribute
The "autocomplete" attribute in HTML forms tells the browser whether to enable or disable autocomplete for that specific element. When autocomplete is on, the browser automatically suggests previously entered values based on the user's browsing history.
The "autocomplete" property can be toggled between "on" and "off" to enable or disable autocomplete for an element. If no value is specified, it defaults to "on."
<body>
<form>
<label for="name">First Name:</label><br>
<input type="name" id="name" name="name" autocomplete="on"><br>
<label for="name">Last Name:</label><br>
<input type="name" id="name" name="name" autocomplete="on"><br>
<label for="email">Email:</label><br>
<input type="email" id="email" name="email" autocomplete="on"><br>
<label for="password">Password:</label><br>
<input type="password" id="password" name="password" autocomplete="off"><br><br>
<input type="submit" value="Submit">
</form>
</body>
In this example, the "Fname," "Lname," and "email" input fields have autocomplete enabled, letting the browser suggest previous entries. But the password field's autocomplete is disabled, so no suggestions appear, even with past submissions.
11. Poster attribute
The "poster" attribute in HTML, used with the <video> tag, specifies an image to display while the video is loading or until the user initiates playback. It serves as a placeholder image until the video is ready to play.
<body>
<video width="350" height="250" controls poster="Ghost.jpg">
<source src="My_video.mp4" type="video/mp4">
</video>
</body>
In this example, the poster attribute indicates the image file path shown as a placeholder for the video until playback begins. When play is clicked, the video replaces the placeholder. If omitted, the video plays immediately without a placeholder.
12. Spellcheck attribute
The "spellcheck" attribute in HTML determines whether the browser should check the spelling of the content within an element. When enabled, the browser will underline misspelled words in the element.
The spellcheck attribute in HTML can be set to "true" or "false" to enable or disable spell-checking for the element. If no value is specified, it defaults to "true".
<body>
<form>
<textarea id="message" name="message" spellcheck="true"></textarea><br>
<textarea id="message" name="message" spellcheck="false"></textarea><br>
</form>
</body>
Conclusion
It is essential to understand and use HTML attributes to easily make the website effective and user-friendly. We have explained the top 12 HTML attributes in this article, which are amazing and helpful. Many successful developers make their work easier by using these attributes well. So you can learn and become a professional developer.
Check out this article to learn about HTML tags.
We trust this article has been helpful. If you have any questions on this topic or related to web development, feel free to ask using the question box given below.