😎 » HTML5 » Разная информация » Глобальні атрибути html5
547 0  

Глобальні атрибути html5

Глобальні атрибути - це атрибути, які можуть бути використані з будь-яким HTML тегом, тобто є спільними для всіх тегів. Незважаючи на те, що глобальні атрибути можна використовувати з усіма HTML тегами, деякі теги вони не вплинуть. Наприклад, якщо додати атрибут title або dir до тега <br>, жодних візуальних змін на веб-сторінці спостерігатися не буде.

Список глобальних атрибутів:

accesskey, class, contenteditable, dir, draggable, hidden, id, lang, spellcheck, style, tabindex, title

sad 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 - напрямок тексту визначається браузером, який використовує базовий алгоритм, він аналізує символи всередині елемента, доки не виявить символ, що точно вказує на певний напрямок (з прямою вказівкою на певний напрямок тексту), потім застосовує цей напрямок на весь текст в елементі.

Значення 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>
Примітка: CSS властивість display перевизначає поведінку елемента з hidden атрибутом. Наприклад, no елементи зі стилем display: block; будуть відображатися, незважаючи на наявність атрибута hidden.

id

Атрибут ID визначає унікальний ідентифікатор для елемента. Як значення атрибута виступає ім'я ідентифікатора, яке або є ім'ям селектора id, що використовується в CSS коді, або вказується довільне ім'я, яке використовуватиметься в подальшому:

<div id="menu">

Значення атрибута (ім'я ідентифікатора) не повинно містити пробілів і використовуватиметься лише один раз у всьому HTML документі з тим тегом, для якого було встановлено цей ідентифікатор. what Атрибут 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>


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

winked Атрибут lang також може використовуватися для покращення якості в пошуковій видачі результатів пошуку, які ґрунтуються на лінгвістичних уподобаннях користувача.

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="Опис картинки що спливе як підказка">
Примітка: зовнішній вигляд і розмір підказки, шрифт і колір тексту залежать від браузера і feel не можуть бути змінені за допомогою CSS стилів.





Залишити свій коментар:

Досвід у веброзробці:

2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
2023
2024
2025
2026
2027
2028
2009
2023