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

Олег Дутченко

frontend

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

1888

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

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

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

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

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

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

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

contenteditable

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

hidden

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

multiple

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

poster

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

spellcheck

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

accept

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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