5 HTML-трюков, о которых никто не говорит

Original author: Anurag Kanoria
  • Translation

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

И, хотя существуют различные механизмы создания шаблонов, такие как Pug, вам всё же необходимо хорошо разбираться в HTML. На мой взгляд, лучше использовать возможности HTML, когда это возможно, вместо достижения той же функциональности с помощью JavaScript, хотя я признаю, что написание HTML может утомить.

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

1. Ленивая загрузка изображения

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

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

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

Этого легко добиться с помощью обычного HTML.

Всё, что вам нужно сделать, – это добавить свойство loading=«lazy» у тега img.

После добавления свойства ваш элемент должен выглядеть примерно так:

<img src="image.png" loading="lazy" alt="…" width="200" height="200">

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

2. Автокомплит

Получение подсказок прямо в строке, когда вы пытаетесь что-то найти, – действительно крутая фишка.

В наши дни автокомплит довольно распространен, и вы, должно быть, замечали его на таких сайтах, как Google и Facebook.

Вы можете использовать JavaScript для реализации автокомплита, установив прослушиватель событий поля ввода и затем сопоставлять искомые слова с предопределёнными вариантами.

Однако HTML также позволяет отображать набор предопределённых вариантов, используя тег <datalist>.

Помните, что атрибут ID этого тега должен совпадать с атрибутом list тега input.

<label for="country">Choose your country from the list:</label>

<input list="countries" name="country" id="country">

<datalist id="countries">

  <option value="UK">

  <option value="Germany">

  <option value="USA">

  <option value="Japan">

  <option value="India">

</datalist>

3. Picture

Вы когда-нибудь сталкивались с проблемой, когда изображения увеличивались не так, как вы ожидали? Я – много раз.

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

При изменении ширины viewport’a вы можете заметить, что некоторые изображения не масштабируются вверх и вниз, как ожидалось.

К счастью, HTML даёт разработчикам возможность довольно легко исправить это, используя тег <picture>, позволяющий добавлять несколько изображений, соответствующих разной ширине.

Ваш код будет выглядеть примерно так:

<picture>

  <source media="(min-width:768px)" srcset="med_flag.jpg">

  <source media="(min-width:495px)" srcset="small_flower.jpg">

  <img src="high_flag.jpg" alt="Flags" style="width:auto;">

</picture>

Как видите, мы указали минимальную ширину, при которой должно отображаться определённое изображение.

Этот тег очень похож на теги <audio> и <video>.

4. Базовый URL

Это один из моих любимых тегов при создании карты сайта.

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

Например, если я хочу указать URL-адрес на Twitter Илона Маска и Билла Гейтса, начало URL-адреса (домена) будет таким же, а то, что следует за ним, будет их соответствующими идентификаторами.

Обычно мне приходится дважды вставлять ссылку с одним и тем же доменным именем.

Однако в HTML есть тег <base>, который позволяет вам установить базовый URL-адрес, как показано ниже:

<head>

<base href="https://www.twitter.com/" target="_blank">

</head>

<body>

<img src="elonmusk" alt="Elon Musk">

<a href="BillGates">Bill Gate</a>

</body>

Приведённый выше код сгенерирует изображение с ссылкой на “https://www.twitter.com/elonmusk” и ссылочный тег, перенаправляющий на “https://www.twitter.com/billgates".

Тег <base> должен иметь либо “href”, либо “target”-атрибуты.

5. Обновление документа

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

Вы могли заметить эту фичу, когда открывали определённые сайты и видели что-то вроде «Вы будете перенаправлены через 5 секунд».

Это поведение встроено в HTML, и вы можете использовать его с помощью тега <meta> и установки http-Equiv=«refresh» в него:

<meta http-Equiv="refresh" content="4; URL='https://google.com'/>

Здесь свойство content указывает время в секундах, после которого должно произойти перенаправление.

Стоит отметить, что, хотя Google утверждает, что относится к этой форме редиректа так же, как и к другим редиректам, использовать этот тип редиректов неразумно, если только это действительно не нужно.

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

Заключение

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

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

Таких советов и приёмов много, помимо тех, которыми я поделился с вами, и, безусловно, их стоит попробовать в своём проекте.

Если вы планируете использовать JavaScript, обязательно ознакомьтесь с моим недавним постом, где обсуждаются некоторые советы, которые могут сэкономить ваше время.

5 современных советов и приёмов JavaScript для экономии времени. Снизьте рабочую нагрузку и напишите чистый код с помощью этих советов по JavaScript.

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

Узнайте, как прокачаться в других специальностях или освоить их с нуля:

Другие профессии и курсы
SkillFactory
Школа Computer Science. Скидка 10% по коду HABR

Comments 17

    +5
    Другими словами, изображение загружается, когда пользователь скроллит страницу и изображение становится видимым, в противном случае оно не загружается.
    Те кто заходят с медленного интернета очень хотят сильно бить тех кто так подгружает изображения на сайтах. Потому как открываешь ссылку в новом табе, в надежде что картинки загрузятся пока читаешь текущий материал, а оно так не срабатывает…
      –3
      Это ложное утверждение, вы потому и можете наблюдать визуально долгую загрузки картинок, потому что они не заняли доступ к текстовому контенту, который вы уже читаете. Вы в любом случае в плюсе.

      Подгружаются картинки не сразу по скролу, а сколл + плюс один экран. То есть если вы читаете что-то, то у вас все погрузится, а если нет, то пардон, вы утверждаете, что уменьшая ваш трафик, ваш интернет от этого замедляется?

      lazy это офигенная тема, которая сэкономит огромное количество ненужного трафика. С вашим стилем серфинга вам нужно выкачивалку сайтов иметь или поставить скорее всего какой нибудь параметр в браузере чтобы это отключить если так хочется.
        +2
        Это ложное утверждение, вы потому и можете наблюдать визуально долгую загрузки картинок, потому что они не заняли доступ к текстовому контенту, который вы уже читаете.
        Я читаю ДРУГУЮ страницу, пока у меня в фоне грузятся несколько новых. И когда я перейду на вкладку с новым материалом, я хочу увидеть его там в готовом виде, возможно я и читать его не буду, а просто быстро пролистаю в поисках нужной иллюстрации или поиском по странице сразу перейду к фрагменту с ключевым словом.
          0
          Подобный паттерн поведения был сломлен во времена ipad 2. Он был просто не способен грузить страницы в неактивных вкладках. Да и андройд подобное не умел в те времена. А нокия умела. Не думал, что в 2021 кто-то так делает
            +2
            Не думал, что в 2021 кто-то так делает
            Это крайне удобный паттерн для поиска информации — открывается ряд страниц по теме, а потом по ним ищется/сравнивается информация. Собственно паттерн намного древнее самого интеренета — подобным же образом собирали информацию при подготовке статей и рефератов и сотню лет назад.
              +4

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


              И тоже бесит если надо ждать подгрузку.

              +2
              В firefox
              1) about:config
              2) dom.image-lazy-loading.enabled
              3) False
                0
                Вы про ленивую загрузку картинок или про загрузку страницы? В случае картинок у вас поиск не отказывается искать по контенту без картинок на странице.
                  0

                  Вы как будто из 2000го года.

                0

                Представьте себе страницу, на которой слайдер… Три слайдера, в каждом по 5 красивых больших фотографий. Фото дома, 3д-модель и чертежи, например.


                Без ленивой загрузки вы будете грузить 15 картинок всегда. А так — только при прокрутке нужного слайдера. Другое дело, что в слайдерах это обычно уже делается js, но в целом фича наверняка кому-нибудь пригодится.

                  0
                  А так — только при прокрутке нужного слайдера.
                  И таким образом прокрутка этого слайдера на медленном соединении превращается в дикую боль, когда приходится ждать на каждой картинке, особенно если нет превью и не знаешь сколько там картинок всего и есть ли реально тебе нужные.
                    0
                    А так ждать не приходится чтоли? Я лучше подожду конретную мне картинку, чем подожду кучу картинок, которые я не собираюсь смотреть, особенно на плохом интернете мне картинки точно не в приоритете.
                      0
                      А так ждать не приходится чтоли?
                      Нет, потому как пока оно само грузится без моего участия, я могу заниматься другими делами, а потом вернуться к странице и просмотреть содержимое, даже если это через 10 минут загрузится. А вот ждать на КАЖДОЙ картинке — это действительно напрягает, тем более, что нормальные превью реализованы редко и часто не известно какая именно из кучи картинок нужна.
                      А смотреть без картинок тоже не всегда вариант, часто на них иллюстрируются описанные текстом принципы и без них от одного текста мало толку.
                        0
                        Ждать вам все равно приходится, просто вы подменили свое ожидание параллельной работой. В вашем случае при плохом интернете может просто все сброситься по таймауту. На это тоже нельзя расчитывать.
                0

                Никакая ленивая загрузка картинок ненужна никому если всё по уму сделано!
                Вот статья на сайте:
                https://www.babai.ru/articles/persivald.html
                Вот PageSpeed Insights для мобильных:
                image


                21 картинка общим весом 562Kb. Проверял сам — ни на каких "старых" устройствах с "плохим" интернетом никаких проблем нет! Кроме того сделаны и amp-страница от Гугл и турбо-страница от Яндекс для этой статьи на которые придут из поиска.


                Для чего здесь могла бы быть нужна эта ленивая загрузка картинок ?

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

                  Only users with full accounts can post comments. Log in, please.