15 Useful HTML5 Attributes You Should Know About🪄

5 min readFeb 19, 2024

The world of web development is constantly filled with innovations and advancements and one of these developments is the features brought by HTML5. HTML5 offers a set of attributes that make web pages more impressive and functional. These attributes are designed to provide web developers with more flexibility, performance and user experience. In this article, we will explore 15 lesser-known and useful attributes of HTML5.

1. contenteditable

The contenteditable attribute enables making the content of an element editable by the user.

<div contenteditable="true">
    This text is editable.
</div>

2. spellcheck

The spellcheck attribute determines the spelling check of a text input or a text field. This attribute enables the browser to check whether the text entered by the user is correct and marks incorrectly spelled words.

<p spellcheck="true" contenteditable="true">
     Add your cotnent here.
</p>

3. translate

The translate attribute is used to indicate whether a piece of text will be translated or not. For example, logo, company name or brand name, etc.

<footer>
    <small>© 2024 <span translate="no">CompanyName</span> All right reserved.</small>
</footer>

4. multiple

The multiple attribute is a property that allows multiple options to be selected simultaneously for a form element. It is typically used with the <select> and <input> tags.

<label for="cars">Choose your favorite cars:</label>
<select id="cars" name="cars" multiple>
    <option value="volvo">Volvo</option>
    <option value="mercedes">Mercedes</option>
    <option value="peugeout">Peugeout</option>
    <option value="audi">Audi</option>
</select>

5. reversed

The reversed attribute is a attribute used in numbered lists. This attribute is used to reverse the order of items in the list. Generally used within the <ol> (ordered list) element.

<ol reversed>
  <li>Strawberry</li>
  <li>Cherry</li>
  <li>Peach</li>
</ol>

6. draggable

The draggable attribute determines whether an items in draggable or not. This attribute allows users to drag and drop an item using the mouse.

<p draggable="true">This is draggable text.</p>

📌 The draggable attribute is not boolean, it is an enumerated property. According to the HTML specification, when using this attribute, the value “true” or “false” must be explicilty specified.

7. accesskey

The accesskey attribute allows users to quickly access specific elements by pressing a certain key combination (usually letter or number along with the [Alt] key) on the keyboard.

<a href="https://www.example.com" accesskey="c">Contact</a> - It can be accessed with [Alt]+C.

8. poster

The poster attribute allows video players to specify a poster image associated with the video to be loaded. The poster image can be displayed while the video player is loading and provides the user with a preview of the video.

<video width="380" height="240" poster="video_poster.jpg" controls>
  <source src="video.mp4" type="video/mp4">
  <source src=" video.ogg" type="video/ogg">
  Your browser does not support the video tag. 
</video>

9. onerror

The onerror attribute is used to specify the JavaScript code that will be triggered in case of an error occurring while loading and external file (such as an image or other media elements) .

<img src="image.png" onerror="myFunction()">

<script>
    function myFunction() {
      alert("The image could not be loaded.");
    }
</script>

10. theme-color

The theme-color attribute specifies the color of a webpage’s theme to web browsers. This color can be integrated into the browser interface and provides the user with a specific theme color while navigating in the browser.

<meta name="theme-color" content="#007bff">

11. favicon

favicon is a small icon that appears in the browser tab or bookmarks of websites. It helps users navigate between websites more easily.

<link rel="icon" href="favicon.ico" type="image/x-icon">

12. touch-icons

touch-icons are shortcut icons added to the home screen of a smartphone or tablet for a website or web application. The icons enable users to quickly access the website or application.

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">

13. loading

The loading attribute is used to control the loading behavior of a resource by the browser. This attribute can delay or prioritize the loading of resources while the browser waits for the page to load or be processed. This is used to improve page performance and enhance user experience.

It is used particularly in elements such as <img>, <iframe>, <script>, <link rel=”stylesheet” href=”styles.css”>.

<!-- Example 1: Usage of "lazy" loading when loading an image. -->
<img src="image.jpg" loading="lazy">

<!-- Example 2: Usage of "eager" loading when loading an image. -->
<img src="image.jpg" loading="eager">

🔸Example 1: loading="lazy" ➔ This delays the visibility of the image until the page loads. Only loads when the user is close to seeing the image. This can increase the page loading speed and enhance user experience. It can be particularly useful, especially when there are numerous large images on the page, especially when scrolling down.

🔸Example 2: loading="eager" ➔ This instructs the browser and process the image immediately. The user can see the image immediately, but the page loading time may increase. Especially on pages with large images or a large number of images.

14. async

The async attribute does not pause the processing of HTML content while downloading script files in the browser. When the script file is ready, it is processed when the download is complete.

<script src="example.js" async></script>

15. defer

The defer attribute allows the browser to continue HTML processing while downloading the script file. The script file is executed after processing the HTML content. The scripts loaded with defer are executed sequentially.

<script src="example.js" defer></script>

Conclusion

As a result, this article about 15 lesser-known but highly useful features of HTML5 aims to contribute to the more effective and efficient work of web developers. These features provide both novice developers with new information and help experienced developers improve their workflows. Exploring these deep features offered by HTML5 allows for web applications to be more powerful, accessible, and user-friendly.