Маловідомі, але круті атрибути в HTML

frontend
Аудіо доріжка
2796

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

Існує безліч популярних атрибутів, які верстальники використовують повсюдно:

  • href
  • hreflang
  • style
  • class
  • src
  • placeholder та інші

Усі популярні атрибути HTML ми детально розбираємо та використовуємо на курсі «Frontend розробка 2022. Junior верстальник». Однак існує маса маловідомих і рідко використовуваних атрибутів у HTML, про які багато хто навіть не знає. Або просто не використовують їх з інших причин. А вони, між іншим, можуть бути дуже корисними в деяких ситуаціях.

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

image_1

Атрибути, про які ви, можливо, навіть не чули

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

contenteditable

Цей глобальний атрибут дозволяє редагувати вміст елемента. Виглядає наступним чином:

image_2

hidden

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

image_3

multiple

Атрибут, що дозволяє користувачеві вводити більше значення. Наприклад, вказати кілька адрес електронної пошти або завантажити кілька різних файлів.

image_4

poster

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

image_5

spellcheck

Цей атрибут безпосередньо вказує браузеру, чи потрібно перевіряти правопис та граматику у тексті чи ні. Зазвичай його використовують у полях форм<input>, <textarea>щоб у них браузер не «підсвічував» незнайомі йому слова — імена користувачів, паролі тощо. А головне — не спрацьовувало виправлення авто, якщо воно включене.

image_6

accept

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

image_7

Ще кілька маловідомих, але дуже корисних атрибутів HTML

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

Розширений вибір дати

Можливо, ви не знали, але HTML дозволяє гнучко налаштовувати можливості вибору дати без додаткової валідації. Для цього можна використатиinput type="date", у якому підтримуються атрибутиmin, maxіstep. За допомогою їх можна дуже легко і швидко встановити обмеження на вибір дати безпосередньо в HTML. Погляньте на наступний код:

image_8

Що ми зробили? Все просто: ми в такий спосіб обмежили можливість обрати дату в межах одного місяця. Нічого складного, але це працює:

image_9

За бажанням можна виконати і більш точне налаштування. Наприклад, дозволити вибір лише субот:

image_10

Тобто ми зробили неактивними всі інші дні, окрім суботи. Виглядає це так:

image_11

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

Тег<button>створює на сторінці клікабельні кнопки. Як ви вже самі розумієте, до цього тегу можуть застосовуватись різні атрибути.name, form, type та інші. Але є серед цих атрибутів кілька дуже специфічних, які застосовуються рідко, але можуть бути корисними:

  • formaction— дозволяє задати адресу, куди будуть передаватися дані форми відразу після натискання кнопки
  • formenctype- Задає метод кодування даних форми
  • formmethod- Вказує метод пересилання даних форми
  • formnovalidate- відключає перевірку форми на коректність

Що цікаво, схема у тезі<button>при цьому перевизначає і батьківську схему.<form>).

image_12

Якщо ви пильно подивіться на приклад коду вище, то побачите, що хоча в батьку вказана відправка на some-endpoint, кнопка Submit (як і натискання Введення) при цьому відправляє GET-запит на some-other-endpoint. У той же час, валідація полів відключається.

Взагалі атрибути тега<button>дозволяють створювати форми з умовною поведінкою та дуже гнучко налаштовувати їхню роботу. Рекомендуємо детальніше вивчити як сам цей тег, так і його атрибути - дізнаєтеся багато корисного, що стане в нагоді в подальшій роботі.

Задіяння колірних схем поза CSS

Зараз все більше сайтів використовує колірні схеми – світлі та темні теми. І ви можете легко повідомити браузер про підтримку сайтом колірних тем, щоб він не вивозив на сторінку дрібні настирливі елементи з дефолтними стилями (теми, які «підтягуються» зі світлої теми).

Звичайно, можна довго і мотузно «колупати» CSS-код, щоб налаштувати кожен елемент, що вибивається, але це тривалий і, відверто кажучи, дратівливий процес.

image_13

Але ж можна зробити все набагато простіше та ефективніше:

image_14

image_15

Збір метрик безпосередньо із посилань

Нещодавно з'явився ще один вкрай цікавий і корисний атрибут ping, за допомогою якого можна збирати метрики з будь-яких елементів із посиланнями.

image_16

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

image_17

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

Дуже корисний тег, за допомогою якого зазвичай виділяють текст у довідкових цілях. Найпростіший приклад – згадка терміна у статті, що цей термін описує. Таким чином, створюється акцентний елемент на сторінці. При цьому він акцентований як для користувача, так пошукових алгоритмів.

image_18

Замість висновку

Сподіваємося, ви змогли отримати щось нове та корисне з нашої статті, чим зможете користуватися у своїй подальшій роботі верстальника. Якщо це так, значить, ми намагаємося не дарма.

У будь-якому випадку пам'ятайте, що HTML, CSS та веб-технології загалом ніколи не стоять на місці та постійно розвиваються. Одні атрибути та теги старіють і йдуть у минуле, інші з'являються і стрімко набирають обертів, а треті просто змінюють своє значення.

Саме тому кожен сучасний веб-девелопер має уважно стежити за актуальними трендами, вивчати свіжу інформацію, використовувати нові інструменти та рішення у своїй професійній діяльності. Інакше просто неможливо працювати ефективно у IT-галузі. Вчитеся, читайте корисні матеріали, стежте за оновленнями на нашому блозі та інших ресурсах, присвячених верстці та веб-розробці. Попереду ще багато цікавого!