5 HTML-трюків

Джерело фото: https://www.udacity.com/blog/wp-content/uploads/2020/06/HTML_Blog-scaled.jpeg.webp

Усі веб-розробники широко використовують мову HTML, незалежно від того який фреймворк або серверна мова використовується. Фреймворки та мови програмування можуть приходити та відходити, але мова HTML нікуди не дінеться. Але, незважаючи на таке широке використання, все ще є теги та властивості, про які більшість розробників не знають.

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

Незважаючи на те, що багато розробників щодня використовують HTML, вони не намагаються відточувати свою навичку і тому не застосовують деякі з фіч HTML, що рідко обговорюються.

1. Ліниве завантаження зображення

Ліниве завантаження зображень може підвищити продуктивність та швидкість відображення вашого сайту. Ліниве завантаження запобігає негайному завантаженню зображень, які насправді не потрібні. Як правило, зображення починає завантажуватися, коли ви скролите сторінку і наближаєтесь до нього. Іншими словами, зображення завантажується, коли користувач скролить сторінку і зображення стає видимим, інакше воно не завантажується. Цього легко досягти за допомогою звичайного HTML.

Все, що вам потрібно зробити, - це додати властивість loading="lazy" у тег img.
Після додавання властивості ваш елемент має виглядати приблизно так:

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

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 — досить потужні інструменти, і ви можете створювати фантастичні веб-сайти, використовуючи їх. Однак, незважаючи на інтенсивне використання цих двох мов, багато розробників не особливо захоплюються ними. Таких порад і прийомів багато, крім тих, якими я поділився з вами, і, безумовно, варто спробувати їх у своєму проекті. Щоб навчитися чогось і опанувати цю навичку, потрібен час, відданість справі і практика, і HTML — не виняток.

Джерело: http://surl.li/flwxl
Переклад українською мовою: Аліна Берестень
Адміністратор: Дмитро Берестень