Глобальні атрибути html5
Глобальні атрибути - це атрибути, які можуть бути використані з будь-яким HTML тегом, тобто є спільними для всіх тегів. Незважаючи на те, що глобальні атрибути можна використовувати з усіма HTML тегами, деякі теги вони не вплинуть. Наприклад, якщо додати атрибут title або dir до тега <br>, жодних візуальних змін на веб-сторінці спостерігатися не буде.
Список глобальних атрибутів:
accesskey, class, contenteditable, dir, draggable, hidden, id, lang, spellcheck, style, tabindex, title
accesskey
Атрибут accesskey використовується браузерами як посібник для створення поєднання клавіш, що активує елемент або фокус, що переводить на нього.
<a href="#" accesskey="a">Силка</a>
class
Атрибут class використовується для подальшого отримання доступу до елементів (через ім'я класу) у CSS та jаvascript.
<p class="className1 className2 className3"></p>
В атрибуті class як значення можна вказати не один, а кілька класів, у цьому випадку імена класів повинні бути розділені пробілами, порядок дотримання імен класів не має значення:
Якщо в блоках об'яв різних класів використовуються однакові CSS властивості з різними значеннями, то для властивості буде застосовано механізм каскадності або пріритету.
contenteditable
Атрибут contenteditable вказує, чи користувач може редагувати вміст цього елемента. Атрибут може приймати одне з таких значень:
- true або порожній рядок ("") - вміст елемента можна редагувати
- false - редагування вмісту заборонено
Атрибут contenteditable є перерахованим, а не логічним. Це означає, що потрібна явна вказівка значення атрибута. Додавання атрибуту без значення заборонено:
<!-- так правильно -->
<p contenteditable=""></p>
<!-- неправильно -->
<p contenteditable></p>
dir
Атрибут dir визначає напрямок тексту в елементі, він може набувати одного з трьох значень:
ltr - означає left to right (у перекладі з англ. - зліва направо) і має використовуватися для мов, які пишуться зліва направо (наприклад, російська)
rtl - означає right to left (у перекладі з англ. - праворуч наліво) і має використовуватися для мов, які пишуться праворуч наліво (наприклад, арабська)
auto - напрямок тексту визначається браузером, який використовує базовий алгоритм, він аналізує символи всередині елемента, доки не виявить символ, що точно вказує на певний напрямок (з прямою вказівкою на певний напрямок тексту), потім застосовує цей напрямок на весь текст в елементі.
Цей атрибут є обов'язковим для елемента <bdo>, також він може бути перевизначений за допомогою CSS властивості direction:
<bdo dir="ltr">текст текст текст текст текст</bdo>
draggable
Атрибут draggable визначає, чи користувач може перетягувати елемент за допомогою drag-and-drop API. Атрибут може приймати одне з трьох значень:
- true - вказує, що елемент можна перетягувати
- false - вказує, що елемент не перетягується
- auto - вказує на те, що перетягування елемента залежатиме від значення, встановленого в браузері за замовчуванням.
Атрибут draggable є перерахованим. Це означає, що потрібна явна вказівка значення атрибута. Додавання атрибуту без значення заборонено:
<!-- правильно -->
<p draggable="false">
<!-- не правильно -->
<p draggable>
hidden
Атрибут hidden показує, що цей елемент повинен бути прихований від перегляду. Атрибут hidden є логічним атрибутом. Це означає, що як значення атрибута може виступати порожній рядок або ім'я атрибута, так само можливе вказівку атрибута без значення:
<!-- правильні усі способи -->
<p hidden="hidden">
<p hidden="">
<p hidden>
id
Атрибут ID визначає унікальний ідентифікатор для елемента. Як значення атрибута виступає ім'я ідентифікатора, яке або є ім'ям селектора id, що використовується в CSS коді, або вказується довільне ім'я, яке використовуватиметься в подальшому:
<div id="menu">
Значення атрибута (ім'я ідентифікатора) не повинно містити пробілів і використовуватиметься лише один раз у всьому HTML документі з тим тегом, для якого було встановлено цей ідентифікатор. Атрибут id може містити лише одне значення, на відміну атрибута class.
Атрибут id використовується для подальшого отримання доступу до елементів (через ідентифікатор) CSS і jаvascript, а також при створенні посилань всередині сторінки.
<a href="#a1">Силка на div</a>
<a href="other_page.html#a2">Силка на розділ що знаходиться в іншій сторінці</a>
<div id="a1">Розділ сторінки</div>
lang
Атрибут lang дозволяє вказати, яка мова використовується для тексту всередині елемента. Як значення атрибута використовуються коди мов:
<p>текст українською а далі текст на англійській: <span lang="en">"Hello world!"</span>.</p>
Використання цього атрибуту допомагає браузерам правильно відображати деякі національні символи, мовним програмам визначити мову тексту, виконувати перевірку тексту програм для перевірки орфографії та граматики.
spellcheck
Атрибут spellcheck вказує, чи дозволяється перевіряти вміст елемента наявність орфографічних помилок. Атрибут може приймати одне з таких значень:
- true - вказує, що вміст елемента має бути, наскільки можна, перевірено на наявність орфографічних помилок.
- false - вказує, що елемент повинен перевірятися на наявність орфографічних помилок.
Атрибут spellcheck є перерахованим. Це означає, що потрібна явна вказівка значення атрибута. Додавання атрибуту без значення заборонено:
<!-- правильно -->
<textarea spellcheck="false">
<!-- не правильно -->
<textarea spellcheck>
Атрибут spellcheck визначає лише рекомендацію для браузера: браузери не повинні мати можливість перевірки орфографічних помилок. Зазвичай елементи, що не редагуються, не перевіряються на наявність помилок, навіть якщо для атрибута встановлено значення true, а браузер підтримує перевірку.
style
Атрибут style використовується для додавання стилів CSS до елемента. Стилі, додані за допомогою атрибута style, мають пріоритет над стилями, які розташовані в елементі <style> або у зовнішньому файлі.
При додаванні стилів до значення атрибута селектор і фігурні дужки не використовуються. Кожне оголошення має закінчуватися крапкою з комою, після якої можна написати наступне оголошення.
<p style="color: red; font-weight: bold;">текст текст текст текст</p>
tabindex
Атрибут tabindex вказує, чи може елемент бути у фокусі та порядок пріоритету при переході фокусу між елементами (при використанні клавіші "tab"). Як значення атрибут приймає ціле число:
<textarea tabindex="4">
Число 4 означає, що елемент отримає фокус після елемента з tabindex="3" та до елемента з tabindex="5". Але давати послідовні значення не обов'язково, у будь-якому випадку елементи, що мають менше значення, отримають фокус до елементів, які мають більше значення. Якщо кілька елементів мають однакові позитивні значення, то порядок отримання фокусу залежатиме від порядку їхнього прямування у вихідному коді документа.
title
Атрибут title використовується для вказівки додаткової інформації про вміст елемента (відображається браузерами у вигляді спливаючої текстової підказки при наведенні курсору миші на елемент).
Атрибут title часто використовується з картинками для додавання опису картинки:
<img src="1.png" title="Опис картинки що спливе як підказка">