Picture of a person using a computer with the title “SEVEN INTERESTING <HTML> ATTRIBUTES (that you may not be using)

7 interesting HTML attributes (you may not know)

allow

“allow” redefines how features are included in the iframe. It is the way moving forward and leaves the attributes allowfullscreen or allowpaymentrequest for legacy.

Example of use:

<!-- 
The page in the iframe will be able to use the camera,
accelerometer, gyroscope, and geolocation; but it won't be
able to use the microphone or the magnetometer, for example.
-->
<iframe src="/url-to-load"
title="demo"
width="700"
height="400"
allow="accelerometer; camera; geolocation; gyroscope">
</iframe>

cite

The value will be an URL containing an online resource in which contains the quoted reference (or the insertion/deletion information in the case of <ins> and <del> respectively).

It is not a required attribute, but it can be interesting if we are citing an online article or document.

Example of use:

<blockquote cite="https://dev.to/alvaromontoro/don-t-just-practice-coding-n0d">
<p>
Coding is fundamental for a developer, but there's more
to it than just that: soft skills are essential too!
Actually, social and communication skills are almost as
critical and not as easy to master.
</p>
</blockquote>

datetime

For ins and del, the datetime will indicate the moment of the insertion/deletion and must be a valid date with an optional time string.

Example of use:

<p>
Marie enjoys reading books, visiting new places,
<del datetime="2010-07-10T19:00">listening to BSB,</del>
<ins datetime="2020-11-08T12:00">programming in HTML,</ins>
and a nice cup of coffee.
</p>

headers

This attribute is useful in complex tables as it provides context to machines. It could be interesting for assistive technologies or augmented experiences, but, unfortunately, its support is spotty. So use with caution!

Example of use:

<table>
<caption>Weekend plan</caption>
<thead>
<tr>
<th></th>
<th id="saturday">Saturday</th>
<th id="sunday">Sunday</th>
</tr>
</thead>
<tbody>
<tr>
<td></td><th id="morning" colspan="2">Morning</th>
</tr>
<tr>
<th id="hour08">8:00-10:00</th>
<td headers="saturday morning hour08">Soccer practice</td>
<td headers="sunday morning hour08">Reading</td>
</tr>
<tr>
<th id="hour10">10:00-12:00</th>
<td headers="saturday morning hour10">Basketball game</td>
<td headers="sunday morning hour10">Brunch</td>
</tr>
</tbody>
<tbody>
<tr>
<td></td><th id="afternoon" colspan="2">Afternoon</th>
</tr>
<tr>
<th id="hour12">12:00-14:00</th>
<td headers="saturday afternoon hour12">Siesta</td>
<td headers="sunday afternoon hour12">Golf</td>
</tr>
<tr>
<th id="hour14">14:00-18:00</th>
<td headers="saturday afternoon hour14">Party!</td>
<td headers="sunday afternoon hour14">Monday readiness</td>
</tr>
</tbody>
</table>

inputmode

<textarea> and contenteditable elements can get a similar effect by using the global attribute inputmode. So developers can decide what type of keyboard opens when the editable element is focused.

The inputmode property can have the values: decimal, email, none (no keyboard displayed on focus), numeric, search, tel, text (default), or url.

Examples of use:

<textarea inputmode="none" name="myTextarea"></textarea><div contenteditable inputmode="decimal"></div>

ping

The URL would get a POST message with the content “PING” (literally), which can be used for tracking purposes and provide stats and information about the visitor and how they used the site.

One big problem with this attribute is that Firefox does not support it, which leaves out a good number of users.

Example of use:

<a href="https://twitter.com/alvaro_montoro" ping="/url-stats.php">
Check my twitter profile
</a>

poster

The poster attribute would be the way to go. It will be the URL of an image, replaced when the video starts playing. It looks the same, but it provides more control over the video and how it is loaded.

Example of use:

<video controls poster="link-to-poster-image.jpg">
<source src="link-to-video.mp4" type="video/mp4">
<source src="link-to-video.webm" type="video/webm">
Sorry, your browser doesn't support embedded videos.
</video>

Originally published at https://dev.to on February 25, 2021.

Full-Stack Software Engineer, Mobile Developer, Web technologies enthusiast. CSS aficionado. Twitter: @alvaro_montoro