Самоучитель HTML Справочник HTML Глобальные атрибуты События Типы элементов Таблица цветов Спецсимволы HTML Коды языков
Теги HTML

Глобальные атрибуты HTML

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

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

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

Чтобы посмотреть описание и пример использования интересующего вас глобального атрибута, нажмите на него или проскрольте страницу вниз до его описания.

accesskey

Атрибут accesskey используется браузерами в качестве руководства для создания сочетания клавиш, активирующее элемент или переводящее на него фокус.

Примечание: до HTML5 атрибут accesskey можно было использовать только со следующими тегами: <a>, <area>, <button>, <input>, <label>, <legend> и <textarea>. С пятой версии HTML данный атрибут можно использовать с любым валидным HTML тегом.

Значением атрибута accesskey должен быть символ, который можно ввести нажатием одной клавиши. Пробельные символы в качестве значения атрибута не допустимы.

<a href="#" accesskey="a">Ссылка</a>

Сочетания клавиш для атрибута accesskey зависит от используемого браузера:

Browser Windows Linux Mac
IE [Alt]+символ
Chrome [Alt]+символ [Alt]+символ [Control][Alt]+символ
Firefox [Alt][Shift]+символ [Alt][Shift]+символ [Control][Alt]+символ
Safari [Alt]+символ [Control][Alt]+символ
Opera Opera 15+: [Alt]+символ
Opera 12.1 или более старая версия: [Shift][Esc]+символ

Использование атрибута accesskey для разных элементов с одним и тем же значением приводит к игнорированию атрибута.

class

Атрибут class используется для последующего получения доступа к элементам (через имя класса) в CSS и JavaScript.

В атрибуте class в качестве значения можно указать не один, а несколько классов, в этом случае имена классов должны быть разделены пробелами, порядок следования имён классов не имеет значения:

<p class="className1 className2 className3">

Если в блоках объявлений разных классов используются одинаковые CSS свойства с разными значениями, то для свойства будет применено то значение, которое в CSS коде определено ниже остальных. Поэтому порядок следования имён классов в значение атрибута значения не имеет, так как в этом случае срабатывает механизм каскадности.

contenteditable

Атрибут contenteditable указывает, может ли пользователь редактировать содержимое данного элемента. Атрибут может принимать одно из следующих значений:

Атрибут contenteditable является перечисляемым, а не логическим. Это значит, что требуется явное указание значения атрибута. Добавление атрибута без значения запрещено:

<!-- правильное добавление атрибута -->
<p contenteditable="">

<!-- неправильное добавление атрибута -->
<p contenteditable>

dir

Атрибут dir определяет направление текста в элементе, он может принимать одно из трех значений:

Этот атрибут является обязательным для элемента <bdo>, так же он может быть переопределен с помощью CSS свойства direction:

<bdo dir="ltr">Просто какой-то текст</bdo>

draggable

Атрибут draggable определяет, может ли пользователь перетаскивать элемент с помощью drag-and-drop API. Атрибут может принимать одно из трёх значений:

Атрибут draggable является перечисляемым. Это значит, что требуется явное указание значения атрибута. Добавление атрибута без значения запрещено:

<!-- правильное добавление атрибута -->
<p draggable="false">

<!-- неправильное добавление атрибута -->
<p draggable>

hidden

Атрибут hidden указывает, что данный элемент должен быть скрыт от просмотра. Атрибут hidden является логическим атрибутом. Это значит, что в качестве значения атрибута может выступать пустая строка или имя атрибута, так же возможно указание атрибута без значения:

<!-- правильный синтаксис атрибута -->
<p hidden="hidden">
<p hidden="">
<p hidden>

Примечание: CSS свойство display переопределяет поведение элемента с атрибутом hidden. Например, элементы со стилем display: block; будут отображаться, несмотря на присутствие атрибута hidden.

id

Атрибут id определяет уникальный идентификатор для элемента. В качестве значения атрибута выступает имя идентификатора, которое либо является именем селектора id, используемого в CSS коде, либо указывается произвольное имя, которое будет использоваться в дальнейшем:

<div id="nav_menu">

Значение атрибута (имя идентификатора) не должно содержать пробелов и должно использоваться только один раз во всём HTML документе с тем тегом, для которого был установлен данный идентификатор. Атрибут id может содержать только одно значение, в отличие от атрибута class.

Атрибут id используется для последующего получения доступа к элементам (через идентификатор) в CSS и JavaScript, а также при создании ссылок внутри страницы.

С помощью атрибута id можно создавать ссылки на конкретный элемент, а не только на страницу в целом. Такие ссылки могут вести либо на раздел данной страницы, либо на раздел другой страницы. Чтобы создать ссылку на элемент, надо добавить к небу атрибут id. Сама ссылка, в этом случае, должна будет содержать имя идентификатора элемента, на который она ссылается, перед которым обязательно ставится символ #. Если ссылка ведет на раздел текущей страницы, то в качестве адреса можно указать только имя идентификатора, если ссылка ведёт на раздел другой страницы, то имя идентификатора указывается в самом конце адреса:

<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>

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

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

spellcheck

Атрибут spellcheck указывает, разрешается ли проверять содержимое элемента на наличие орфографических ошибок. Атрибут может принимать одно из следующих значений:

Атрибут spellcheck является перечисляемым. Это значит, что требуется явное указание значения атрибута. Добавление атрибута без значения запрещено:

<!-- правильное добавление атрибута -->
<textarea spellcheck="false">

<!-- неправильное добавление атрибута -->
<textarea spellcheck>

Атрибут spellcheck определяет лишь рекомендацию для браузера: браузеры не должны иметь возможность проверки на орфографические ошибки. Обычно не редактируемые элементы не проверяются на наличие ошибок, даже если для атрибута установлено значение true, а браузер поддерживает проверку.

style

Атрибут style используется для добавления CSS стилей к элементу. Стили, добавленные с помощью атрибута style, имеют приоритет над стилями, расположенными в элементе <style> или во внешнем файле.

При добавлении стилей в значение атрибута, селектор и фигурные скобки не используются. Каждое объявление должно заканчиваться точкой с запятой, после которой можно писать следующее объявление. Между свойствами и их значениями, так же как и между объявлениями, пробелы ставятся по желанию:

<span style="color: red; font-weight: bold;">Жирный красный текст</span>

tabindex

Атрибут tabindex указывает может ли элемент быть в фокусе и порядок приоритета при переходе фокуса между элементами (при использовании клавиши "tab"). В качестве значения атрибут принимает целое число:

<textarea tabindex="5">

Число 5 означает, что элемент получит фокус после элемента с tabindex="4" и до элемента с tabindex="6". Но давать последовательные значения не обязательно, в любом случае элементы, имеющие меньшее значение, получат фокус до элементов, имеющих большее значение. Если несколько элементов имеют одинаковые положительные значения, то порядок получения фокуса будет зависеть от порядка их следования в исходном коде документа.

title

Атрибут title используется для указания дополнительной информации о содержимом элемента (отображается браузерами в виде всплывающей текстовой подсказки при наведении курсора мыши на элемент).

Атрибут title часто используется с картинками, для добавления описания картинки:

<img src="1.png" title="Красивый синий цветок">

Примечание: внешний вид и размер всплывающей подсказки, шрифт и цвет текста, зависят от браузера и не могут быть изменены с помощью CSS стилей.

Копирование материалов с данного сайта возможно только с разрешения администрации сайта
и при указании прямой активной ссылки на источник.
2011-2018 © puzzleweb.ru

Реклама на сайте | puzinfo@puzzleweb.ru | ruen