Атрибути елементів

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

Атрибут із значенням

Спочатку пишеться початковий тег, потім через пробіл ім'я атрибута, після чого ставиться знак рівності (=) і в лапках вказується значення атрибута. Загальний синтаксис такий:

<E атрибут = "значення">...</E>

Тут буквою E позначається назва довільного елемента. Для елементів, які самі закриваються все буде аналогічно, крім вмісту і закривного тега.

<E атрибут = "значення">

Замість подвійних лапок ( "значення") можна писати одинарні лапки ( 'значення') або взагалі опустити лапки (значення). Однак хорошим тоном буде завжди писати значення атрибутів в лапках, тому що їх відсутність може привести до неявних помилок. Наведемо невеликий приклад.

See the Pen abzpgbp by persifal17 (@persifal17) on CodePen.

В даному прикладі перший рядок написаний правильно з усіма лапками, а в наступному рядку у атрибута alt лапки відсутні. Оскільки пробіл відокремлює один атрибут від іншого, то браузер в якості значення alt візьме тільки перше слово ( «Вид»), а слово «заголовка» буде сприймати як новий атрибут. Але так як подібного атрибута не існує, то це призведе до помилки.

Кожен атрибут повинен бути єдиним і не повинен повторюватися (alt писати можна, alt alt неможна).

У прикладі 1 показано додавання картинки на сторінку за допомогою елемента <img> з різними атрибутами.

Приклад 1. Використання атрибутів

See the Pen BaypXRz by persifal (@persifal17) on Codepen.

Логічні атрибути

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

<E значення>...</E>

У прикладі 2 показано застосування логічного атрибута для аудіоплеєра.

Приклад 2. Використання логічного атрибута

See the Pen JjoEgJx by Sofiia (@persifal17) on href="https://codepen.io">CodePen.

Логічні атрибути допустимо записувати в трьох видах: без значення, з порожнім значенням і значенням, що збігається з ім'ям атрибута. Всі варіанти рівнозначні, але бажано дотримуватися однієї вибраної форми запису.

• controls
• controls=""
• controls="controls"

Імена атрибутів не чутливі до регістру, це означає, що їх можна писати маленькими або великими літерами. Але рекомендуємо дотримуватися одноманітності і писати атрибути в нижньому регістрі - name. А ніяк НЕ Name або NAME. Ще раз підкреслимо, що так писати не треба.

Порядок атрибутів

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

See the Pen povRMrd by Sofiia (@persifal17) on CodePen.

Універсальні атрибути

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

Приклад 1.Атрибут accesskey

See the Pen BaypXRz by persifal (@persifal17) on Codepen.