atr

5 атрибутов HTML, о которых вы не знали

Наши соц. сети: instagram, fb, tg

allow

Атрибут allow определяет доступ к возможностям iframe. Некоторые из возможных значений: акселерометр, полноэкранный режим, микрофон и тд. Атрибуты allowfullscreen или allowpaymentrequest остаются унаследованными.


❮iframe src = "/url-to-load"
title = "demo"
width = "700"
height = "400"
allow ="accelerometer; camera; geolocation; gyroscope"❯
❮/iframe❯

cite

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

Значением будет URL-адрес, содержащий онлайн-ресурс, в котором содержится ссылка в кавычках (или информация для вставки/удаления в случае ❮ins❯ и ❮del❯ соответственно). Это не обязательный атрибут, но он может быть интересен, если мы цитируем онлайн-статью или документ.


❮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 datetime будет указывать момент вставки / удаления и должна быть действительной датой с необязательной строкой времени.


❮p❯
  Мари любит читать книги, посещать новые места,
  ❮del datetime = "2010-07-10T19: 00"❯ слушаем BSB, ❮/del❯
  ❮ins datetime = "2020-11-08T12: 00"❯ программирование в HTML, ❮/ins❯
  и чашечку хорошего кофе.
❮/p❯

headers

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


❮таблица❯
  ❮caption❯ План на выходные ❮/caption❯
  ❮thead❯
    ❮tr❯
      ❮th❯ ❮/th❯
      ❮th id = "saturday"❯ суббота ❮/th❯
      ❮th id = "sunday"❯ воскресенье ❮/th❯
    ❮/tr❯
  ❮/thead❯
  ❮tbody❯
    ❮tr❯
      ❮td❯ ❮/td❯ ❮th id = "morning" colspan = "2"❯ Утро ❮/th❯
    ❮/tr❯
    ❮tr❯
      ❮th id = "hour08"❯ 8: 00-10: 00 ❮/th❯
      ❮td headers = "saturday morning hour08"❯ Футбольная тренировка ❮/td❯
      ❮td headers = "sunday morning hour08"❯ Чтение ❮/td❯
    ❮/tr❯
    ❮tr❯
      ❮th id = "hour10"❯ 10: 00–12: 00 ❮/th❯
      ❮td headers = "saturday morning hour10"❯ Баскетбольный матч ❮/td❯
      ❮td headers = "sunday morning hour10"❯ поздний завтрак ❮/td❯
    ❮/tr❯
  ❮/tbody❯
  ❮tbody❯
    ❮tr❯
      ❮td❯ ❮/td❯ ❮th id = "после полудня" colspan = "2"❯ после полудня ❮/th❯
    ❮/tr❯
    ❮tr❯
      ❮th id = "hour12"❯ 12: 00–14: 00 ❮/th❯
      ❮td headers = "суббота, полдень, час12"❯ Сиеста ❮/td❯
      ❮td headers = "sunday daily hour12"❯ Гольф ❮/td❯
    ❮/tr❯
    ❮tr❯
      ❮th id = "hour14"❯ 14: 00-18: 00 ❮/th❯
      ❮td headers = "суббота, полдень, hour14"❯ Вечеринка! ❮/td❯
      ❮td headers = "sunday daily hour14"❯ Подготовка к понедельнику ❮/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❯


Приятного кодинга!