Html id атрибут: Атрибут id — Блог HTML Academy

Leave a Comment / Html / By /

Содержание

id загальний атрибут

  • Головна
  • html
  • атрибути
  • загальні
  • id

Опис та застосування

Задає стильової ідентифікатор — унікальне ім’я елемента, яке використовується для зміни його стилю і звернення до нього через скрипти. Ідентифікатор в коді документа повинен бути в єдиному екземплярі, іншими словами, зустрічатися тільки один раз.

Правила:

  • Використовуйте тільки літери алфавіту (A-Z, a-z), числа, дефіси, знаки підкреслення.
  • Ідентифікатор не повинен містити будь-яких пропусків.
  • Ідентифікатор на сторінці використовується тільки до одного елементу.
  • Ідентифікатори чутливі до регістру (#css-in-ua і #Css-In-UA різні ідентифікатори).

Запропонувати свою пораду чи нотатку

ПорадаНотатка

Синтакс

<p>....</p>

Атрибут id не має жодного значення :

Переглядачі

  • Стаціонарні переглядачі
  • Мобільні переглядачі
Переглядач

1+

1+

1+

3. 5+

12+

3+

Переглядач

1+

1+

6+

1+

Приклади

  • Приклад 1

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




  See the Pen 


  global.id_css_in_ua1 by css. in.ua (@css_in_ua)


  on CodePen.

Різниця між HTML 4.01 та HTML5

У HTML4 ідентифікатор не повинен починатися з цифри і містити інші символи, крім дефіса, підкреслення і точки.

У HTML5, атрибут id може бути використаний до будь-якого елементу HTML

Різниця між XHTML та HTML

Немає жодної різниці.

Глобальный атрибут id определяет идентификатор,который должен быть уникальным для всего документа.



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

Try it

Предупреждение: значение этого атрибута представляет собой непрозрачную строку: это означает, что веб-авторы не должны полагаться на него для передачи информации, удобочитаемой человеком (хотя наличие ваших идентификаторов, которые могут быть несколько удобочитаемы, может быть полезно для понимания кода, например, рассмотрите ticket-18659 по сравнению с r45tgfe-freds&$@ ).

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

Примечание. Технически значение атрибута id может содержать любой символ, кроме пробельных символов. Однако во избежание непреднамеренных ошибок следует использовать только буквы ASCII , цифры, '_' и '-' , а значение атрибута id должно начинаться с буквы. Например, . имеет особое значение в CSS (он действует как селектор класса ). Если вы не постараетесь избежать его в CSS, он не будет распознан как часть значения атрибута id .Легко забыть сделать это, что приведет к ошибкам в вашем коде, которые будет трудно обнаружить.

Specifications

Specification
Стандарт HTML
# global-attributes:the-id-attribute-2

Browser compatibility

DesktopMobile
Chrome		EdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox для AndroidOpera AndroidSafari на IOSSamsung Internet
id

Yes

12

32

Yes-32

id — настоящий глобальный атрибут только с Firefox 32.

Yes

Yes

Yes

Yes

Yes

32

Yes-32

id — настоящий глобальный атрибут только с Firefox 32.

Yes

Yes

Yes

See also

  • Все глобальные атрибуты .
  • Element.id , который отражает этот атрибут.

HTML

  • exportparts

    Глобальный атрибут exportparts позволяет выбирать и стилизовать элементы,существующие во вложенных деревьях теней,путем экспорта их имен.

  • hidden

    Глобальный атрибут hidden-это булево значение,указывающее на то,что элемент еще или уже не актуален.

  • inputmode

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

  • is

    Глобальный атрибут is позволяет указать,что стандартный HTML-элемент должен вести себя как определенный пользовательский встроенный (подробнее см.

    раздел Использование).

  • 1
  • …
  • 223
  • 224
  • 225
  • 226
  • 227
  • …
  • 258
  • Next

Атрибут HTML-идентификатора | W3docs

❮ Пред. Следующий ❯

Атрибут id используется для определения уникального идентификатора элемента HTML. Он обычно используется для указания на стиль в таблице стилей, а также для якорных ссылок и целей для скриптов. Значение идентификатора чувствительно к регистру и должно быть уникальным в HTML-документе.

Этот атрибут может использоваться CSS и JavaScript (через HTML DOM) для выполнения определенных задач для элемента с указанным идентификатором.

В CSS вы должны написать символ решетки ( # ), за которым следует идентификатор элемента для выбора элемента с указанным идентификатором. Он должен содержать хотя бы один символ и не должен содержать пробелов (табуляции, пробелов и т. д.).

В HTML5 атрибут id можно использовать для любого элемента HTML.

В HTML 4.01 атрибут id нельзя использовать со следующими элементами:,, <база>, <параметр>, <стиль>, <скрипт> и <название>.

Пример атрибута HTML id: 

 

  <голова>
    Название документа
    <стиль>
      #серый {
        цвет: серый;
      }
      #фиолетовый {
        цвет: фиолетовый;
      }
    
  
  <тело>
     
Пример атрибута класса HTML
 
    <р>
      Это какой-то красный абзац. 
    

    
Это какой-то текст.

    <р>
      Какой-то желтый абзац.

Попробуй сам »

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

Пример идентификатора HTML и атрибутов класса: 

 

  <голова>
    Название документа
    <стиль>
      #зеленый-bg {
        цвет фона: зеленый;
        белый цвет;
        отступ: 20 пикселей;
        выравнивание текста: по центру;
      }
      .текст-серый {
        цвет: серый;
        отступ: 5px 15px;
      }
    
  
  <тело>
     
Пример атрибутов HTML "id" и "class":
 
    <р>
      Lorem ipsum, или lipsum, как его иногда называют, представляет собой фиктивный текст, используемый при макетировании печатных, графических или веб-дизайнов. Отрывок приписывается неизвестному наборщику в 15 веке, который, как полагают, перепутал части книги Цицерона De Finibus Bonorum et Malorum для использования в книге образцов шрифтов.
  

     
Атрибут идентификатора HTML
 
    <р>
      Lorem ipsum, или lipsum, как его иногда называют, представляет собой фиктивный текст, используемый при макетировании печатных, графических или веб-дизайнов.
    

    <р>
      Lorem ipsum, или lipsum, как его иногда называют, представляет собой фиктивный текст, используемый при макетировании печатных, графических или веб-дизайнов. Отрывок приписывается неизвестному наборщику в 15 веке, который, как полагают, перепутал части книги Цицерона De Finibus Bonorum et Malorum для использования в книге образцов шрифтов.
    

    <р>
      Отрывок приписывается неизвестному наборщику в 15 веке, который, как полагают, перепутал части книги Цицерона De Finibus Bonorum et Malorum для использования в книге образцов шрифтов.

Попробуй сам »

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

Чтобы добавить закладку, сначала создайте закладку, а затем добавьте на нее ссылку. При переходе по ссылке страница прокручивается до части с закладкой.

Пример добавления закладки: 

 

  <голова>
    Название документа
    <стиль>
      п {
        высота строки: 1,5;
        цвет: #777777;
      }
      а {
        цвет: #20c7c1;
        отображение: встроенный блок;
        отступ: 5px 15px;
      }
      сильный {
        дисплей: блок;
        цвет: #1129Округ Колумбия;
      }
    
  
  <тело>
     
Пример атрибутов HTML "id" и "class":
 
    
Lorem ipsum, или lipsum, как его иногда называют, – это фиктивный текст, используемый при макетировании печатных, графических или веб-дизайнов. Отрывок приписывается неизвестному наборщику в 15 веке, который, как полагают, перепутал части книги Цицерона «De Finibus Bonorum et Malorum» для использования в книге образцов шрифтов.

    Перейти к тексту-2
    Перейти к тексту-3
    <р>
      Текст номер 1 Lorem ipsum, или lipsum, как его иногда называют, – это фиктивный текст, используемый при макетировании печатных, графических или веб-дизайнов. 
    

    <р>
      Текст номер 2 Lorem ipsum, или lipsum, как его иногда называют, – это фиктивный текст, используемый при макетировании печатных, графических или веб-дизайнов. Отрывок приписывается неизвестному наборщику в 15 веке, который, как полагают, перепутал части книги Цицерона De Finibus Bonorum et Malorum для использования в книге образцов шрифтов. Lorem ipsum, или lipsum, как его иногда называют, представляет собой фиктивный текст, используемый при макетировании печатных, графических или веб-дизайнов. Отрывок приписывается неизвестному наборщику в 15 веке, который, как полагают, перемешал части Цицероновского De Finibus Bonorum et Malorum для использования в книге образцов шрифтов. Lorem ipsum, или lipsum, как его иногда называют, представляет собой фиктивный текст, используемый печать, графический или веб-дизайн. Отрывок приписывается неизвестному наборщику в 15 веке, который, как полагают, перемешал части Цицероновского De Finibus Bonorum et Malorum для использования в книге образцов шрифтов.  Lorem ipsum, или lipsum, как его иногда называют, представляет собой фиктивный текст, используемый печать, графический или веб-дизайн. Отрывок приписывается неизвестному наборщику в 15 веке, который, как полагают, перемешал части Цицероновского De Finibus Bonorum et Malorum для использования в книге образцов шрифтов. Lorem ipsum, или lipsum, как его иногда называют, представляет собой фиктивный текст, используемый печать, графический или веб-дизайн. Отрывок приписывается неизвестному наборщику в 15 веке, который, как полагают, перемешал части Цицероновского De Finibus Bonorum et Malorum для использования в книге образцов шрифтов. Lorem ipsum, или lipsum, как его иногда называют, представляет собой фиктивный текст, используемый печать, графический или веб-дизайн. Отрывок приписывается неизвестному наборщику в 15 веке, который, как полагают, перемешал части Цицероновского De Finibus Bonorum et Malorum для использования в книге образцов шрифтов. Lorem ipsum, или lipsum, как его иногда называют, представляет собой фиктивный текст, используемый печать, графический или веб-дизайн.  Отрывок приписывается неизвестному наборщику в 15 веке, который, как полагают, перепутал части книги Цицерона De Finibus Bonorum et Malorum для использования в книге образцов шрифтов.
    

    <р>
      Текст 3 Lorem ipsum, или, как его иногда называют, lipsum, – это фиктивный текст, используемый при макетировании печатных, графических или веб-дизайнов. Отрывок приписывается неизвестному наборщику в 15 веке, который, как полагают, перемешал части Цицероновского De Finibus Bonorum et Malorum для использования в книге образцов шрифтов. Lorem ipsum, или lipsum, как его иногда называют, представляет собой фиктивный текст, используемый печать, графический или веб-дизайн. Отрывок приписывается неизвестному наборщику в 15 веке, который, как полагают, перемешал части Цицероновского De Finibus Bonorum et Malorum для использования в книге образцов шрифтов. Lorem ipsum, или lipsum, как его иногда называют, представляет собой фиктивный текст, используемый печать, графический или веб-дизайн.  Отрывок приписывается неизвестному наборщику в 15 веке, который, как полагают, перемешал части Цицероновского De Finibus Bonorum et Malorum для использования в книге образцов шрифтов. Lorem ipsum, или lipsum, как его иногда называют, представляет собой фиктивный текст, используемый печать, графический или веб-дизайн. Отрывок приписывается неизвестному наборщику в 15 веке, который, как полагают, перепутал части книги Цицерона De Finibus Bonorum et Malorum для использования в книге образцов шрифтов.
    

    <р>
      Текст номер 4 Lorem ipsum, или lipsum, как его иногда называют, – это фиктивный текст, используемый при макетировании печатных, графических или веб-дизайнов. Отрывок приписывается неизвестному наборщику в 15 веке, который, как полагают, перемешал части Цицероновского De Finibus Bonorum et Malorum для использования в книге образцов шрифтов. Lorem ipsum, или lipsum, как его иногда называют, представляет собой фиктивный текст, используемый печать, графический или веб-дизайн.  Отрывок приписывается неизвестному наборщику в 15 веке, который, как полагают, перемешал части Цицероновского De Finibus Bonorum et Malorum для использования в книге образцов шрифтов. Lorem ipsum, или lipsum, как его иногда называют, представляет собой фиктивный текст, используемый печать, графический или веб-дизайн. Отрывок приписывается неизвестному наборщику в 15 веке, который, как полагают, перемешал части Цицероновского De Finibus Bonorum et Malorum для использования в книге образцов шрифтов. Lorem ipsum, или lipsum, как его иногда называют, представляет собой фиктивный текст, используемый печать, графический или веб-дизайн. Отрывок приписывается неизвестному наборщику в 15 веке, который, как полагают, перепутал части книги Цицерона De Finibus Bonorum et Malorum для использования в книге образцов шрифтов.
    

    <р>
      Текст номер 5 Lorem ipsum, или lipsum, как его иногда называют, – это фиктивный текст, используемый при макетировании печатных, графических или веб-дизайнов.  Отрывок приписывается неизвестному наборщику в 15 веке, который, как полагают, перемешал части Цицероновского De Finibus Bonorum et Malorum для использования в книге образцов шрифтов. Lorem ipsum, или lipsum, как его иногда называют, представляет собой фиктивный текст, используемый печать, графический или веб-дизайн. Отрывок приписывается неизвестному наборщику в 15 веке, который, как полагают, перемешал части Цицероновского De Finibus Bonorum et Malorum для использования в книге образцов шрифтов. Lorem ipsum, или lipsum, как его иногда называют, представляет собой фиктивный текст, используемый печать, графический или веб-дизайн. Этот отрывок приписывается неизвестному наборщику в 15 веке, который, как полагают, перемешал части книги Цицерона De Finibus Bonorum et Malorum для использования в книге образцов шрифтов. Lorem ipsum, или lipsum, как его иногда называют, представляет собой фиктивный текст, печать, графический или веб-дизайн. Отрывок приписывается неизвестному наборщику в 15 веке, который, как полагают, перепутал части книги Цицерона De Finibus Bonorum et Malorum для использования в книге образцов шрифтов.

Попробуй сам »

Значение атрибута Id уникально [предложено] | ДЕЙСТВУЙТЕ Правило | ВАИ

Сопоставление правил

Это Атомарное правило тестировать 4.1.1: Анализ (уровень A)

Описание

Это правило проверяет уникальность всех значений атрибута id на одной странице.

Применимость

Это правило применяется к любому атрибуту id , значение которого не является пустой строкой ( "" ), указанный в элементе HTML или SVG.

Примечание: Элементы, которые не включены в дерево доступности и не видны, по-прежнему учитываются для этого правила.

Ожидание

Значение атрибута уникально среди всех других атрибутов id , указанных в элементах HTML или SVG, которые существуют в том же дереве документа или теневом дереве, что и элемент, для которого указан применимый атрибут id .

Предположения

Предположений нет.

Поддержка специальных возможностей

Нет известных проблем с поддержкой специальных возможностей.

Фон

Библиография

  • Понимание критерия успеха 4.1.1: анализ
  • H93: Обеспечение уникальности атрибутов id на веб-странице

Сопоставление требований доступности

  • 4.1.1 Анализ (уровень A)
    • Подробнее о 4.1.1 Анализ
    • Требуется для соответствия до WCAG 2.0 и выше на уровне A и выше.
    • Сопоставление результатов:
      • Любые неудачные исхода: критерий успеха не удовлетворен
      • Все прошли результата: критерий успеха требует дальнейшего тестирования
      • неприменимый результат: критерий успеха требует дальнейшего тестирования
  • H93: Обеспечение уникальности атрибутов id на веб-странице
    • Узнайте больше о методе H93
    • Не требуется для соответствия рекомендациям W3C по специальным возможностям.
    • Сопоставление результатов:
      • Любые неудачные исходы: методика не удовлетворена
      • Все пройдено исхода: техника удовлетворена
      • неприменим результат: техника удовлетворена

Аспекты ввода

При использовании этого правила необходимы следующие аспекты.

  • Дерево DOM

Тестовые наборы

Пройдено

Пройдено Пример 1

Открыть в новой вкладке

В контексте документа имеется только один атрибут id .

 
Это мой первый элемент
Пройдено Пример 2

Открыть в новой вкладке

Все атрибуты id уникальны в контексте документа.

 
Это мой первый элемент


Это мой второй элемент

Это мой третий элемент
Пройдено Пример 3

Открыть в новой вкладке

Два атрибута id одинаковы ( my-elt ), но они находятся в разных деревьях (первый в дереве документа, а второй в теневом дереве).

 <дел>
<дел>
<скрипт>
var host = document.getElementById('хост')
var shadow = host.attachShadow({режим: 'открытый'})
shadow.innerHTML = ''
Пройдено Пример 4

Открыть в новой вкладке

Оба атрибута id одинаковы ( my-elt ), но они находятся в разных деревьях документов, потому что iframe создает новый.

 <дел>

Ошибка

Неудачный пример 1

Открыть в новой вкладке

id атрибут метка не уникальна среди всех id атрибутов в документе, что приводит к неправильной программной метке в поле ввода.

 
Имя


Город
Неудачный пример 2

Открыть в новой вкладке

id атрибут метка не уникален среди всех id атрибутов в документе, что приводит к неправильной программной метке в поле ввода.

 
Имя


Город
Неудачный пример 3

Открыть в новой вкладке

id атрибут метка не уникален среди всех id атрибутов в документе, что приводит к неправильной программной метке в поле ввода. Это правило по-прежнему учитывает элементы, которые не включены в дерево доступности и не видны.

 Имя
Город

Неприменимо

Неприменимо Пример 1

Открыть в новой вкладке

В этом документе нет атрибута id .

 
Это мой первый элемент
Неприменимо Пример 2

Открыть в новой вкладке

Атрибут xml:id не рассматривается этим правилом.

 
Это мой первый элемент
Неприменимо Пример 3

Открыть в новой вкладке

Эти атрибуты id имеют пустое значение.

 Привет мир!

Глоссарий

Фокусируемый

Элемент является фокусируемым , если выполняется одно или оба из следующих условий:

  • элемент является частью последовательной навигации по фокусу; или
  • элемент имеет значение tabindex, отличное от нуля.

Исключение : Элементы, которые теряют фокус в течение периода до 1 секунды после получения фокуса, без взаимодействия пользователя со страницей, на которой находится элемент, не считаются фокусируемыми .

Примечания:

  • Промежуток времени в 1 секунду является произвольным ограничением, которое не включено в WCAG. Учитывая, что сценарии могут управлять состоянием фокуса элементов, постоянное тестирование фокусируемости элемента было бы непрактично без ограничения по времени.
  • Значение tabindex элемента — это значение атрибута tabindex, проанализированное с использованием правил анализа целых чисел. Чтобы значение tabindex отличалось от нуля, его необходимо разобрать без ошибок.

Включено в дерево специальных возможностей

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

Общие правила включения элементов в дерево специальных возможностей определены в основных сопоставлениях API специальных возможностей. Для собственных языков разметки, таких как HTML и SVG, дополнительные правила включения элементов в дерево доступности можно найти в сопоставлениях API специальных возможностей HTML (рабочий проект) и сопоставлениях API специальных возможностей SVG (рабочий проект).

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

Программно скрытые элементы удаляются из дерева специальных возможностей. Однако некоторые браузеры оставляют фокусируемые элементы со значением 9.0051 Атрибут aria-hidden установлен на true в дереве специальных возможностей. Поскольку они скрыты, эти элементы считаются , а не включенными в дерево специальных возможностей. Это может вызвать путаницу у пользователей вспомогательных технологий, поскольку они по-прежнему могут взаимодействовать с этими фокусируемыми элементами с помощью последовательной навигации с помощью клавиатуры, даже если этот элемент не должен быть включен в дерево специальных возможностей.

Элемент пространства имен

Элемент с определенным значением namespaceURI из пространств имен HTML. Например, «элемент SVG» — это любой элемент с «пространством имен SVG», равным 9.0051 http://www.w3.org/2000/svg .

Элементы пространства имен не ограничиваются элементами, описанными в спецификации. Они также включают пользовательские элементы. Такие элементы, как a и title , имеют разные пространства имен в зависимости от того, где они используются. Например, заголовок на HTML-странице обычно имеет пространство имен HTML. При использовании в элементе svg вместо элемента title используется пространство имен SVG.

Результат

Результат — это вывод, сделанный в результате оценки правила ACT на испытуемом или одной из составляющих его мишеней. Результат может быть одного из трех следующих типов:

  • Неприменимо: Ни одна часть испытуемого не соответствует применимости
  • Пройдено: Тестовая цель оправдывает все ожидания
  • Ошибка: Цель теста не соответствует всем ожиданиям

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

Примечание: Реализации, использующие схему EARL10, могут выражать результат с помощью свойства output. В дополнение к выполнено , не выполнено и неприменимо , EARL 1.0 также определил неполный результат . Хотя это не может быть результатом применения правила ACT в полном объеме, часто бывает так, что правила оцениваются лишь частично. Например, когда применимость была автоматизирована, а ожидания приходится оценивать вручную. Такие «промежуточные» результаты можно выразить с помощью неполный результат.

Программная этикетка

Элемент L является программной меткой целевого элемента T, если:

  • T – помеченный контроль L; или
  • L упоминается по идентификатору в атрибуте aria-labeledby T.

Дополнительные сведения см. в примерах программных меток.

Примечание : данный элемент может иметь более одной программной метки.

Программно скрыто

Элемент HTML является программно скрытым , если он имеет вычисляемое свойство CSS видимость , значение которого не видимое ; или по крайней мере одно из следующего верно для любого из его инклюзивных предков в плоском дереве:

  • имеет вычисляемое свойство CSS отображение из нет ; или
  • имеет атрибут aria-hidden , для которого установлено значение true

Примечание : В отличие от других условий, Видимость Свойство CSS может быть отменено потомками.

Примечание . Стандарт HTML предлагает установить для свойства CSS display значение none для элементов с атрибутом hidden . Хотя это и не требуется для HTML, все современные браузеры следуют этому предложению. По этой причине в этом определении не используется скрытый атрибут .

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *