HTML: Семь интересных атрибутов

Атрибут allow

Атрибут allow определяет политику доступных возможностей iframe. Некоторые из возможных значений: accelerometer, fullscreen, microphone, USB...

allow переопределяет какая возможность будет включена в iframe. Это путь вперёд и атрибуты allowfullscreen или allowpaymentrequest оставшиеся в наследство.

Пример использования:

<!--
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

Это интересный атрибут для <blockquote>, но его также можно использовать в <de>, <ins> и <q> (встроенная версия цитаты).

Его значением будет URL, содержащий ссылку на онлайн-ресурс с цитируемым содержимым (или информацией для удаления/вставки в случае с <del> и <ins>).

Это не обязательный атрибут, но он может быть интересен если мы цитируем онлайн статью или документ.

Пример использования:

<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

Обычно datetime используется с тэгом <time>, но также его используют тэги <ins> и <del>!

Для тегов ins и del он будет указывать момент вставки/удаления и дата должна быть валидной с опциональным указанием времени.

Пример использования:

<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

Ячейка таблицы (<td> или <th>) может быть определена с разными заголовками (например, заголовки столбца и строки используются чаще всего), но в сложных таблицах их может быть больше. Атрибут headers будет содержать список id заголовков применимых к данной ячейке.

Этот атрибут полезен для сложных таблиц, поскольку обеспечивает контекст для браузера. Он может быть интересен вспомогательными технологиями или дополнительными возможностями. Но, к сожалению, его поддержка нестабильна. Используйте осторожно!

Пример использования:

<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

Тэг <input> поддерживает разные типы ввода, которые будут отображать разные клавиатуры на мобильных устройствах. Например, если вы укажите тип number — на мобильном устройстве откроется клавиатура только с цифрами.

<textarea> и тэги с атрибутом contenteditable могут получить аналогичный эффект при использовании глобального атрибута inputmode. Таким образом разработчики можете решить, какая клавиатура открывается, когда редактируемый элемент оказывается в фокусе.

Для атрибута inputmode существуют следующие значения: decimal, email, none (клавиатура не отображается), numeric, search, tel, text (по умолчанию), или url.

Пример использования:

<textarea inputmode="none" name="myTextarea"></textarea>

<div contenteditable inputmode="decimal"></div>

Атрибут ping

Атрибут ping тэга <a>, указывает URL который будет вызываться при клике на ссылку. ping так же может использоваться в area карты изображения.

Указанный URL получит POST сообщение с содержимым "PING", которое можно использовать для отслеживания переходов по ссылкам и информации о посетителях.

Основная проблема этого атрибута в том, что он не поддерживается браузером Firefox.

Пример использования:

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

Атрибут poster

Одна (относительно) распространённая ошибка совершаемая разработчиками при добавлении видео на страницу, — это вставка изображения и его замена на <video> после клика. Это не гибкий или эффективный метод, поскольку видео не начнёт загружаться, пока оно не размещено на странице.

Атрибут poster решает эту проблему. Его значение адрес ссылки на изображение, которое заменятся на видео при запуске. Всё выглядит точно так же, как в первом случае, но обеспечивает боле гибкий контроль над видео и его загрузкой.

Пример использования:

<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>