Html anchor: — элемент ссылки — HTML

• Когда используется аббревиатура, и вы хотите предоставить расширение или определение вне содержания документа, используйте с соответствующим название .
• Чтобы определить аббревиатуру, которая может быть незнакома читателю, представьте термин, используя и встроенный текст, содержащий определение. Включайте атрибут title только в том случае, если встроенное расширение или определение недоступны.
• Когда присутствие аббревиатуры в тексте необходимо отметить семантически, полезен элемент . Это, в свою очередь, можно использовать для создания стилей или сценариев.
• Вы можете использовать вместе с , чтобы установить определения для терминов, которые являются аббревиатурами или акронимами. См. пример «Определение аббревиатуры» ниже.

Вопросы грамматики

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

Этот элемент предназначен исключительно для удобства автора, и все браузеры отображают его встроенным ( display : inline ) по умолчанию, хотя его стиль по умолчанию отличается от одного браузера к другому:

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

Семантическая разметка аббревиатуры

Чтобы разметить аббревиатуру без расширения или описания, используйте без каких-либо атрибутов, как показано в этом примере.

HTML

 
Использовать HTML легко и весело!
 

Результат

Стилизация аббревиатур

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

HTML

 
Используя CSS, вы можете оформить свои сокращения!
 

CSS

 сокращение {
  вариант шрифта: все прописные;
}
 

Результат

Предоставление расширения

Добавление атрибута title позволяет указать расширение или определение аббревиатуры или акронима.

HTML

 
Шутка Ашока заставила меня LOL добиться успеха.
 

Результат

Определение аббревиатуры

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

HTML

 

  HTML  – это
  язык разметки, используемый для создания семантики и структуры веб-страницы.

<р>
  Спецификация (spec) — это документ,
  подробно описывает, как технология или API должны функционировать и как они
  доступ.

 

Результат

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

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

Пример

 

  Нотация объектов JavaScript (JSON) — это упрощенная
  формат обмена данными.

 

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

BCD tables only load in the browser with JavaScript enabled. Включите JavaScript для просмотра данных.

• Использование элемента

Обнаружили проблему с содержанием этой страницы?

• Отредактируйте страницу на GitHub.
• Сообщить о проблеме с содержимым.
• Посмотреть исходный код на GitHub.

Хотите принять участие?

Узнайте, как внести свой вклад.

Последний раз эта страница была изменена 24 февраля 2023 г. участниками MDN.

Текстовые фрагменты | MDN

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

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

• . URL, например:
  • https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a.
• Вы можете сделать ссылку на определенный раздел документа, указав ссылку на его URL-адрес и фрагмент документа (ID) этого раздела, например:
  • https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#browser_compatibility.

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

 

  
Совместимость с браузером

 

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

Фрагменты текста делают это реальностью — они позволяют авторам ссылок гибко указывать текстовое содержимое для ссылки, а не фрагменты документа.

Подобно фрагментам документа, фрагменты текста добавляются к URL-адресу после символа решетки ( # ). Однако синтаксис немного отличается:

 https://example.com#:~:text=[prefix-,]textStart[textEnd][-suffix]
 

Ключевые части, которые необходимо понять, следующие:

:~:

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

текст=

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

textStart

Текстовая строка, указывающая начало связанного текста.

textEnd Дополнительно

Текстовая строка, определяющая конец связанного текста.

префикс- Дополнительно

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

-суффикс Дополнительный

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

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

Замечания по использованию

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

Фрагмент простого текста с textStart

• https://example.com#:~:text=for прокручивает и выделяет первый экземпляр текста для в документе.
• https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#:~:text=human прокручивает и выделяет первый экземпляр текста human в документе.
• https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#:~:text=linked%20URL прокручивает и выделяет первый экземпляр текста связанный URL в документе.

textStart и textEnd

• https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#:~:text=human,URL прокручивает и выделяет первый экземпляр текстовой строки начиная с человека и заканчивая URL .
• https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#:~:text=linked%20URL,определение%20a%20value прокручивает и выделяет первый экземпляр текстовой строки, начинающейся с связанный URL и заканчивающийся на определяющий значение . Обратите внимание, как выделенный текст охватывает несколько элементов блочного уровня.

Примеры с префиксом и/или суффиксом

• https://example.com#:~:text=asking-,for прокручивает и выделяет второй экземпляр текста для в документе.
• https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#:~:text=sent-,referrer прокручивает и выделяет первый экземпляр текста реферер , перед которым находится текст , отправленный . Это пятый экземпляр реферера в документе; без префикса будет выделен первый экземпляр.
• https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#:~:text=linked%20URL,-‘s%20format прокручивает и выделяет первый экземпляр связанного текста URL-адрес , за которым непосредственно следует текст в формате . Это пятый экземпляр связанных URL 9.0005 в документе; без суффикса будет выделен первый экземпляр.
• https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#:~:text=downgrade:-,The%20Referer,be%20sent,-to%20origins прокручивает и выделяет экземпляр текста Реферер ... должен быть отправлен с префиксом downgrade: и суффиксом к источникам . Это иллюстрирует более сложный пример, в котором префикс/суффикс используются для указания конкретного экземпляра текста, на который вы хотите сослаться. Попробуйте, например, удалить префикс и посмотреть, что совпадает.

URL-адреса с несколькими текстовыми фрагментами

Вы можете указать несколько текстовых фрагментов для выделения в одном URL-адресе, разделив их символами амперсанда ( и ). Давайте рассмотрим пару примеров:

• https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#:~:text=Causes&text=linked прокручивает и выделяет первые экземпляры текстовые строки Причины и связаны .
• https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#:~:text=linked%20URL,-'s%20format&text=Deprecated-,attributes,attribute прокручивает и выделяет два текстовые экземпляры:
  • Первый экземпляр текста связанного URL , за которым непосредственно следует текст формата .
  • Первый экземпляр текстовой строки, начинающейся с атрибута и заканчивающейся атрибутом с префиксом Устарело .

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

Стилизация совпадающих текстовых фрагментов

Браузеры могут свободно стилизовать выделенный текст любым способом по умолчанию, который они выбирают. Модуль псевдоэлементов CSS уровня 4 определяет псевдоэлемент ::target-text , который позволяет вам указать собственный стиль.

Например, в нашей демонстрации прокрутки к тексту у нас есть следующий CSS:

 ::target-text {
  фоновый цвет: rebeccapurple;
  белый цвет;
}
 

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

Программный доступ к текстовым фрагментам

В поддерживающих браузерах информация о совпадениях фрагментов текста в текущем документе содержится в объекте FragmentDirective , доступ к которому осуществляется через свойство Document. fragmentDirective .

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

 document.fragmentDirective;
 

Вы должны получить FragmentDirective 9Экземпляр объекта 0005 возвращен со структурой, подобной следующей:

 элемента: [
  {
    префикс: "",
    textStart: "Рабочие модули",
    Конец текста: "",
    суффикс: «поддержка»,
    тип: "текст",
  },
  {
    префикс: "обратная связь",
    textStart: "удобство использования",
    Конец текста: "",
    суффикс: "",
    тип: "текст",
  },
];
 

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

API

Фрагментная директива

Объект, представляющий фрагменты текста, выделенные в текущем документе.

Document.fragmentDirective

Возвращает FragmentDirective для текущего документа.

CSS

::целевой текст

Представляет выделенные фрагменты текста в текущем документе. Это позволяет авторам настраивать стиль текстовых фрагментов.

html.elements.a. text_fragments

Таблицы BCD загружаются только в браузере с включенным JavaScript. Включите JavaScript для просмотра данных.

api.FragmentDirective

Таблицы BCD загружаются только в браузере с включенным JavaScript. Включите JavaScript для просмотра данных.