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

Олег Дутченко

frontend

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

1883

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

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

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

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

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

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

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

contenteditable

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

hidden

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

multiple

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

poster

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

spellcheck

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

accept

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Фактически одна строчка кода превращает обычную ссылку в собиратель информации. При переходе пользователя по этой ссылке отправляется 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 — расшифровку аббревиатуры.

В некоторых случаях бывает очень полезно использовать для аббревиатур соответствующий тег. Плюс его, конечно же, можно в дальнейшем стилизовать в 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>

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

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

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

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

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