HTML is a powerful language for creating web pages, and while most developers are familiar with commonly used HTML attributes, there are several lesser-known attributes that can provide additional functionality and enhance the user experience.

## 1. The `enterkeyhint` Attribute for Virtual Keyboards

When designing web forms for mobile devices, it’s important to consider the virtual keyboards that users interact with. The `enterkeyhint` attribute is a global attribute that can be applied to form controls or elements with the `contenteditable` attribute set to true. It assists users by providing hints to the virtual keyboard about the intended action associated with the "Enter" key. This attribute accepts values such as `enter`, `done`, `go`, `next`, `previous`, `search`, and `send`, allowing you to customize the hint based on the specific context of your application.

```html
<input type="text" enterkeyhint="done" />
```

## 2. Attributes for Custom Ordered Lists

While working with ordered lists `<ol>`, you can utilize several lesser-known attributes to customize the behavior of the numbering. These attributes include:

- The `reversed` attribute: It allows you to number the list items in reverse order, from high to low instead of the default low to high.
- The `start` attribute: It defines the number from which the list should start.
- The `type` attribute: It specifies whether to use numbers, letters, or Roman numerals for the list items.
- The `value` attribute: It enables you to set a custom number for a specific list item.

```html
<ol reversed>
  <li>List item...</li>
  <li>List item...</li>
  <li>List item...</li>
</ol>

<ol reversed start="20" type="1">
  <li>Typee: A Peep at Polynesian Life (1846)</li>
  <li>Omoo: A Narrative of Adventures in the South Seas (1847)</li>
  <li>Mardi: and aVoyage Thither (1849)</li>
  <li>Redburn: His First Voyage (1849)</li>
  <li value="100">White-Jacket; or, The World in a Man-of-War (1850)</li>
  <li>Moby-Dick; or, The Whale (1851)</li>
  <li>Pierre; or, The Ambiguities (1852)</li>
  <li>Isle of the Cross (1853 unpublished, and now lost)</li>
</ol>
```

## 3. The `decoding` Attribute for `<img>` Element

The `decoding` attribute allows you to provide a hint to the browser about how an image should be decoded. This attribute can be added to an `<img>` element and accepts three values: `sync`, `async`, and `auto`.

- `sync`: Decode the image synchronously, which is the default behavior.
- `async`: Decode the image asynchronously to avoid delaying the presentation of other content.
- `auto`: Let the browser use its default decoding method.

```html
<img src="/images/example.png" alt="Example" decoding="async" />
```

By specifying the appropriate decoding behavior, you can optimize the loading and rendering of images on your web page.

## 4. The `loading` Attribute for `<iframe>` Element

Similar to lazy loading images, the `loading` attribute can be applied to `<iframe>` elements to control when the iframe's content should be loaded. By setting the `loading` attribute to `lazy`, you can defer the loading of the iframe until it's about to enter the viewport. This helps improve performance by reducing the initial page load time.

```html
<iframe src="/page.html" width="300" height="250" loading="lazy"></iframe>
```

## 5. The `crossorigin` Attribute for Cross-Origin Resource Sharing (CORS)

When working with elements like `<img>`, `<audio>`, `<video>`, `<script>`, and `<link>`, you may come across the need for cross-origin resource sharing (CORS). The `crossorigin` attribute allows you to specify how the resource should be fetched in terms of CORS.

```html
<img
  src="https://example.com/image.jpg"
  crossorigin="anonymous"
  alt="Example Image"
/>
```

The attribute accepts two values: `anonymous` and `use-credentials`. Setting it to `anonymous` indicates that the resource should be fetched without including user credentials, while `use-credentials` indicates that the user credentials should be included.

## 6. The `disablepictureinpicture` Attribute for `<video>` Element

The `disablepictureinpicture` attribute can be applied to the `<video>` element to disable the Picture-in-Picture (PiP) feature. PiP allows videos to be displayed in a floating window, but if you want to prevent this behavior, you can simply add the attribute to the video element.

```html
<video src="example.mp4" disablepictureinpicture controls></video>
```

## 7. The `integrity` Attribute for Scripts

To ensure that external scripts haven’t been tampered with, you can make use of the `integrity` attribute. This attribute allows you to provide a cryptographic hash value that the browser can use to verify the integrity of the script file before executing it.

```html
<script
  src="script.js"
  integrity="sha256-Kx70Z9jzvYF0Eex8oO7w08="
  crossorigin="anonymous"
></script>
```

By including the `integrity` attribute with the appropriate hash value, you can add an extra layer of security to ensure the script's authenticity.

## Conclusion

In this article, we have explored a collection of lesser-known HTML attributes that can enhance your web development projects. From improving user interactions to optimizing resource loading, these attributes provide valuable functionalities that may not be widely known or utilized.

_If you found this helpful, consider [subscribing to my newsletter](https://upweb.dev) for weekly web development insights and updates. Thanks for reading!_