Какие элементы браузер найдет с помощью селектора ссылок

Обновлено: 06.07.2024

12.1 Введение в ссылки и якоря

HTML предлагает множество традиционных идиом для публикации форматированного текста и структурированных документов, но от большинства других языков разметки его отличает возможность работы с гипертекстом и интерактивными документами. В этом разделе представлена ссылка (или гиперссылка, или веб-ссылка), основная конструкция гипертекста. Ссылка — это соединение одного веб-ресурса с другим. Несмотря на простую концепцию, ссылка была одной из основных движущих сил успеха Интернета.

A имеет два конца, которые называются, и направление. Ссылка начинается с привязки «источник» и указывает на привязку «назначение», которой может быть любой веб-ресурс (например, изображение, видеоклип, звуковой фрагмент, программа, HTML-документ, элемент в HTML-коде). документ и т. д.).

12.1.1 Посещение связанного ресурса

Поведением по умолчанию, связанным со ссылкой, является поиск другого веб-ресурса. Такое поведение обычно и неявно достигается путем выбора ссылки (например, щелчком мыши, вводом с клавиатуры и т. д.).

Следующий отрывок HTML содержит две ссылки, одна из которых представляет собой HTML-документ с именем «chapter2.html», а другая — изображение GIF в файле «forest.jpg»:

Активируя эти ссылки (щелкая мышью, вводя с клавиатуры, используя голосовые команды и т. д.), пользователи могут посещать эти ресурсы. Обратите внимание, что атрибут href в каждой исходной привязке указывает адрес целевой привязки с URI.

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

Якоря назначения в HTML-документах могут быть указаны либо элементом A (имя его с помощью атрибута name), либо любым другим элементом (название с помощью атрибута id).

Таким образом, например, автор может создать оглавление, записи которого ссылаются на элементы заголовка H2 , H3 и т. д. в том же документе. Используя элемент A для создания целевых привязок, мы напишем:

Того же эффекта можно добиться, сделав якорями сами элементы заголовка:

12.1.2 Другие отношения ссылок

Самое распространенное использование ссылки — это получение другого веб-ресурса, как показано в предыдущих примерах. Однако авторы могут вставлять в свои документы ссылки, которые выражают другие отношения между ресурсами, а не просто «активируйте эту ссылку, чтобы посетить этот связанный ресурс». Ссылки, которые выражают другие типы отношений, имеют один или несколько типов ссылок, указанных в их привязке к источнику.

роли ссылки, определенные с помощью A или LINK, указываются с помощью атрибутов rel и rev.

Например, ссылки, определяемые элементом LINK, могут описывать положение документа в серии документов. В следующем отрывке ссылки внутри документа под названием «Глава 5» указывают на предыдущую и следующую главы:

Тип первой ссылки — «предыдущая», а второй — «следующая» (два из нескольких распознаваемых типов ссылок). Ссылки, указанные с помощью LINK, не отображаются вместе с содержимым документа, хотя пользовательские агенты могут отображать их другими способами (например, в качестве инструментов навигации).

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

12.1.3 Указание якорей и ссылок

Несмотря на то, что некоторые элементы и атрибуты HTML создают ссылки на другие ресурсы (например, элемент IMG, элемент FORM и т. д.), в этой главе рассматриваются ссылки и привязки, создаваемые элементами LINK и A. Элемент LINK может появляться только в заголовке документа. Элемент A может появляться только в теле.

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

Полученный ресурс может обрабатываться агентом пользователя несколькими способами: путем открытия нового документа HTML в том же окне агента пользователя, открытия нового документа HTML в другом окне, запуска новой программы для обработки ресурса и т. д. , Поскольку элемент A имеет содержимое (текст, изображения и т. д.), пользовательские агенты могут отображать это содержимое таким образом, чтобы указывать на наличие ссылки (например, подчеркивая содержимое).

Когда установлены атрибуты name или id элемента A, этот элемент определяет привязку, которая может быть местом назначения других ссылок.

Авторы могут устанавливать атрибуты name и href одновременно в одном и том же экземпляре A.

Элемент LINK определяет связь между текущим документом и другим ресурсом. Хотя LINK не имеет содержимого, определяемые им отношения могут отображаться некоторыми пользовательскими агентами.

12.1.4 Заголовки ссылок

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

Таким образом, мы можем дополнить предыдущий пример, указав заголовок для каждой ссылки:

12.1.5 Интернационализация и ссылки

Поскольку ссылки могут указывать на документы, закодированные с использованием разных кодировок символов, элементы A и LINK поддерживают атрибут charset. Этот атрибут позволяет авторам сообщать пользовательским агентам о кодировании данных на другом конце ссылки.

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

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

12.2 Элемент A

Начальный тег: обязателен, Конечный тег: обязателен

name = cdata [CS] Этот атрибут дает имя текущему якорю, чтобы он мог быть местом назначения другой ссылки. Значение этого атрибута должно быть уникальным именем привязки. Областью действия этого имени является текущий документ. Обратите внимание, что этот атрибут использует то же пространство имен, что и атрибут id. href = uri [CT] Этот атрибут указывает местоположение веб-ресурса, тем самым определяя связь между текущим элементом (исходной привязкой) и целевой привязкой, определяемой этим атрибутом. hreflang = langcode [CI] Этот атрибут указывает базовый язык ресурса, обозначенного атрибутом href, и может использоваться только при указании атрибута href. type = content-type [CI] Этот атрибут дает рекомендательную подсказку относительно типа содержимого, доступного по целевому адресу ссылки. Это позволяет пользовательским агентам использовать резервный механизм, а не извлекать контент, если им сообщают, что они получат контент в типе контента, который они не поддерживают. Авторы, использующие этот атрибут, берут на себя ответственность за управление риском того, что он может стать несовместимым с содержимым, доступным по целевому адресу ссылки. Текущий список зарегистрированных типов контента см. в [MIMETYPES]. rel = link-types [CI] Этот атрибут описывает отношение текущего документа к якорю, указанному атрибутом href. Значение этого атрибута представляет собой список типов ссылок, разделенных пробелами. rev = link-types [CI] Этот атрибут используется для описания обратной ссылки от привязки, заданной атрибутом href, к текущему документу. Значение этого атрибута представляет собой список типов ссылок, разделенных пробелами. charset = charset [CI] Этот атрибут указывает кодировку символов ресурса, указанного ссылкой. Дополнительные сведения см. в разделе о кодировках символов.

Атрибуты, определенные в другом месте

id , класс (идентификаторы документа)
lang (информация о языке), dir (направление текста)
заголовок (название элемента)
стиль (информация о встроенном стиле)
форма и координаты (карты изображений)
onfocus , onblur , onclick , ondblclick , onmousedown , onmouseup , onmouseover , onmousemove , onmouseout , onkeypress , onkeydown , onkeyup (внутренние события)
target (информация о целевом кадре)
tabindex (навигация с помощью вкладок)
accesskey (клавиши доступа)

Каждый элемент A определяет якорь

Содержимое элемента A определяет положение привязки.
Атрибут name называет якорь таким образом, что он может быть местом назначения для нескольких ссылок (см. также якоря с идентификатором ).
Атрибут href делает эту привязку исходной привязкой ровно для одной ссылки.

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

В следующем примере элемент A определяет ссылку. Якорь источника — это текст «Веб-сайт W3C», а якорь назначения — «http://www.w3.org/»:

Эта ссылка указывает на домашнюю страницу консорциума World Wide Web. Когда пользователь активирует эту ссылку в пользовательском агенте, пользовательский агент получит ресурс, в данном случае HTML-документ.

Пользовательские агенты обычно отображают ссылки таким образом, чтобы сделать их очевидными для пользователей (подчеркивание, перевернутое видео и т. д.). Точный рендеринг зависит от пользовательского агента. Отображение может варьироваться в зависимости от того, посещал ли пользователь уже ссылку или нет. Возможный визуальный рендеринг предыдущей ссылки может быть:

Чтобы явно указать пользовательским агентам кодировку символов на целевой странице, установите атрибут charset:

Предположим, мы определяем привязку с именем "anchor-one" в файле "one.html".

Это создает привязку вокруг текста "Это расположение первой привязки". Обычно содержимое A не отображается каким-либо особым образом, когда A определяет только якорь.

Таким образом, ссылка, определенная в файле "two.html" в том же каталоге, что и "one.html", будет ссылаться на привязку следующим образом:

Элемент A в следующем примере указывает ссылку (с помощью href ) и одновременно создает именованный якорь (с именем ):

Этот пример содержит ссылку на веб-ресурс другого типа (изображение PNG). Активация ссылки должна привести к получению ресурса изображения из Интернета (и, возможно, отображению, если система настроена на это).

Примечание. Пользовательские агенты должны иметь возможность находить якоря, созданные пустыми элементами A, но некоторые из них не могут этого сделать. Например, некоторые пользовательские агенты могут не найти «пустую привязку» в следующем фрагменте HTML:

12.2.1 Синтаксис имен привязок

Имя привязки — это значение атрибута name или id при использовании в контексте привязок. Имена якорей должны соответствовать следующим правилам:

Уникальность. Имена привязок должны быть уникальными в пределах документа. Имена привязок, отличающиеся только регистром, могут не отображаться в одном и том же документе.
Сопоставление строк. Сравнение идентификаторов фрагментов и имен привязок должно выполняться путем точного (с учетом регистра) совпадения.

Таким образом, следующий пример корректен в отношении сопоставления строк и должен считаться совпадением агентами пользователя:

НЕПРАВИЛЬНЫЙ ПРИМЕР:
Следующий пример недопустим с точки зрения уникальности, поскольку два имени совпадают, за исключением регистра:

Несмотря на то, что следующий отрывок является допустимым HTML, поведение пользовательского агента не определено; некоторые пользовательские агенты могут (ошибочно) считать это совпадением, а другие — нет.

12.2.2 Вложенные ссылки запрещены

Ссылки и привязки, определяемые элементом A, не должны быть вложенными; элемент A не должен содержать никаких других элементов A.

Поскольку DTD определяет элемент LINK как пустой, элементы LINK также не могут быть вложенными.

12.2.3 Якоря с атрибутом id

Атрибут id можно использовать для создания привязки в начальном теге любого элемента (включая элемент A).

В этом примере показано использование атрибута id для позиционирования привязки в элементе H2. Якорь связан с элементом A.

В следующем примере якорь назначения именуется с помощью атрибута id:

Атрибуты id и name используют одно и то же пространство имен. Это означает, что они не могут оба определить привязку с одним и тем же именем в одном и том же документе. Допустимо использовать оба атрибута для указания уникального идентификатора элемента для следующих элементов: A, APPLET, FORM, FRAME, IFRAME, IMG и MAP. Когда оба атрибута используются в одном элементе, их значения должны быть идентичными.

НЕПРАВИЛЬНЫЙ ПРИМЕР:
Следующий отрывок является недопустимым HTML, поскольку эти атрибуты объявляют одно и то же имя дважды в одном и том же документе.

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

Использовать идентификатор или имя? При принятии решения об использовании идентификатора или имени для имени привязки авторам следует учитывать следующие факторы:

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

12.2.4 Недоступные и неидентифицируемые ресурсы

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

Если пользовательский агент не может найти связанный ресурс, он должен предупредить пользователя.
Если пользовательский агент не может определить тип связанного ресурса, он все равно должен попытаться его обработать. Это должно предупредить пользователя и может позволить пользователю вмешаться и определить тип документа.

12.3 Отношения между документами: элемент LINK

Начальный тег: обязателен, Конечный тег: запрещен

Атрибуты, определенные в другом месте

id , класс (идентификаторы документа)
lang (информация о языке), dir (направление текста)
заголовок (название элемента)
стиль (информация о встроенном стиле)
onclick , ondblclick , onmousedown , onmouseup , onmouseover , onmousemove , onmouseout , onkeypress , onkeydown , onkeyup (внутренние события)
href , hreflang , type , rel , rev (ссылки и привязки)
target (информация о целевом кадре)
медиа (информация о стиле заголовка)
кодировка (кодировки символов)

Этот элемент определяет ссылку. В отличие от A, он может появляться только в разделе HEAD документа, хотя может появляться любое количество раз. Хотя ССЫЛКА не имеет содержимого, она передает информацию о взаимоотношениях, которая может отображаться агентами пользователя различными способами (например, панель инструментов с раскрывающимся меню ссылок).

В этом примере показано, как несколько определений LINK могут отображаться в разделе HEAD документа. Текущий документ - "Chapter2.html". Атрибут rel определяет отношение связанного документа с текущим документом. Значения «Index», «Next» и «Prev» объясняются в разделе, посвященном типам ссылок.

12.3.1 Прямые и обратные ссылки

Атрибуты rel и rev дополняют друг друга: атрибут rel указывает прямую ссылку, а атрибут rev — обратную.

Рассмотрите два документа A и B.

Имеет то же значение, что и:

Оба атрибута могут быть указаны одновременно.

12.3.2 Ссылки и внешние таблицы стилей

Когда элемент LINK связывает внешнюю таблицу стилей с документом, атрибут type указывает язык таблицы стилей, а атрибут media указывает предполагаемый носитель или носитель рендеринга. Пользовательские агенты могут сэкономить время, извлекая из сети только те таблицы стилей, которые применимы к текущему устройству.

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

12.3.3 Ссылки и поисковые системы

Авторы могут использовать элемент LINK для предоставления поисковым системам различной информации, в том числе:

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

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

В следующем примере мы используем атрибут hreflang, чтобы сообщить поисковым системам, где найти версии документа на голландском, португальском и арабском языках. Обратите внимание на использование атрибута charset для арабского руководства. Обратите также внимание на использование атрибута lang для указания того, что значение атрибута title для элемента LINK, обозначающего руководство на французском языке, указано на французском языке.

В следующем примере мы сообщаем поисковым системам, где найти печатную версию руководства.

В следующем примере мы сообщаем поисковым системам, где найти первую страницу набора документов.

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

12.4 Информация о пути: элемент BASE

Начальный тег: обязателен, Конечный тег: запрещен

href = uri [CT] Этот атрибут указывает абсолютный URI, который действует как базовый URI для разрешения относительных URI.

Атрибуты, определенные в другом месте

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

При наличии элемента BASE он должен находиться в разделе HEAD документа HTML перед любым элементом, ссылающимся на внешний источник. Информация о пути, указанная элементом BASE, влияет только на URI в документе, где появляется этот элемент.

Например, при наличии следующего объявления BASE и объявления A:

относительный URI "../cages/birds.jpg" будет разрешаться следующим образом:

12.4.1 Разрешение относительных URI

Агенты пользователя должны вычислять базовый URI для разрешения относительных URI в соответствии с [RFC1808], раздел 3. Ниже описано, как [RFC1808] применяется конкретно к HTML.

Агенты пользователя должны вычислять базовый URI в соответствии со следующими приоритетами (от наивысшего приоритета к низшему):

Кроме того, элементы OBJECT и APPLET определяют атрибуты, которые имеют приоритет над значением, установленным элементом BASE. Пожалуйста, ознакомьтесь с определениями этих элементов для получения дополнительной информации о связанных с ними проблемах URI.

Протокол WebDriver предоставляет несколько стратегий выбора для запроса элемента. WebdriverIO упрощает их, чтобы упростить выбор элементов.Обратите внимание, что хотя команда для запроса элементов называется $ и $$, они не имеют ничего общего с jQuery или Sizzle Selector Engine. Поддерживаются следующие типы селекторов:

Селектор запросов CSS

Текст ссылки

Чтобы получить элемент привязки с определенным текстом, запросите текст, начинающийся со знака равенства (=).