[Перевод] 5 HTML-трюков, о которых никто не говорит15.03.2021 01:18
Все веб-разработчики широко используют HTML, независимо от того, какой фреймворк или серверный язык используется. Фреймворки и языки программирования могут приходить и уходить, но HTML никуда не денется. Но, несмотря на такое широкое использование, всё ещё есть теги и свойства, о которых большинство разработчиков не знают.
И, хотя существуют различные механизмы создания шаблонов, такие как Pug, вам всё же необходимо хорошо разбираться в HTML. На мой взгляд, лучше использовать возможности HTML, когда это возможно, вместо достижения той же функциональности с помощью JavaScript, хотя я признаю, что написание HTML может утомить.
Несмотря на то что многие разработчики ежедневно используют HTML, они не пытаются оттачивать свой навык и поэтому не применяют некоторые из редко обсуждаемых фичей HTML. Специально к старту нового потока курса по веб-разработке, делимся материалом в котором приведены 5 тегов и атрибутов HTML, которые вам следует знать.
1. Ленивая загрузка изображения
Ленивая загрузка изображений может повысить производительность и скорость отклика вашего сайта.
Ленивая загрузка предотвращает немедленную загрузку изображений, которые на самом деле и не нужны. Как правило, изображение начинает загружаться, когда вы скроллите страницу и приближаетесь к нему.
Другими словами, изображение загружается, когда пользователь скроллит страницу и изображение становится видимым, в противном случае оно не загружается.
Этого легко добиться с помощью обычного HTML.
Всё, что вам нужно сделать, — это добавить свойство loading=«lazy» у тега img.
После добавления свойства ваш элемент должен выглядеть примерно так:
Вы можете получить некоторое представление о байтах, которые вы сэкономите с помощью этого трюка, используя инструмент Google Lighthouse.
2. Автокомплит
Получение подсказок прямо в строке, когда вы пытаетесь что-то найти, — действительно крутая фишка.
В наши дни автокомплит довольно распространен, и вы, должно быть, замечали его на таких сайтах, как Google и Facebook.
Вы можете использовать JavaScript для реализации автокомплита, установив прослушиватель событий поля ввода и затем сопоставлять искомые слова с предопределёнными вариантами.
Однако HTML также позволяет отображать набор предопределённых вариантов, используя тег
Помните, что атрибут ID этого тега должен совпадать с атрибутом list тега input.
3. Picture
Вы когда-нибудь сталкивались с проблемой, когда изображения увеличивались не так, как вы ожидали? Я — много раз.
Обычно это происходит, когда вы пытаетесь создать сайт галереи или используете большое изображение и отображаете его в виде миниатюры.
При изменении ширины viewport«a вы можете заметить, что некоторые изображения не масштабируются вверх и вниз, как ожидалось.
К счастью, HTML даёт разработчикам возможность довольно легко исправить это, используя тег , позволяющий добавлять несколько изображений, соответствующих разной ширине.
Ваш код будет выглядеть примерно так:
Как видите, мы указали минимальную ширину, при которой должно отображаться определённое изображение.
Этот тег очень похож на теги
4. Базовый URL
Это один из моих любимых тегов при создании карты сайта.
Этот тег пригодится, когда у вас есть много ссылочных тегов, перенаправляющих на определённый URL-адрес, и все URL-адреса начинаются с одного и того же базового адреса.
Например, если я хочу указать URL-адрес на Twitter Илона Маска и Билла Гейтса, начало URL-адреса (домена) будет таким же, а то, что следует за ним, будет их соответствующими идентификаторами.
Обычно мне приходится дважды вставлять ссылку с одним и тем же доменным именем.
Однако в HTML есть тег , который позволяет вам установить базовый URL-адрес, как показано ниже:
Приведённый выше код сгенерирует изображение с ссылкой на «https://www.twitter.com/elonmusk» и ссылочный тег, перенаправляющий на «https://www.twitter.com/billgates».
Тег должен иметь либо «href», либо «target»-атрибуты.
5. Обновление документа
Если вы хотите перенаправить пользователя на другую страницу после периода бездействия или даже сразу, вы можете легко это сделать, используя простой HTML.
Вы могли заметить эту фичу, когда открывали определённые сайты и видели что-то вроде «Вы будете перенаправлены через 5 секунд».
Это поведение встроено в HTML, и вы можете использовать его с помощью тега и установки http-Equiv=«refresh» в него:
Узнайте, как прокачаться в других специальностях или освоить их с нуля:
Bill Gate
