DEV Community

loading...
Cover image for 7 interesting HTML attributes (you may not know)

7 interesting HTML attributes (you may not know)

alvaromontoro profile image Alvaro Montoro ・5 min read
  1. allow in <iframe>
  2. cite in <blockquote> (and <del>, <ins>, or <q>)
  3. datetime in <ins> and <del>
  4. headers in <th> and <td>
  5. inputmode in <textarea> or with "contenteditable"
  6. ping in <a>
  7. poster in <video>

allow

The allow attribute defines a policy with the features available within the iframe. Some of the values that it can have: accelerometer, fullscreen, microphone, USB...

"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>
Enter fullscreen mode Exit fullscreen mode

cite

This is an interesting attribute for <blockquote>, but it can also be used in <del>, <ins>, or <q> (the inline version of a quote).

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>
Enter fullscreen mode Exit fullscreen mode

datetime

It is common to use datetime with <time>, but also the <ins> and <del> elements use it!

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>
Enter fullscreen mode Exit fullscreen mode

headers

A table cell (<td> or <th>), can be defined by different headers (e.g., the column and row headers are the most common), but in complex tables, there may be more than just those two. The headers attribute will contain a list of the headers' IDs that apply to a given cell.

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>
Enter fullscreen mode Exit fullscreen mode

inputmode

The <input> tag has different types that will trigger different keyboard inputs on mobile. For example, if you pick the type "number" when the keyboard opens on mobile, it will open with only numbers.

<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>
Enter fullscreen mode Exit fullscreen mode

ping

The <a> tag has the ping attribute, which specifies a URL that will be called when the link is clicked. "ping" can also be used in an area inside an image map.

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>
Enter fullscreen mode Exit fullscreen mode

poster

One (relatively) common mistake developers make when adding a video to a webpage is having an image and replacing it with the <video> once clicked. This is not flexible or efficient as the video won't start loading until it is placed on the page.

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>
Enter fullscreen mode Exit fullscreen mode

Discussion (8)

pic
Editor guide
Collapse
ninofiliu profile image
Nino Filiu • Edited

Awesome, didn't know about any of them!

I would have liked to know the extent of their impact though - not only browser support, but things like SEO impact of the the cite attribute, or if Google uses datetime to compute one of these "search summary boxes" or whatever it's called

x

Of course these are much harder questions to answer but if anybody has pointers, shoot them my way!

Collapse
joebobmiles profile image
Joseph R Miles

Those summary boxes specifically use Schema.org structured data embedded in websites. If you want better information on Schema.org structured data, I'd recommend starting out with the Google developer documentation on the subject.

Collapse
alvaromontoro profile image
Alvaro Montoro Author

If you want a small but cool project to practice microdata and Schema.org, check my other post about building an interactive version of a resume with HTML and CSS πŸ˜‰

Collapse
alvaromontoro profile image
Alvaro Montoro Author

Apart from ping that is not supported by Firefox, the rest of the attributes work across the board (even inputmode on Firefox, even when caniuse.com says it doesn't).

From the SEO perspective, these attributes provide additional semantics to the code, which should be something positive for a search engine, but I don't know how much the search engines value them. In the case of cite, the search engines will most likely crawl and index the destination page.

Collapse
sirseanofloxley profile image
Sean Allin Newell

ping is being used to track ppl πŸ‘€ FF is trying to curtail that.

Collapse
alvaromontoro profile image
Alvaro Montoro Author

The whole purpose of ping is for tracking and analytics. I agree with the basic premise from Firefox to block it for privacy/security concerns, but imo it would be better to enforce a same-origin policy instead.

Collapse
ra1nbow1 profile image
Matvey Romanov

Pretty useful tags in huge and complicated projects. Thanks a lot

Collapse
zippytyro profile image
Shashwat Verma

great post, didn't knew about ping and inputmode