Атрибут href | htmlbook.ru
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 1.0+ | 1.0+ | 2.1+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Спецификация
| HTML: | 3.2 | 4.01 | 5.0 | XHTML: | 1.0 | 1.1 |
Описание
Задает адрес документа, на который следует перейти. Поскольку в качестве адреса ссылки может использоваться документ любого типа, то результат перехода по ссылке зависит от конечного файла. Так, архивы (файлы с расширением zip или rar) будут сохраняться на локальный диск. По умолчанию новый документ загружается в текущее окно браузера, однако это свойство можно изменить с помощью атрибута target.
Синтаксис
<a href="URL">...</a>
Обязательный атрибут
Обязателен для ссылок.
Значения
В качестве значения принимается полный или относительный путь к файлу.
Значение по умолчанию
Нет.
Пример
HTML5IECrOpSaFx
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Тег А, атрибут href</title>
</head>
<body>
<p><a href="../../example/knob.html">Относительная ссылка</a></p>
<p><a href="http://htmlbook.ru/example/knob.html">Абсолютная ссылка</a></p>
</body>
</html>Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.
a | Chrome Полная поддержка Да | Edge
Полная поддержка
| Firefox
Полная поддержка
Да
| IE Полная поддержка Да | Opera Полная поддержка Да | Safari Полная поддержка Да | WebView Android Полная поддержка Да | Chrome Android Полная поддержка Да | Firefox Android
| Opera Android Полная поддержка Да | Safari iOS Полная поддержка Да | Samsung Internet Android Полная поддержка Да |
|---|---|---|---|---|---|---|---|---|---|---|---|---|
charset | Chrome Полная поддержка Да | Edge Полная поддержка 12 | Firefox
Полная поддержка
| IE Полная поддержка Да | Opera Полная поддержка Да | Safari Полная поддержка Да | WebView Android Полная поддержка Да | Chrome Android Полная поддержка Да | Firefox Android Полная поддержка Да | Opera Android Полная поддержка Да | Safari iOS Полная поддержка Да | Samsung Internet Android Полная поддержка Да |
coords | Chrome Нет поддержки Нет | Edge Нет поддержки Нет | Firefox
Нет поддержки
? — 58
| IE Нет поддержки Нет | Opera Нет поддержки Нет | Safari Нет поддержки Нет | WebView Android Нет поддержки Нет | Chrome Android | Firefox Android
Нет поддержки
? — 58
| Opera Android Нет поддержки Нет | Safari iOS Нет поддержки Нет | Samsung Internet Android Нет поддержки Нет |
download | Chrome
Полная поддержка
14
| Edge
Полная поддержка
18
| Firefox Полная поддержка 20 | IE Нет поддержки Нет | Opera Полная поддержка 15 | Safari Полная поддержка 10.1 | WebView Android
Полная поддержка
Да
| Chrome Android
Полная поддержка
18
| Firefox Android Полная поддержка 20 | Opera Android
?
| Safari iOS Нет поддержки Нет | Samsung Internet Android
Полная поддержка
1.0
|
href | Chrome Полная поддержка Да | Edge Полная поддержка 12 | Firefox Полная поддержка Да | IE Полная поддержка Да | Opera
Полная поддержка
| Safari Полная поддержка Да | WebView Android Полная поддержка Да | Chrome Android Полная поддержка Да | Firefox Android Полная поддержка Да | Opera Android Полная поддержка Да | Safari iOS Полная поддержка Да | Samsung Internet Android Полная поддержка Да |
hreflang | Chrome Полная поддержка Да | Edge Полная поддержка 12 | Firefox | IE Полная поддержка Да | Opera Полная поддержка Да | Safari Полная поддержка Да | WebView Android Полная поддержка Да | Chrome Android Полная поддержка Да | Firefox Android Полная поддержка Да | Opera Android Полная поддержка Да | Safari iOS Полная поддержка Да | Samsung Internet Android Полная поддержка Да |
target="_blank" implies rel="noopener" behavior | Chrome Нет поддержки Нет | Edge Нет поддержки Нет | Firefox Полная поддержка 79 | IE Нет поддержки Нет | Opera Нет поддержки Нет | Safari Полная поддержка 12.1 | WebView Android Нет поддержки Нет | Chrome Android Нет поддержки Нет | Firefox Android Нет поддержки Нет | Opera Android Полная поддержка Да | Safari iOS Полная поддержка Да | Samsung Internet Android Нет поддержки Нет |
name | Chrome Полная поддержка Да | Edge Полная поддержка 12 | Firefox Полная поддержка Да | IE Полная поддержка Да | Opera Полная поддержка Да | Safari Полная поддержка Да | WebView Android Полная поддержка Да | Chrome Android Полная поддержка Да | Firefox Android Полная поддержка Да | Opera Android Полная поддержка Да | Safari iOS Полная поддержка Да | Samsung Internet Android Полная поддержка Да |
ping Экспериментальная | Chrome Полная поддержка Да | Edge Полная поддержка 79 | Firefox
Полная поддержка
Да
| IE Нет поддержки Нет | Opera Полная поддержка Да | Safari Нет поддержки Нет | WebView Android Полная поддержка Да | Chrome Android Полная поддержка Да | Firefox Android
Полная поддержка
Да
| Opera Android ? | Safari iOS Нет поддержки Нет | Samsung Internet Android Полная поддержка Да |
referrerpolicy | Chrome Полная поддержка 51 | Edge Полная поддержка 79 | Firefox Полная поддержка 50 | IE Нет поддержки Нет | Opera Полная поддержка 38 | Safari Полная поддержка 11.1 | WebView Android Полная поддержка 51 | Chrome Android Полная поддержка 51 | Firefox Android Полная поддержка 50 | Opera Android Полная поддержка 41 | Safari iOS Нет поддержки Нет | Samsung Internet Android Полная поддержка 7.2 |
rel | Chrome Полная поддержка Да | Edge Полная поддержка 12 | Firefox Полная поддержка Да | IE Полная поддержка Да | Opera Полная поддержка Да | Safari Полная поддержка Да | WebView Android Полная поддержка Да | Chrome Android Полная поддержка Да | Firefox Android Полная поддержка Да | Opera Android Полная поддержка Да | Safari iOS Полная поддержка Да | Samsung Internet Android Полная поддержка Да |
rev | Chrome Полная поддержка Да | Edge Полная поддержка 12 | Firefox Полная поддержка Да | IE Полная поддержка Да | Opera Полная поддержка Да | Safari Полная поддержка Да | WebView Android Полная поддержка Да | Chrome Android Полная поддержка Да | Firefox Android Полная поддержка Да | Opera Android Полная поддержка Да | Safari iOS Полная поддержка Да | Samsung Internet Android Полная поддержка Да |
shape | Chrome Нет поддержки Нет | Edge Нет поддержки Нет | Firefox
Нет поддержки
? — 58
| IE Нет поддержки Нет | Opera Нет поддержки Нет | Safari Нет поддержки Нет | WebView Android Нет поддержки Нет | Chrome Android Нет поддержки Нет | Firefox Android
Нет поддержки
? — 58
| Opera Android Нет поддержки Нет | Safari iOS Нет поддержки Нет | Samsung Internet Android Нет поддержки Нет |
target | Chrome Полная поддержка Да | Edge Полная поддержка 12 | Firefox Полная поддержка Да | IE Полная поддержка Да | Opera Полная поддержка Да | Safari Полная поддержка Да | WebView Android Полная поддержка Да | Chrome Android Полная поддержка Да | Firefox Android Полная поддержка Да | Opera Android Полная поддержка Да | Safari iOS Полная поддержка Да | Samsung Internet Android Полная поддержка Да |
type | Chrome Полная поддержка Да | Edge Полная поддержка 12 | Firefox Полная поддержка Да | IE Полная поддержка Да | Opera Полная поддержка Да | Safari Полная поддержка Да | WebView Android Полная поддержка Да | Chrome Android Полная поддержка Да | Firefox Android Полная поддержка Да | Opera Android Полная поддержка Да | Safari iOS Полная поддержка Да | Samsung Internet Android Полная поддержка Да |
Самое важное о ссылках в HTML
Для добавления ссылки в HTML документ, используют тег a (anсhor) вместе с атрибутом href. В данном атрибуте прописывается адрес, ведущий на внешний ресурс или внутреннюю страницу сайта. При клике на ссылку, пользователь будет перенаправлен по указанному адресу.
Цвет ссылки
По умолчанию браузеры отображают ссылки подчеркнутыми и синего цвета, а посещенные ссылки окрашивают в фиолетовый цвет.
<a href="https://myrusakov.ru/">Как создать свой сайт</a>
Абсолютная ссылка
Абсолютная ссылка указывает полный путь до HTML страницы или до файла. На практике их используют, когда нужно сослаться на внешний ресурс.
<a href="https://myrusakov.ru/">Myrusakov.ru</a>
Относительная ссылка
Относительные ссылки, как правило используют в пределах одного сайта и указывают путь от корня сайта или от текущего документа.
<a href="page.html">HTML страница</a>
Ссылка на файл
Кроме основной задачи (переадресации), с помощью ссылки запускается механизм на скачивание файлов. В атрибуте href указывается путь до файла и атрибут download. Наличие данного атрибута, предлагает браузеру не переходить по адресу, а скачать файл, указанный в адресе ссылки.
<a href="file.doc" download>Ссылка скачать файл</a>
Открытие ссылки
По умолчанию ссылка открывается (осуществляется переход пользователя) на другую страницу или сайт в том же окне браузера. Открытие ссылки в текущем окне в пределах одного сайта не является проблемой. Но все меняется, если мы имеем дело с ссылкой на внешний ресурс. Пользователь уходит по ссылке на другой сайт и не всегда потом может вернуться назад. Поэтому удобнее, когда внешняя ссылка открывается в новом окне. Для этого существует атрибут target. С помощью него можно указать, как будет открываться страница, на которую осуществляется переход. Значение _blank у атрибута target открывает страницу в новой вкладке.
<a href="https://myrusakov.ru/" target="_blank">Myrusakov.ru</a>
Ссылка на телефон
Одно нажатие по ссылке на телефон сработает (произойдет вызов номера) при заходе на сайт с мобильного телефона. Пользователю не нужно копировать или куда-то записывать номер телефона. Достаточно в атрибуте tel прописать номер телефона в международном формате.
<a href="tel:+370-325-23">+370-325-23</a>
Ссылка на почту
Кликнув по ссылке на адрес электронной почты, в браузере откроется программа для отправки писем с адресом получателя.
<a href="mailto:[email protected]">E-mail</a><
Ссылка якорь
Ссылка якорь нужна для навигации в пределах одной страницы. Обычно якоря используют на длинных одностраничниках и размещают в верхней панели навигации. Пользователь кликает на пункт меню и поисходит автоматический скролл до выбранной секции.
Пользователь кликает на ссылку-якорь в навигационной панели.
<a href="#footer">Контакты</a>
и его перебрасывает в footer.
<footer>подвал</footer>
Как кнопку сделать ссылкой?
Тег button не может быть ссылкой, если он не находится внутри формы. Кроме того расположение ссылки как внутри тега button, так и снаружи не валидно.
Так неправильно:
<a href="url"><button>Кнопка ссылка</button></a>
<button><a href="url">Кнопка ссылка</a></button>
Так что же делать? Отказаться от тега button и стилизовать класс, как у обычной ссылки.
<a href="url">Кнопка со ссылкой</a>.btn {
display: inline-block; /* Строчно-блочный элемент */
background: #d81b6b; /* Красный цвет фона */
color: #fff; /* Белый цвет текста */
}
Активная ссылка
Ссылка, на которую нажал пользователь, является активной. Чтобы как-то её выделить среди остальных ссылок, можно в CSS стилях задать ей другой цвет через псевдокласс active.
a:active {
color: red;
}
Ссылка при наведении
Чтобы изменить внешний вид ссылки (как правило цвет), при наведении на неё курсора, следует задать ей псевдокласс hover.
a:hover {
color: #11dd77;
}
Ссылка на изображение
Если поместить изображение внутри ссылки, то оно само станет ссылкой.
<a href="gallery.html"><img src="image.jpg" alt=""></a>
В сайтостроении, как и в большинстве темах, теория не работает без практики. Лучше всего смотреть, как делают верстку профессионалы и повторять за ними. Мой видеокурс "Вёрстка сайта с нуля 2.0" нацелен именно на такой формат обучения.
-
Создано 28.02.2020 10:07:22 -
Михаил Русаков
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
Ссылка html тег пример Код, обозначение.
Что такое ссылка в html, тег/код ссылки, открытие в новой вкладок по ссылке, ссылка на другую часть страницы примеры
Тег/код ссылки html
Ссылка - это один из тегов html, представляет собой двойной тег a, в атрибуте href указывают ссылку на другой файл, страницу:<a href="адрес_ссылки">текст_ссылки</a>
Ссылка html
Тип/вид адреса ссылки
Есть несколько типов/видов адреса на ссылку это:
1). Локальный адрес ссылки html
Если файл, страница, на который/ую ставится ссылка находится в этой же папке, то такая ссылка сработает, иначе - ошибка(скорее всего будет выдана ошибка 404)<a href="example.html">текст_ссылки</a>
2). Абсолютный адрес ссылки html
Ссылка из адресной строки, называется абсолютной ссылкой, она записывается с указанием этого адреса в атрибуте href<a href="https://dwweb.ru/page/html/004_ssyilka_html.html">текст_ссылки</a>
3). Абсолютный адрес ссылки без http/https html
Ссылка может использоваться без указания http/https:
<a href="//dwweb.ru/page/html/004_ssyilka_html.html">текст_ссылки</a>
4). Ссылки html без домена
Возможно использование ссылки без домена - естественно, нужно понимать, что установка такой ссылки на другом сайте, приведет к 404<a href="/page/html/004_ssyilka_html.html">текст_ссылки</a>
Ссылка на часть текста на странице
Для того, чтобы сделать ссылку на другую часть страницы, ссылка на абзац, ссылка на слово - не важно а что вы хотите сделать ссылку, на этой странице, вам потребуется две части... ссылка и якорь:1). Ссылка на часть текста на странице локально
<a href="#paragraph_3">текст_ссылки</a>
Якорь может быть пустым, либо с текстом...:
<a name="paragraph_4"></a>
Пример работы ссылки + якорь
Данная ссылка приведена в качестве примера, как это должно работать! Если мы откроем код, то увидим вот такую ссылка html:
<a href="#example">Пример ссылки с решеткой</a>
Результат нажми по ссылке:
Пример ссылки с решеткой2). Ссылка на часть текста на странице абсолютный путь
Ссылка на часть текст может быть и на другую страницу. например, если м ы ходим передать в ссылке ссылку на часть текста...
Сверху нашего этого абзаца с номером 2, поставим якорь:<a name="example_1"></a>
Далее нам нужна ссылка на этот якорь:
<a href="//dwweb.ru/page/html/004_ssyilka_html.html#paragraph_3">текст_ссылки</a>
Результат - пример ссылки на часть текста другой страницы:
ссылка на другую страницуСсылка на часть текста на странице -> id
Вместо использования ссылки в виде атрибута name, допускается использование в качестве якоря idНапример сделаем в качестве якоря:
<div>Пример id = example_2</div>
Ссылка... обыкновенная с решеткой:
<a href="#example_2">Пример ссылки</a>
Пример, ссылки на часть текста, который имеет id
Пример ссылкиСсылка html на изображении
Для того, чтобы поставить ссылку на изображение, нам понадобится изображение:
<img src="//dwweb.ru/__img/examples/example.png" alt="example.png">
Далее нужна ссылка, в которую будем оборачивать изображение:
<a href=https://dwweb.ru/ target=_blank></a>
Соединяем весь код вместе, ссылка + изображение:
<a href=https://dwweb.ru/ target=_blank><img src="//dwweb.ru/__img/examples/example.png" alt="example.png"></a>
Результат:
Ссылка на телефон html
Можно поставить ссылку на телефон
<a href="tel:+380985554433">Позвоните нам!</a>
Результат:
Позвоните нам!Ссылка html скачать/download
Ссылка может быть на скачивание файла, разрешение любое, если это файл, то файл ложен будет скачаться! Буквально вчера делали пример записи в файл - из этого пункта возьмем пример файл для скачивания, вы можете посмотреть на него... и вот эту ссылку, по октрой вы прошлти или не прошли.. поставим в ссылку для скачивания:<a href="https://dwweb.ru/__a-data/__all_for_scripts/__examples/php/tets_zapisi/tekst_dlya_zapisi_2.txt" download>Скачать файл</a>
Результат ссылка с атрибутом скачать:
Для того, чтобы проверить, как работает ссылка с атрибутом download - нажмите по ссылке...
Скачать файлHTML тег ссылки
Пример
Ссылка на внешнюю таблицу стилей:
Попробуй сам "
Определение и использование
Тег определяет
связь между текущим документом и внешним
ресурс.
Тег чаще всего используется для ссылки на внешние таблицы стилей.
Элемент - пустой элемент, он содержит только атрибуты.
Поддержка браузера
При использовании для таблиц стилей тег поддерживается во всех основных браузерах. Никакой реальной поддержки ни для чего другого.
| Элемент | |||||
|---|---|---|---|---|---|
| <ссылка> | Есть | Есть | Есть | Есть | Есть |
Атрибуты
| Атрибут | Значение | Описание |
|---|---|---|
| перекрестного происхождения | анонимный учетные данные |
Определяет, как элемент обрабатывает запросы из разных источников. |
| href | URL | Определяет расположение связанного документа |
| hreflang | language_code | Задает язык текста в связанном документе |
| СМИ | media_query | Указывает, на каком устройстве будет отображаться связанный документ |
| referrerpolicy | no-referrer no-referrer-when-downgrade origin origin-when-cross-origin unsafe-url |
Указывает, какой реферер использовать при выборке ресурса |
| отн. | альтернативный автор dns-prefetch справка значок лицензия следующие pingback предварительное подключение предварительная загрузка предварительная загрузка предварительная загрузка предыдущая поиск таблица стилей |
Обязательно.Определяет связь между текущим документом и связанным документом |
| размеры | Высота x Ширина любой |
Задает размер связанного ресурса. Только для rel = "icon" |
| название | Определяет предпочтительную или альтернативную таблицу стилей | |
| тип | media_type | Задает тип носителя для связанного документа |
Глобальные атрибуты
Тег также поддерживает глобальные атрибуты в HTML.
Атрибуты событий
Тег также поддерживает атрибуты событий в HTML.
Связанные страницы
Учебное пособие по HTML: стили HTML
Ссылка на HTML DOM: объект ссылки
Настройки CSS по умолчанию
Большинство браузеров отображают элемент со следующими значениями по умолчанию:
ссылка {
дисплей: нет;
}
,
html - что делает ссылка href = "#"?
- Товары
- Клиенты
- Случаи использования
- Переполнение стека Общественные вопросы и ответы
- Команды Частные вопросы и ответы для вашей команды
- предприятие Частные вопросы и ответы для вашего предприятия
- работы Программирование и связанные с ним возможности технической карьеры
- Талант Нанять технических талантов
- реклама Обратитесь к разработчикам по всему миру
Загрузка…
- Авторизоваться зарегистрироваться
-
текущее сообщество
- Переполнение стека Помогите чат
href-ссылка для всего div в HTML / CSS
- Товары
- Клиенты
- Случаи использования
- Переполнение стека Общественные вопросы и ответы
- Команды Частные вопросы и ответы для вашей команды
- предприятие Частные вопросы и ответы для вашего предприятия
- работы Программирование и связанные с ним возможности технической карьеры
- Талант Нанять технических талантов
- реклама Обратитесь к разработчикам по всему миру
html - ссылка href на img
- Товары
- Клиенты
- Случаи использования
- Переполнение стека Общественные вопросы и ответы
- Команды Частные вопросы и ответы для вашей команды
- предприятие Частные вопросы и ответы для вашего предприятия
- работы Программирование и связанные с ним возможности технической карьеры
- Талант Нанять технических талантов
- реклама Обратитесь к разработчикам по всему миру