7 любопытных HTML- атрибутов, о которых вы, возможно, не знаете

Перевод статьи «7 interesting HTML attributes (you may not know)».

От редакции Techrocks. Мы периодически публикуем статьи с подборками интересных HTML-элементов или просто элементов, сгруппированных по определенной теме. Ну например…

Подборки интересных атрибутов встречаются гораздо реже (например, «Атрибуты элементов форм в HTML»).

Исправляем ситуацию:)


allow

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

«allow» переопределяет включение функций в iframe. Это способ сделать шаг вперед и оставить атрибуты allowfullscreen или allowpaymentrequest для legacy.

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

<!-- 
Страница в iframe сможет использовать камеру, 
акселерометр, гироскоп и геолокацию. Но она не сможет 
использовать микрофон или магнитометр.
-->
<iframe src="/url-to-load" 
        title="demo"
        width="700" 
        height="400"
        allow="accelerometer; camera; geolocation; gyroscope">
</iframe>

cite

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

От редакции Techrocks. У нас есть отдельная статья на тему оформления цитат — «Цитирование в HTML: выбираем теги правильно». Если кратко, то <blockquote> — это блочный элемент, использующийся для выделения цитаты на фоне остального контента, <q> предназначен для выделения цитат внутри текста.

Элементы <del> и <ins> используются для вывода изменений в документе (подсвечивается, что было удалено и что вставлено).

Атрибут cite в элементах <blockquote> и <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>!

В этих элементах datetime будет показывать время удаления или вставки текста. Дата должна быть указана в валидном формате. Строка времени — опциональна.

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

<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. Этот атрибут служит для повышения доступности таблицы. Он связывает ячейки таблицы с заголовками при помощи идентификаторов.

Обычно в таблицах бывают заголовки столбцов и/или заголовки строк, но в более сложных случаях заголовков для каждой ячейки может быть больше двух. В атрибуте headers нужной ячейки указывают список идентификаторов заголовков, относящихся к этой ячейке.

Атрибут headers полезно использовать в сложных таблицах, поскольку он дает контекст программам, читающим таблицу (например, речевым браузерам). Но поддержка этого атрибута неполная, так что используйте его с осторожностью.

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

<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

У тега <a> есть атрибут ping, указывающий URL, который будет вызван при клике по ссылке. По указанному адресу при клике будет выслано сообщение POST с содержимым «PING». Это нужно для отслеживания переходов по ссылке, сбора статистики и информации о посетителях и о том, как они пользуются сайтом.

Но тут есть большая проблема: этот атрибут не поддерживается Firefox, в результате большое количество пользователей остаются неучтенными.

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

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

poster

Когда разработчики добавляют видео на веб-страницу, они относительно часто допускают одну ошибку: вставляют картинку и заменяют ее на <video> при клике. Это не гибкое и не эффективное решение, поскольку видео не начнет загружаться, пока не появится на странице.

Тут пригодится атрибут poster. Сего помощью задается URL картинки, которая будет заменена на видео (когда оно начнет проигрываться). Вроде бы то же самое, но дает больше возможностей по управлению видео и его загрузкой.

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

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

[customscript]techrocks_custom_after_post_html[/customscript]

[customscript]techrocks_custom_script[/customscript]

Оставьте комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Прокрутить вверх