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

frontend
Аудио дорожка
285

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

Существует множество популярных атрибутов, которые верстальщики используют повсеместно:

  • href
  • hreflang
  • style
  • class
  • src
  • placeholder и другие

Все популярные атрибуты HTML мы детально разбираем и используем на курсе «Frontend разработка 2022. Junior верстальщик». Однако существует масса малоизвестных и редко используемых атрибутов в HTML, о которых многие даже не знают. Либо просто не используют их по другим причинам. А они, между прочим, могут оказаться весьма полезными в некоторых ситуациях.

Сегодня мы как раз таки рассмотрим эти малоизвестные атрибуты HTML, разберемся, когда и в каких случаях их стоит использовать, и каким образом они реально могут упростить жизнь начинающему и даже опытному верстальщику.

image_1

Атрибуты, о которых вы, возможно, даже не слышали

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

contenteditable

Этот глобальный атрибут позволяет редактировать содержимое элемента. Выглядит следующим образом:

image_2

hidden

Глобальный атрибут, своего рода «выключатель», который определяет, отображать определенный объект в окне браузера или нет. Например, с помощью этого тега можно скрывать панель управления плеером при воспроизведении видео.

image_3

multiple

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

image_4

poster

Атрибут, с помощью которого можно указать адрес изображения, которое будет отображаться на экране веб-видеоплеера в тот момент, пока видео загружается и не проигрывается. Атрибут поддерживает форматы GIF, PNG и JPEG. Если же вы не используете этот атрибут, браузер автоматически постарается «вытянуть» в качестве эскиза первый кадр из видео. 

image_5

spellcheck

Этот атрибут непосредственно указывает браузеру, нужно ли проверять правописание и грамматику в тексте или нет. Обычно его используют в полях форм <input>, <textarea>, чтобы в них браузер не «подсвечивал» незнакомые ему слова — имена пользователей, пароли и тому подобное. А главное — не срабатывало автоисправление, если оно включено.

image_6

accept

Атрибут, который устанавливает своего рода фильтр на форматы и типы файлов, которые пользователь может отправить через форму отправки на сайте. Например, запрещает загружать аудиофайлы в качестве аватарки в соцсети или GIF-анимацию вместо видеофайла на видеохостинг. 

image_7

Еще несколько малоизвестных, но крайне полезных атрибутов HTML

Давайте взглянем на еще несколько весьма непопулярных, но интересных и даже в некотором смысле необычных атрибутов HTML, которые применяются хоть и довольно редко, бывают полезными.

Расширенный выбор даты

Возможно, вы не знали, но HTML позволяет довольно гибко настраивать возможности выбора даты без дополнительной валидации. Для этого можно использовать input type="date", в котором поддерживаются атрибуты min, max и step. С их помощью можно очень легко и быстро установить ограничения на выбор даты непосредственно в HTML. Взгляните на следующий код:

image_8

Что мы сделали? Все просто: мы таким образом ограничили возможность выбрать дату в пределах одного месяца. Ничего сложного, но это работает:

image_9

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

image_10

То есть, мы сделали неактивными все другие дни кроме субботы. Выглядит это следующим образом:

image_11

Нестандартные атрибуты для тега <button>

Тег <button> создает на странице кликабельные кнопки. Как вы уже сами понимаете, к этому тегу могут применяться различные атрибуты — name, form, type и другие. Но есть среди этих атрибутов несколько весьма специфических, которые применяются редко, но тоже могут быть полезными:

  •     formaction — позволяет задать адрес, куда будут передаваться данные из формы сразу после нажатия кнопки
  •     formenctype — задает метод кодирования данных формы
  •     formmethod — указывает метод пересылки данных формы
  •     formnovalidate — отключает проверку формы на корректность

Что любопытно, схема в теге <button> при этом переопределяет и родительскую схему (из тега <form>).

image_12

Если вы пристально посмотрите на пример кода выше, то увидите, что хотя в родителе указана отправка на some-endpoint, кнопка Submit (как и нажатие Ввода) при этом отправляет GET-запрос на some-other-endpoint. В то же время валидация полей отключается.

Вообще атрибуты тега <button> позволяют создавать формы с условным поведением и очень гибко настраивать их работу. Рекомендуем более детально изучить как сам этот тег, так и его атрибуты — узнаете много полезного, что пригодится в дальнейшей работе.

Задействование цветовых схем вне CSS

Сейчас все больше сайтов использует цветовые схемы — светлые и темные темы. И вы можете легко сообщить браузеру о поддержке сайтом цветовых тем, чтобы он не вывозил на страницу мелкие назойливые элементы с дефолтными стилями (теми, которые «подтягиваются» из светлой темы).

Конечно, можно долго и муторно «ковырять» CSS-код, чтобы настроить каждый выбивающийся элемент, но это длительный и, откровенно говоря, раздражающий процесс.

image_13

Но ведь можно сделать все гораздо проще и эффективнее:

image_14

image_15

Сбор метрик непосредственно из ссылок

Относительно недавно появился еще один крайне интересный и полезный атрибут ping, с помощью которого можно собирать метрики из любых элементов со ссылками.

image_16

Фактически одна строчка кода превращает обычную ссылку в собиратель информации. При переходе пользователя по этой ссылке отправляется POST-запрос на эндпоинт для последующего сбора аналитики. В запросах используется Content-Type, Ping-From и Ping-To. Но что еще важнее — передаются в том числе user-agent, что может быть крайне полезно в некоторых случаях.

Бонус: несколько полезных HTML-тегов, которые вы не используете или используете неправильно

<q>

Этот тег вам наверняка знаком, как и <blockquote>. Оба тега фактически заключают текст в кавычки. Однако только <q> обозначает это как цитирование. Визуально вы не увидите никакой разницы в отображении текста. Но вот браузер и поисковые алгоритмы эту разницу увидят. Поэтому не стоит полагать, что <q> и <blockquote> — идентичные теги.

<i> и <b>

Эти два тега тоже знакомы каждому начинающему верстальщику. Однако с переходом на семантическую верстку многие оставили их в прошлом, отдавая предпочтение другим тегам — <em> и <strong>. Опять же, визуально в тексте разницы между  текстом с тегами <em>, <strong> и <i>, <b> не будет. Но если первые фактически обозначают акцентированный и еще сильнее акцентированный текст, то вторые имеют несколько другое значение. Тег <i> обозначает фрагмент, который имеет отдаленное отношение к контексту. В него обычно заключают термины, мысли и тому подобное. А тег <b> всего лишь меняет стилистику текста, не меняя при этом его семантического смысла.

<abbr>

Весьма полезный тег, который используется для аббревиатур. В нем же можно добавить атрибут title — расшифровку аббревиатуры.

image_17

В некоторых случаях бывает очень полезно использовать для аббревиатур соответствующий тег. Плюс его, конечно же, можно в дальнейшем стилизовать в CSS.

<time>

Казалось бы, стандартный и общеизвестный тег. Но мы все же решили дополнительно его упомянуть. Вы, должно быть, знаете, что в разных странах формат записи даты отличается. Например, нам привычен такой формат: 20.11.22. Но в США первым идет месяц, а не день, а в качестве разделителя вместо точки используется слэш: 11/20/22. А в Нидерландах вместо слэша прописывают дефис: 11-20-22.

К счастью, тег <time> позволяет задать дату в понятном для HTML-парсера формате, независимо от страны. Выглядит это следующим образом:

<time datetime=»2022-11-20″>20/11/22</time>

Также с помощью этого тега можно задать время в привычном нам 24-часовом формате вместо AM/PM:

<time datetime=»2022-11-20 22:00″>20/11/22 at 10 PM</time>

Это крайне полезно и удобно. Пользуйтесь!

<mark>

Весьма полезный тег, с помощью которого обычно выделяют текст в справочных целях. Самый простой пример — упоминание термина в статье, которая этот термин описывает. Таким образом создается акцентный элемент на странице. При этом он акцентный как для пользователя, так и для поисковых алгоритмов.

image_18

Вместо заключения

Надеемся, вы смогли извлечь что-то новое и полезное из нашей статьи, чем сможете пользоваться в своей дальнейшей работе верстальщика. Если это так, значит, мы стараемся не зря.

В любом случае помните, что HTML, CSS и веб-технологии в целом никогда не стоят на месте и постоянно развиваются. Одни атрибуты и теги устаревают и уходят в прошлое, другие появляются и стремительно набирают обороты, а третьи просто меняют свое значение. 

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

Курс "HTML5 + CSS3 + JS"

HTML5 + CSS3 + JS

Хочешь получить обучение от Никиты Лукашова?

На курсе научимся:

  • Верстать сайты и создавать интерфейсы
  • Освоим основы Photoshop для перевода дизайна в код
  • Расширим знания в разработке на HTML, CSS и JavaScript
  • Пополним ваше портфолио!