Href ссылка: Атрибут href | htmlbook.ru

Leave a Comment / Разное / By /

Содержание

Атрибут 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, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.

— Веб-технологии для разработчиков

aChrome Полная поддержка ДаEdge Полная поддержка 12Firefox Полная поддержка Да
Полная поддержка Да
Замечания Starting with Firefox 41, <a> without href attribute is no longer classified as interactive content: clicking it inside <label> will activate labelled content (bug 1167816).
IE Полная поддержка ДаOpera Полная поддержка
Да		Safari Полная поддержка ДаWebView Android Полная поддержка ДаChrome Android Полная поддержка ДаFirefox Android Полная поддержка Да
Полная поддержка Да
Замечания Starting with Firefox 41, <a> without href attribute is no longer classified as interactive content: clicking it inside <label> will activate labelled content (bug 1167816).
Opera Android
Полная поддержка Да		Safari iOS Полная поддержка ДаSamsung Internet Android Полная поддержка Да
charset Chrome Полная поддержка ДаEdge Полная поддержка 12Firefox Полная поддержка ДаIE Полная поддержка ДаOpera Полная поддержка ДаSafari
Полная поддержка Да		WebView Android Полная поддержка ДаChrome Android Полная поддержка ДаFirefox Android Полная поддержка ДаOpera Android Полная поддержка ДаSafari iOS Полная поддержка ДаSamsung Internet Android Полная поддержка Да
coords Chrome Нет поддержки Нет Edge Нет поддержки НетFirefox Нет поддержки ? — 58
Нет поддержки ? — 58
Замечания You can no longer nest an <a> element inside a <map> element to create a hotspot region — coords and shape attribute support removed.
IE Нет поддержки НетOpera Нет поддержки НетSafari Нет поддержки НетWebView Android Нет поддержки
Нет		Chrome Android Нет поддержки НетFirefox Android Нет поддержки ? — 58
Нет поддержки ? — 58
Замечания You can no longer nest an <a> element inside a <map> element to create a hotspot region — coords and shape attribute support removed.
Opera Android Нет поддержки НетSafari iOS Нет поддержки НетSamsung Internet Android Нет поддержки Нет
downloadChrome Полная поддержка 14
Полная поддержка 14
Замечания Starting in Chrome 65, cross-origin downloads are not supported on the <a> element.
Edge Полная поддержка 18
Полная поддержка 18
Частичная поддержка 13
Замечания Until Edge 14 (build 14357), attempting to download data URIs caused Edge to crash (bug 7160092).
Замечания Edge 17 or older didn’t follow the attributes’ value to determine filename (bug 7260192).
Firefox Полная поддержка 20IE Нет поддержки НетOpera Полная поддержка 15Safari Полная поддержка 10.1WebView Android Полная поддержка Да
Полная поддержка Да
Замечания Starting in WebView 65, cross-origin downloads are not supported on the <a>
element.
Chrome Android Полная поддержка 18
Полная поддержка 18
Замечания Starting in Chrome 65, cross-origin downloads are not supported on the <a> element.
Firefox Android Полная поддержка 20Opera Android ? Safari iOS Нет поддержки НетSamsung Internet Android Полная поддержка 1.0
Полная поддержка 1.0
Замечания Starting in Samsung Internet 9.0, cross-origin downloads are not supported on the <a> element.
hrefChrome Полная поддержка ДаEdge Полная поддержка 12Firefox Полная поддержка ДаIE Полная поддержка ДаOpera Полная поддержка ДаSafari Полная поддержка ДаWebView Android Полная поддержка ДаChrome Android Полная поддержка ДаFirefox Android Полная поддержка ДаOpera Android Полная поддержка ДаSafari iOS Полная поддержка ДаSamsung Internet Android Полная поддержка Да
hreflangChrome Полная поддержка ДаEdge Полная поддержка 12Firefox Полная поддержка Да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 Полная поддержка 79IE Нет поддержки НетOpera Нет поддержки НетSafari Полная поддержка 12.1WebView Android Нет поддержки НетChrome Android Нет поддержки НетFirefox Android Нет поддержки НетOpera Android Полная поддержка ДаSafari iOS Полная поддержка ДаSamsung Internet Android Нет поддержки Нет
name Chrome Полная поддержка ДаEdge Полная поддержка 12Firefox Полная поддержка ДаIE Полная поддержка ДаOpera Полная поддержка ДаSafari Полная поддержка ДаWebView Android Полная поддержка ДаChrome Android Полная поддержка ДаFirefox Android Полная поддержка ДаOpera Android Полная поддержка ДаSafari iOS Полная поддержка ДаSamsung Internet Android Полная поддержка Да
ping ЭкспериментальнаяChrome Полная поддержка ДаEdge Полная поддержка 79Firefox Полная поддержка Да
Полная поддержка Да
Отключено This feature is behind the browser.send_pings preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Нет поддержки НетOpera Полная поддержка ДаSafari Нет поддержки НетWebView Android Полная поддержка ДаChrome Android Полная поддержка ДаFirefox Android Полная поддержка Да
Полная поддержка Да
Отключено This feature is behind the browser.send_pings preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android ? Safari iOS Нет поддержки НетSamsung Internet Android Полная поддержка Да
referrerpolicyChrome Полная поддержка 51Edge Полная поддержка 79Firefox Полная поддержка 50IE Нет поддержки НетOpera Полная поддержка 38Safari Полная поддержка 11.1WebView Android Полная поддержка 51Chrome Android Полная поддержка 51Firefox Android Полная поддержка 50Opera Android Полная поддержка 41Safari iOS Нет поддержки НетSamsung Internet Android Полная поддержка 7.2
relChrome Полная поддержка ДаEdge Полная поддержка 12Firefox Полная поддержка ДаIE Полная поддержка ДаOpera Полная поддержка ДаSafari Полная поддержка ДаWebView Android Полная поддержка ДаChrome Android Полная поддержка ДаFirefox Android Полная поддержка ДаOpera Android Полная поддержка ДаSafari iOS Полная поддержка ДаSamsung Internet Android Полная поддержка Да
rev Chrome Полная поддержка ДаEdge Полная поддержка 12Firefox Полная поддержка ДаIE Полная поддержка ДаOpera Полная поддержка ДаSafari Полная поддержка ДаWebView Android Полная поддержка ДаChrome Android Полная поддержка ДаFirefox Android Полная поддержка ДаOpera Android Полная поддержка ДаSafari iOS Полная поддержка ДаSamsung Internet Android Полная поддержка Да
shape Chrome Нет поддержки НетEdge Нет поддержки НетFirefox Нет поддержки ? — 58
Нет поддержки ? — 58
Замечания You can no longer nest an <a> element inside a <map> element to create a hotspot region — coords and shape attribute support removed.
IE Нет поддержки НетOpera Нет поддержки НетSafari Нет поддержки НетWebView Android Нет поддержки НетChrome Android Нет поддержки НетFirefox Android Нет поддержки ? — 58
Нет поддержки ? — 58
Замечания You can no longer nest an <a> element inside a <map> element to create a hotspot region — coords and shape attribute support removed.
Opera Android Нет поддержки НетSafari iOS Нет поддержки НетSamsung Internet Android Нет поддержки Нет
targetChrome Полная поддержка ДаEdge Полная поддержка 12Firefox Полная поддержка ДаIE Полная поддержка ДаOpera Полная поддержка ДаSafari Полная поддержка ДаWebView Android Полная поддержка ДаChrome Android Полная поддержка ДаFirefox Android Полная поддержка ДаOpera Android Полная поддержка ДаSafari iOS Полная поддержка ДаSamsung Internet Android Полная поддержка Да
typeChrome Полная поддержка ДаEdge Полная поддержка 12Firefox Полная поддержка ДаIE Полная поддержка ДаOpera Полная поддержка ДаSafari Полная поддержка ДаWebView Android Полная поддержка ДаChrome Android Полная поддержка ДаFirefox Android Полная поддержка ДаOpera Android Полная поддержка ДаSafari iOS Полная поддержка ДаSamsung Internet Android Полная поддержка Да

Самое важное о ссылках в HTML

Самое важное о ссылках в 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» нацелен именно на такой формат обучения.

  • Самое важное о ссылках в HTML Создано 28.02.2020 10:07:22
  • Самое важное о ссылках в HTML Михаил Русаков

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (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>

    Результат:

    example.png

  • Ссылка на телефон 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 = «#»?

    Переполнение стека
    1. Товары
    2. Клиенты
    3. Случаи использования
    1. Переполнение стека Общественные вопросы и ответы
    2. Команды Частные вопросы и ответы для вашей команды
    3. предприятие Частные вопросы и ответы для вашего предприятия
    4. работы Программирование и связанные с ним возможности технической карьеры
    5. Талант Нанять технических талантов
    6. реклама Обратитесь к разработчикам по всему миру

    Загрузка…

    2. Авторизоваться зарегистрироваться

    3. текущее сообщество

      • Переполнение стека Помогите чат
    .

    href-ссылка для всего div в HTML / CSS

    Переполнение стека
    1. Товары
    2. Клиенты
    3. Случаи использования
    1. Переполнение стека Общественные вопросы и ответы
    2. Команды Частные вопросы и ответы для вашей команды
    3. предприятие Частные вопросы и ответы для вашего предприятия
    4. работы Программирование и связанные с ним возможности технической карьеры
    5. Талант Нанять технических талантов
    6. реклама Обратитесь к разработчикам по всему миру
    ,

    html — ссылка href на img

    Переполнение стека
    1. Товары
    2. Клиенты
    3. Случаи использования
    1. Переполнение стека Общественные вопросы и ответы
    2. Команды Частные вопросы и ответы для вашей команды
    3. предприятие Частные вопросы и ответы для вашего предприятия
    4. работы Программирование и связанные с ним возможности технической карьеры
    5. Талант Нанять технических талантов
    6. реклама Обратитесь к разработчикам по всему миру
    ,

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

    Ваш адрес email не будет опубликован.