14.04.2026 09:01
melnik909 12 13000 Источник

Привет, Хабр.

Я часто рассказываю про CSS, потому что очень сильно люблю этот язык. И хочу, чтобы у вас с ним не было проблем. Но я совсем мало внимания уделяю HTML. А он тоже прекрасен и полезен!

Сегодня буду исправляться. Я собрал список полезных фич HTML. Большинство из них почему-то используются очень ограниченно. Хотя они могут помочь вам сделать интерфейсы проектов более дружелюбными к пользователям.

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

Давайте посмотрим, что я вам подготовил.

Атрибут fetchpriority

Сегодняшние веб-приложения — это огромнейший набор ресурсов. Есть важные, а есть менее приоритетные. HTML даёт нам возможность управлять приоритетом загрузки ресурсов с помощью атрибута fetchpriority. Мы можем использовать его для элементов img, link, script и т.д.

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

<body>
  <img src="carousel-1.webp" fetchpriority="low" alt="">
  <img src="carousel-2.webp" fetchpriority="low" alt="">
</body>

Или напротив, для важных изображений можно использовать значение high, и они будут загружены с наивысшим приоритетом.

<body>
  <img src="hero-screen.webp" fetchpriority="high" alt="">
</body>

Атрибут decoding

В контексте оптимизации ресурсов очень редко используется атрибут decoding. Хотя он может помочь оптимизировать отображение изображений.

В чём дело: после того, как браузер получает изображение, ему нужно перевести байты в пиксели, т.е. провести декодирование. Мы можем помочь браузеру, подсказав приоритет изображений.

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

<body>
  <img src="hero-screen.webp" decoding="async" alt="">
</body>

Или наоборот, можно попросить отобразить с наивысшим приоритетом, объявив атрибут со значением sync.

<body>
  <img src="hero-screen.webp" decoding="sync" alt="">
</body>

Атрибут lang

Мы все добавляем атрибут lang для элемента html, чтобы браузеры поняли основной язык страницы. Но это не единственная польза от него.

Иногда в контенте веб-страницы могут встречаться слова на языке, отличающемся от основного. Отличным примером являются статьи на сайте Википедия. Мы будем рассматривать текст о шахматной федерации ФИДЕ.

<p>
  Междунаро́дная ша́хматная федера́ция (фр. Fédération Internationale des Échecs) — международная спортивная организация, объединяющая национальные шахматные федерации.
</p>

В тексте используется французское название «Fédération Internationale des Échecs». Как раз для таких случаев мы тоже можем использовать атрибут lang.

<p>
  Междунаро́дная ша́хматная федера́ция (фр. <span lang="fr">Fédération Internationale des Échecs</span>) — международная спортивная организация, объединяющая национальные шахматные федерации.
</p>

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

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

Атрибут inert

Представьте, что вам нужно сделать неактивные интерактивные элементы в определённой области веб-страницы. Например, ссылки или кнопки. Как бы вы это сделали?

К сожалению, по моему опыту большинство используют атрибут disabled для элементов button и удаляют атрибут href для элементов a.

<body>
  <div class="awesome-block">
    <a>Неактивная ссылка</a>
    <a>Неактивная ссылка</a>
    <button type="button" disabled>Неактивная кнопка</button> 
    <button type="button" disabled>Неактивная кнопка</button>
  </div>
</body>

Можно без этого! Вам нужно просто добавить атрибут inert для их общего родительского элемента. В результате ссылки и кнопки перестанут быть интерактивными. Пользователи не смогут взаимодействовать с ними. Ни кликнуть, ни скопировать. Вообще никак!

<body>
  <div class="awesome-block" inert>
    <a href="#some-section">Неактивная ссылка</a>
    <a href="#some-section">Неактивная ссылка</a>
    <button type="button">Неактивная кнопка</button> 
    <button type="button">Неактивная кнопка</button>
  </div>
</body>

Атрибут autocapitalize

Мне грустно видеть, что многие разработчики не уделяют должного внимания первому вводимому символу. Например, если для поля ввода электронной почты используется элемент input с атрибутом type и значение text, то браузер предложит пользователю начать ввод с заглавной буквы.

<body>
  <form>
    <label for="auth">Номер телефона или почта</label>
    <input id="auth" type="text">
    <button>Отправить</button>
  </form>
</body>

Хотя большинство электронных почт начинается со строчной буквы. По этой причине давайте начнём использовать атрибут autocapitalize.

<body>
  <form>
    <label for="auth">Номер телефона или почта</label>
    <input id="auth" type="text" autocapitalize="off">
    <button>Отправить</button>
  </form>
</body>

Советуя этот атрибут, я часто сталкиваюсь с контраргументом: «А если электронная почта начинается с заглавной буквы?». В общем, если у вас есть такие же сомнения, то не спешите. У меня есть отличный довод.

Если вы используете значение email для атрибута type, то браузеры предлагают пользователям клавиатуру, на которой также отображены строчные буквы. Разница между этим вариантом и атрибутом autocapitalize заключается только в отображении специальных символов.

Атрибут autofocus

Автоматический перенос фокуса — достаточно удобная штука, если правильно реализована. Взять, к примеру, форму авторизации на сайте GitHub. Если вы откроете ссылку, то сможете сразу начать ввод данных. Круто же!

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

<body>
  <form>
    <label for="login_field">Username or email address</label>
    <input type="text" id="login_field" autofocus="autofocus">
    <div class="position-relative">
      <label for="password">Password</label>
      <input type="password" id="password">
      <input type="submit" value="Sign in">
      <a href="/password_reset">Forgot password?</a>
    </div>
  </form>
</body>

Конечно, не все формы подходят для использования атрибута autofocus. Он хорош тогда, когда однозначно понятен контекст. Так что лучше вместе с дизайнером поработать над своими формами. Тогда результат будет лучше.

Атрибут name со значением "theme-color" для элемента meta

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

Для демонстрации я сделаю панель пурпурной, задав цвет #800080.

<head>
  <meta name="theme-color" content="#800080">
<head>

Атрибут spellcheck

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

Для этого нужно использовать атрибут spellcheck со значением false.

<body>
  <form class="form">
    <label for="login">Никнейм</label>
    <input id="login" type="text" spellcheck="false" value="melink_909">
    <button>Отправить</button>
  </form>
</body>

Только у меня есть просьба. Пожалуйста, не отключайте везде автопроверку. Я постоянно делаю опечатки. Без неё мне будет совсем сложно. Спасибо.

Атрибут translate

В браузерах есть функция перевода контента на другой язык. Например, с английского на русский. Я ей пользуюсь довольно часто и заметил проблему. Переводчики переводят всё буквально.

В итоге это приводит к тому, что я вижу смешные названия компаний или матерюсь, потому что сложно понять контент. Продемонстрирую, что имею в виду на примере фразы «Свойство padding».

<body>
  <!-- фраза будет переведена так: «Свойство заполнения» -->
  <p>The padding property</p> 
</body>

Решить такую проблему может атрибут translate. С помощью него можно запретить переводить отдельные фразы. Для этого нужно объявить его со значением no.

<body>
  <!-- фраза будет переведена так: «Свойство padding» -->
  <p>Свойство <span  translate="no">padding</span></p> 
</body>

Атрибут hidden

Меня очень сильно удивляет, что многие фронтендеры скрывают и показывают элемент, добавляя и удаляя самостоятельно свойство display со значением none. Есть же атрибут hidden.

Если вы добавите его к элементу, то у него автоматически появится свойство display со значением none.

<body>
   <dialog hidden>
     <!-- здесь содержимое модального окна -->
   </dialog>
</body>

Заключение

Давайте подведём итог. В этой статье мы рассмотрели:

  • атрибут fetchpriority, указывающий приоритет ресурсов при загрузке веб-страницы;

  • оптимизацию отрисовки изображений благодаря атрибуту decoding;

  • где может быть ещё полезен атрибут lang;

  • способ отключения разных интерактивных элементов одним атрибутом inert;

  • атрибут, позволяющий улучшить начало ввода данных пользователем;

  • добавление автоматического переноса пользовательского фокуса с помощью атрибута autofocus

  • кастомизацию поисковой панели браузеров на мобильных устройствах элементом meta;

  • как использовать атрибут spellcheck для встроенной в браузер проверки орфографии;

  • возможность отменить перевод конкретной фразы с помощью атрибута translate;

  • атрибут hidden, скрывающий элемент с помощью свойства display со значением none.

Вот такой список HTML-фич у меня получился. Надеюсь, вы нашли что-то полезное для себя и внедрите в свои проекты.

Ещё мне интересно будет узнать, что я упустил. Поделитесь, пожалуйста, в комментариях своими HTML-лайфхаками, которые вы считаете полезными.

На этом всё. Спасибо за чтение!

P. S. Помогаю больше узнать про CSS и дружелюбные интерфейсы в своих закрытых ТГ-каналах CSS isn't magic и UX + Dev = a11y. Присоединяйтесь. Как вступить, написано в профиле.

© 2026 ООО «МТ ФИНАНС»

Комментарии (12)


  1. monochromer
    14.04.2026 10:56
    #29827450

    Меня очень сильно удивляет, что многие фронтендеры скрывают и показывают элемент, добавляя и удаляя самостоятельно свойство display со значением none. Есть же атрибут hidden.

    Если в CSS для элемента будет задан, скажем, display: flex, то работать этот атрибут не будет.


    1. EvilEngeneer
      14.04.2026 10:56
      #29834018

      Да походу любой display будет переписывать свойство. Например, display: block.


  1. meowpointerexception
    14.04.2026 10:56
    #29827626

    Спасибо за обзор

    <!-- фраза будет переведена так: «Свойство padding» -->

    <p>Свойство <span translate="yes">padding</span></p>

    Должно быть translate=no


    1. melnik909 Автор
      14.04.2026 10:56
      #29827814

      спасибо!


  1. for7raid
    14.04.2026 10:56
    #29828474

    Регистр в адресе электронной почты не имеет значения, так же как и точка (.), и вроде бы ещё и тире. Vasa5@pupkin.su тоже самое что и vasa.5@pupkin.su


    1. vanxant
      14.04.2026 10:56
      #29829408

      нет, зависит от сервера. Особенно точка. Гмейл всё схавает, а чего подревнее - не факт, не факт.


      1. vladkorotnev
        14.04.2026 10:56
        #29831082

        Мне и на гмейл с точкой не приходит, что интересно


        1. vanxant
          14.04.2026 10:56
          #29831278

          Да, точно, гмейл считает точку валидным символом. Это у кого-то из наших можно втыкать точки в адрес в любых количествах.

          Зато гмейл игнорирует знак + и всё, что после него, что позволяет делать трекинг утечек емейла.


          1. serafims
            14.04.2026 10:56
            #29835814

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


    1. VadimBr
      14.04.2026 10:56
      #29832416

      Что говорит стандарт

      Email‑адрес состоит из двух частей: локальной части (до @, например user.name) и домена (после @, например gmail.com).

      • По общепринятым стандартам (RFC, современные практики) адреса электронной почты регистронезависимы: User.Name@example.com и user.name@example.com считаются одним и тем же адресом.

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

      Точка (.) в email

      • Символ точка разрешён в локальной части, но не может быть первым/последним символом и не может идти дважды подряд (.example@... или example..name@... — некорректно).

      • Однако значение точки определяет именно почтовый сервис:

        • Gmail спокойно игнорирует точки: john.smith@gmail.com и johnsmith@gmail.com — один и тот же ящик.

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

      Тире и другие символы

      • Символ - (дефис/тире) разрешён в адресе (обычно в локальной части или в домене) и не является «нулевым» символом, как точка в Gmail: user-name@example.com и username@example.com — могут быть разными адресами, если сервер так их интерпретирует.

      • Разрешены буквы, цифры и некоторые спецсимволы (например ._+-=% и др., в зависимости от формата), но точные правила немного различаются у разных сервисов


  1. domix32
    14.04.2026 10:56
    #29828626

    Семантический веб конечно хорошо, но вот живьём ещё ни разу не встречал, чтобы кто-то блоки с иностранными текстами действительно оборачивал в lang и translate. Особенно учитывая, что половина таких текстов генерируется из какого-нибудь markdown файла. Сколько тех аттрибутов у этой же хабрастатьи, например?


  1. vanxant
    14.04.2026 10:56
    #29829426

    На вскидку:

    Атрибут lang кроме того влияет на проверку правописания (тот самый spellcheck) и на переносы (css свойство hyphens: auto). В-общем, маст хэв.

    Упоминая про fetchpriority, странно не сказать про loading=lazy (и возможность его убрать жабаскриптом сразу после загрузки)

    input type=email добавляет на клавиатуру собаку (@), обычно вместо запятой. Тоже оч. удобно.

    Атрибут inert ну такое, именно для форм не подходит, потому что подразумевает user-select: none (невозможность выделить и скопировать текст). Это скорее для всяких украшательств, технических оверлеев, попандеров и прочего, что в принципе не должно реагировать на дом-события