Содержание
| WebReference
Элемент <a> (от англ. anchor — якорь) является одним из важных в HTML и предназначен для создания ссылок. Для этого необходимо сообщить браузеру, что является ссылкой, а также указать адрес документа, на который следует сделать ссылку. В качестве значения атрибута href используется адрес документа, на который происходит переход. Адрес ссылки может быть абсолютным и относительным. Абсолютные адреса работают везде и всюду независимо от имени сайта или веб-страницы, где прописана ссылка. Относительные ссылки, как следует из их названия, построены относительно текущего документа или корня сайта.
Синтаксис
<a href="<адрес>">...</a>
Атрибуты
- coords
- Устанавливает координаты активной области.
- download
- Предлагает скачать указанный по ссылке файл.
- href
- Задаёт адрес документа, на который следует перейти.
- hreflang
- Идентифицирует язык текста по ссылке.
- name
- Устанавливает имя якоря внутри документа.
- rel
- Отношения между ссылаемым и текущим документами.
- rev
- Отношения между текущим и ссылаемым документами.
- shape
- Задаёт форму активной области ссылки для изображений.
- target
- Имя окна или фрейма, куда браузер будет загружать документ.
- type
- Указывает MIME-тип документа, на который ведёт ссылка.
Также для этого элемента доступны универсальные атрибуты и события.
Пример
<!DOCTYPE HTML>
<html>
<head>
<meta charset=»utf-8″>
<title>А</title>
</head>
<body>
<p><a href=»image/xxx.jpg»>Посмотрите на мою фотографию!</a></p>
<p><a href=»page/tip.html»>Как сделать такое же фото?</a></p>
</body>
</html>
Спецификация
| Спецификация | Статус |
|---|---|
| WHATWG HTML Living Standard | Живой стандарт |
| HTML5 | Рекомендация |
HTML 4. 01 Specification | Рекомендация |
Браузеры
| 1 | 12 | 1 | 1.3 | 1 | 1 |
Ссылки
См. также
- text-decoration-skip-ink
- Использование :hover
- Ссылки
Рецепты
- Как заголовок сделать ссылкой?
- Как задать цвет ссылок?
- Как открыть ссылку в новой вкладке?
- Как сделать картинку ссылкой?
- Как сделать ссылку для скачивания?
- Как сделать ссылку на адрес электронной почты?
- Как сделать ссылку на изображение?
Практика
- Атрибут target
- Картинка как ссылка
- Создание ссылки
- Ссылка во фрейм
- Ссылка для скачивания
- Ссылка на email
- Ссылка на Google
- Ссылка на телефон
- Ссылки во фрейме
Ссылка-якорь — Ссылки и изображения — HTML Academy
HTML
<!DOCTYPE html>
<html lang=»ru»>
<head>
<meta charset=»utf-8″>
<title>Сайт начинающего верстальщика</title>
<link rel=»stylesheet» href=»style. css»>
</head>
<body>
<header>
<p>Блог</p>
<nav>
<a href=»index.html»>На главную</a>
</nav>
</header>
<main>
<article>
<h2>День тринадцатый. Нашёл статью</h2>
<p>Решил, что полезно будет.</p>
<h3>Зачем нужны заголовки?</h3>
<!— Добавьте идентификатор content этому заголовку —>
<h4>Оглавление</h4>
<ul>
<li>
<!— Добавьте адрес #intro этой ссылке —>
<a>Введение</a>
</li>
<li><a>Заголовки и неявные секции</a></li>
<li><a>Тег section</a></li>
<li><a>Уровни заголовков</a></li>
<li><a>Не всё так просто</a></li>
</ul>
<article>
<!— Добавьте идентификатор intro этому заголовку —>
<h4>Введение</h4>
<p>Когда много лет назад придумали HTML, мир был совсем другим. Авторы спецификации вдохновлялись текстовыми документами, где в одном потоке подряд шли абзацы, списки, таблицы, картинки и конечно заголовки. Прямо как в ваших рефератах и курсовых: самый большой заголовок — название, заголовки поменьше — части или главы.</p>
<h4>Заголовки и неявные секции</h4>
<p>В HTML с тех пор шесть уровней заголовков: от h2 до h6. Они озаглавливают всё, что за ними следует и образуют, так называемые, неявные секции. Такие логические части страницы. Неявные они потому, что закрываются только когда появляется следующий заголовок.</p>
<pre><code><h2>Еда</h2>
<h3>Фрукты</h3>
<p>Классные</p>
<h4>Яблоки</h4>
<p>Вообще</p></code></pre>
<p>Из-за такой системы неявных секций, спецификация настойчиво рекомендует не использовать элементы h* для подписей под заголовками. Это обычный параграф, а заголовок должен обозначать отдельную часть содержимого. В спецификации есть глава с примерами разметки сложных элементов: подписи, крошки, диалоги — почитайте.</p>
<h4>Тег section</h4>
<p>Но секции лучше задавать явно с помощью элемента section. Эти два фрагмента идентичны с точки зрения семантики, но этот гораздо понятнее, хоть и многословнее.</p>
<pre><code><h2>Еда</h2>
<section>
<h3>Фрукты</h3>
<p>Классные</p>
<section>
<h4>Яблоки</h4>
<p>Вообще</p>
</section>
</section></code></pre>
<h4>Уровни заголовков</h4>
<p>Ладно! Раз у нас есть явные секции, то по вложенности легко определить отношение частей. Так может браузеры сами догадаются какого уровня заголовки нужны? А то считать: h2, h3, аш… сбился. Так было бы удобнее менять части кода местами. Такая же идея пришла в голову авторам HTML5 и они описали в спецификации алгоритм аутлайна. Он разрешает использовать на странице только h2, а важность обозначать вложенностью структурных элементов вроде article и section.</p>
<pre><code><h2>Еда</h2>
<section>
<h2>Фрукты</h2>
<section>
<h2>Яблоки</h2>
</section>
</section></code></pre>
<p>Разработчикам идея очень понравилась, многие даже бросились её внедрять. Но вот беда: алгоритм аутлайна до сих не внедрил ни один браузер, читалка или поисковик. На таких страницах все заголовки кричат, что они №1 и самые важные. Но если важно всё, то уже ничего не важно.</p>
<p>Не надо так делать, об этом теперь пишет сама спецификация. За уровнем заголовков нужно следить самим. На самом деле, это не так сложно: на типичной странице вряд ли наберётся структурных частей больше, чем на 3 уровня. Так что не ленитесь.</p>
<h4>Не всё так просто</h4>
<p>Нет, погоди. Я ставлю класс на div и все сразу видят — это самый большой заголовок, ставлю другой класс — заголовок становится меньше, видно же. Зачем тогда эта ерунда с расчётом уровней, если есть CSS?</p>
<pre><code><div>
Фрукты бесплатно
</div>
<div>
Только за деньги
</div></code></pre>
<p>Вы конечно правы, стили создают визуальную модель важности: крупный чёрный текст важнее, меленький серенький вообще не важен. Но только если вы смотрите на такую страницу.</p>
<p>Есть две важные группы пользователей, которые читают вашу страницу по тегам разметки. Они не смотрят насколько крупный и чёрный ваш div — чтобы найти на странице самое важное, они ищут h2. Это читалки и роботы. С роботами всё понятно: это поисковики, которым нужно помогать понимать ваши страницы. </p>
<p>Читалками или скринридерами пользуются люди, которые плохо или совсем не видят ваши интерфейсы, или не могут управлять браузером привычным образом. VoiceOver, NVDA, JAWS читают содержимое вслух и ориентируются только по значимым тегам. Элементы div и span не значат ни-че-го, какие бы классы и стили вы не накрутили. Такой сайт — как газета без заголовков, просто месиво текста.</p>
<p>Да какая газета! Очнись, 2017 на дворе, я изоморфное одностраничное приложение делаю, а не стенгазету. У меня тут стейты компонентов — нафига семантика там, где нет текста? Очень хороший вопрос.</p>
<p>Все читалки идут по странице тег за тегом, от первого к последнему. И читают подряд всё, что внутри. Крайне неэффективно: каждая страница начинается с шапки и пока её пройдёшь, забудешь за чем шёл. Поэтому у читалок есть специальные режимы, показывающие только важные части страницы. Структурные элементы header, nav, main и другие, все ссылки, все заголовки. </p>
<p>Если вывести все заголовки и прочитать их, можно составить ментальную, а не визуальную модель страницы. А потом взять и сразу перейти к нужной секции, выбрав её заголовок. Меню, поиск, каталог, настройки, логин — все эти части вашего приложения можно озаглавить, чтобы упростить доступ к ним.</p>
<pre><code>— Инстаграм
— Лента
— Закат
— Латте
— Настройки
— Профиль</code></pre>
<p>Но бывает, что в дизайне нет заголовков для важных частей. Дизайнер рисует, ему всё ясно: меню с котлетой, поиск с полем и так далее. Но это не должно мешать вам делать доступные интерфейсы. Расставьте нужные заголовки, а потом доступно их спрячьте. Как? Только не display: none, его читалки игнорируют. Есть такой паттерн visually hidden, подробнее в описании к видео.</p>
<p>Думайте не только о том, как выглядит ваша вёрстка, но и о том, насколько логично организована разметка. Не забывайте о заголовках: пусть стили показывают, а заголовки рассказывают о ваших страницах или приложениях. </p>
<p>
<!— Добавьте адрес #content этой ссылке —>
<a>К оглавлению</a>
</p>
</article>
</article>
<aside>
Тут могла быть ваша реклама
</aside>
</main>
<footer>
Подвал сайта
</footer>
</body>
</html>
: Элемент Abbreviation — HTML: Язык гипертекстовой разметки
HTML-элемент представляет собой аббревиатуру или акроним.
При включении аббревиатуры или акронима предоставьте полное раскрытие термина в виде простого текста при первом использовании вместе с для обозначения аббревиатуры. Это информирует пользователя о том, что означает аббревиатура или аббревиатура.
Необязательный атрибут title может предоставить расширение для аббревиатуры или акронима, если полное раскрытие отсутствует. Это дает подсказку для пользовательских агентов о том, как объявлять/отображать контент, информируя всех пользователей о том, что означает аббревиатура. Если есть, заголовок должен содержать это полное описание и ничего больше.
Этот элемент поддерживает только глобальные атрибуты. Атрибут title имеет особое семантическое значение при использовании с элементом ; должен содержать полное удобочитаемое описание или расширение аббревиатуры. Этот текст часто представляется браузерами в виде всплывающей подсказки при наведении курсора мыши на элемент.
Каждый элемент , который вы используете, не зависит от всех остальных; предоставление заголовок для одного не прикрепляет автоматически один и тот же текст расширения к другим с таким же текстом содержимого.
Типичные варианты использования
Безусловно, не обязательно, чтобы все сокращения были размечены с помощью . Однако есть несколько случаев, когда это полезно сделать:
- Когда используется аббревиатура, и вы хотите предоставить расширение или определение вне содержания документа, используйте
название. - Чтобы определить аббревиатуру, которая может быть незнакома читателю, представьте термин, используя
titleтолько в том случае, если встроенное расширение или определение недоступны. - Когда присутствие аббревиатуры в тексте необходимо отметить семантически, полезен элемент
- Вы можете использовать
Вопросы грамматики
В языках с грамматическим числом (то есть в языках, в которых количество элементов влияет на грамматику предложения) используйте тот же грамматический номер в атрибуте title , что и внутри элемента . Это особенно важно для языков с более чем двумя числами, таких как арабский, но также актуально и для английского.
Этот элемент предназначен исключительно для удобства автора, и все браузеры отображают его встроенным ( display : inline ) по умолчанию, хотя его стиль по умолчанию отличается от одного браузера к другому:
Некоторые браузеры добавляют пунктирное подчеркивание содержимого элемента. Другие добавляют пунктирное подчеркивание при преобразовании содержимого в маленькие заглавные буквы. Другие не могут стилизовать его иначе, чем элемент . Чтобы управлять этим стилем, используйте украшение текста и вариант шрифта .
Семантическая разметка аббревиатуры
Чтобы разметить аббревиатуру без расширения или описания, используйте без каких-либо атрибутов, как показано в этом примере.
HTML
Использовать HTML легко и весело!
Результат
Стилизация аббревиатур
С помощью CSS можно задать собственный стиль для аббревиатур, как показано в этом простом примере.
HTML
Используя CSS, вы можете оформить свои сокращения!
CSS
сокращение {
вариант шрифта: все прописные;
}
Результат
Предоставление расширения
Добавление атрибута title позволяет указать расширение или определение аббревиатуры или акронима.
HTML
Шутка Ашока заставила меня LOL добиться успеха.
Результат
Определение аббревиатуры
Вы можете использовать в тандеме с для более формального определения аббревиатуры, как показано здесь.
HTML
HTML – это язык разметки, используемый для создания семантики и структуры веб-страницы.
Спецификация (spec) — это документ, подробно описывает, как технология или API должны функционировать и как они доступ.
Результат
Полное произнесение аббревиатуры или аббревиатуры при первом ее использовании на странице помогает людям понять ее, особенно если это технический или отраслевой жаргон.
Включайте заголовок только в том случае, если расширение аббревиатуры или аббревиатуры в тексте невозможно. Различие между произносимым словом или фразой и тем, что отображается на экране, особенно если это технический жаргон, с которым читатель может быть незнаком, может раздражать.
Пример
Нотация объектов JavaScript (JSON) — это упрощенная формат обмена данными.
Это особенно полезно для людей, которые не знакомы с терминологией или понятиями, обсуждаемыми в содержании, для людей, плохо знакомых с языком, и людей с когнитивными проблемами.
| Категории контента | Потоковое содержание, фразовое содержание, ощутимое содержание |
|---|---|
| Разрешенный контент | Фразы содержания |
| Отсутствие тега | Нет, начальный и конечный теги обязательны. |
| Разрешенные родители | Любой элемент, принимающий фразовое содержание |
| Неявная роль ARIA | Нет соответствующей роли |
| Разрешенные роли ARIA | Любой |
| Интерфейс DOM | HTMLЭлемент |
| Спецификация |
|---|
| HTML Standard # The-ABBR-ELEMENT |
950119595019959501195 .7595959595959595959595959595959595959595959595959595959595959595959595959595959595 9019.7. Включите JavaScript для просмотра данных.
- Использование элемента
Последнее изменение: , авторы MDN
Типы ссылок — HTML: язык гипертекстовой разметки
В HTML типы ссылок указывают на отношения между двумя документами, в которых один ссылается на другой с помощью , <область> , <форма> или <ссылка> элемент.