Содержание

Как сделать ссылку в HTML?

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

Для создания гиперссылки, воспользуйтесь тегом <a> вместе с атрибутом href. Значением атрибута href является URL-адрес или местоположение, на которое будет указывать ссылка.

Пример:

<p>Here are some <a href="https://www.quackit.com/html/codes/">HTML codes</a> to play with.</p>

Посмотреть пример

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

  • Ссылка в HTML-абсолютные адреса
  • Ссылка в HTML- относительные адреса
  • Ссылка в HTML — адреса относительно корня сайта
  • Ссылка в HTML — цели
  • Ссылка в HTML — ссылки перехода
  • Ссылка в HTML — ссылки на электронную почту
  • Ссылка в HTML — базовый href

Это относится к случаю, когда URL-адрес содержит полный путь. Например:

<a href="https://www.quackit.com/html/tutorial/">HTML Tutorial</a>

В этом случае в URL-адресе указывается путь относительно текущего положения. Например, если мы хотим сослаться на URL-адрес https://www.quackit.com/html/tutorial/, а наше текущее местоположение — https://www.quackit.com/html/, нужно использовать следующую ссылку:

<a href="tutorial/">HTML Tutorial</a>

Это относится к URL-адресу ссылки HTML, в котором определен путь относительно корня домена.

Например, если мы хотим ссылаться на URL-адрес https://www.quackit.com/html/tutorial/, а текущее местоположение — https://www.quackit.com/html/, нужно использовать следующую ссылку:

<a href="/html/tutorial/">HTML Tutorial</a>

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

Также можно определить, где будет открыт URL-адрес: в новом окне или в текущем. Это можно сделать с помощью атрибута target. Например, target = «_ blank» открывает URL в новом окне.

Атрибут target может принимать следующие значения:

_blank: открывает ссылку в новом окне HTML.
_self: загружает URL-адрес в текущем окне. 
_parent: загружает URL-адрес в родительский фрейм (все также в текущем окне браузера). Применимо только при использовании фреймов.
_top: загружает URL-адрес в текущем окне браузера, но отменяет другие фреймы.

Пример:

<a href="https://www.quackit.com" target="_blank">Quackit</a>

Посмотреть пример

Можно сделать ссылки, которые будут направлять в другие разделы в переделах одной страницы (или другой).

Вот как создается ссылка в HTML на эту же страницу:

  • Добавьте идентификатор к цели ссылки

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

<h3>Elephants</h3>
  • Создайте гиперссылку

Теперь создайте гиперссылку. Это делается с помощью идентификатора цели ссылки, которому предшествует символ хэша (#):

<a href="#elephants">Jump to Elephants</a>

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

<!DOCTYPE html>
<html>
<title>Example</title>
<body>
<p><a href="#elephants">Jump to Elephants</a></p>
<h3>Cats</h3>
<p>All about cats.</p>
<h3>Dogs</h3>
<p>All about dogs.</p>
<h3>Birds</h3>
<p>All about birds.</p>
<h3>Elephants</h3>
<p>All about elephants.</p>
<h3>Monkeys</h3>
<p>All about monkeys.</p>
<h3>Snakes</h3>
<p>All about snakes.
 
 </p>
<h3>Rats</h3>
<p>All about rats.</p>
<h3>Fish</h3>
<p>All about fish.</p>
<h3>Buffalo</h3>
<p>All about buffalo.</p>
</body>
</html>

Посмотреть пример

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

<a href="http://www.example.com#elephants">Jump to Elephants</a>

Конечно, предполагается, что на странице есть идентификатор с этим значением.

Также можно создать гиперссылку на адрес электронной почты. Для этого используйте атрибут mailto в теге ссылки:

<a href="mailto:[email protected]">Email King Kong</a>

Посмотреть пример

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

Можно автоматически заполнить строку темы для своих пользователей, и даже тело письма. Это делается путем добавления параметров subject и body к адресу электронной почты.

<a href="mailto:[email protected]?subject=Question&body=Hey there">Email King Kong</a>

Посмотреть пример

Можно задать URL-адрес по умолчанию, с которого будут начинаться все ссылки HTML на странице. Для этого поместите тег base (вместе с атрибутом href) в элемент <head>.

Пример HTML кода:

<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<base url="https://www.quackit.com">
</head>
<body>
<a href="html">HTML</a>
</body>
</html>

Посмотреть пример

Пожалуйста, оставьте ваши мнения по текущей теме материала. За комментарии, подписки, дизлайки, лайки, отклики низкий вам поклон!

Пожалуйста, оставьте ваши мнения по текущей теме материала. За комментарии, подписки, дизлайки, лайки, отклики низкий вам поклон!

МЛМария Логутенкоавтор-переводчик статьи «HTML Links: How to create Links to other Web Pages»

— HTML — Дока

Кратко

Скопировано

Тег <a> превращает любой объект в ссылку.

Пример

Скопировано

<a href="https://www.yandex.ru/">Яндекс</a>
          <a href="https://www.yandex.ru/">Яндекс</a>
Открыть демо в новой вкладке

Как понять

Скопировано

Разместите текст, картинку или другой элемент внутри тега <a>, чтобы сделать его ссылкой. Ссылка может вести на любую страницу, файл, электронную почту или телефон. Для этого пропишите обязательный атрибут href="URL", где URL — любой адрес.

Бывает, что ссылка ведёт не на другую страницу, а на раздел внутри текущей страницы. Тогда такая ссылка называется якорной или просто «якорем». Чтобы её создать, вместо URL укажите идентификатор #id элемента, к которому должна вести ссылка. Например, <a href="#chapter1">Глава 1</a>. Идентификатор можно задать для любого тега, то есть «бросить якорь» в любую часть страницы.

Как пишется

Скопировано

<a href="URL">...</a>
          <a href="URL">...</a>

Атрибуты

Скопировано

download — если кликнуть по такой ссылке, браузер предложит пользователю скачать то, что по ней находится. Это может быть файл или другая страница — главное, чтобы они находились на том же домене, что и ссылка. Если добавить атрибуту значение, можно задать название скачиваемому файлу. Например, <a href="/?z=484c08ca" download="фотки.zip"> предложит скачать файл с названием фотки.zip. Пользователь сможет изменить название при скачивании.

href — обязательный атрибут, содержащий адрес, по которому перейдёт пользователь, нажав на ссылку. Это может быть либо URL-адрес, либо якорная ссылка #id. Якорная ссылка ведёт на элемент с таким же #id на этой странице. URL может вести не только на привычные страницы в интернете, но также на почту или телефон, например href="mailto:name@domain.com" или href="tel:+70001234567". Для этого добавьте в значение атрибута один из протоколов, например, file:, mailto: или tel:.

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

ping — этот коварный атрибут следит, что пользователь перешёл по тому URL-адресу, который в нём указан.

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

target — определяет, где откроется ссылка: в том же окне, в новой вкладке или в новом окне браузера. Без этого атрибута содержимое ссылки откроется в той же вкладке. Вот все варианты, где можно открыть URL-ссылку:

  • _self: на той же странице. Значение по умолчанию, если именно оно вам нужно, то можно не указывать этот атрибут.
  • _blank: в новой вкладке или в новом окне браузера — это зависит от настроек браузера, но чаще всего это именно вкладка.
  • _parent: на родительской странице от текущей, то есть уровнем вложенности выше. Например, если на страницу вставлен фрейм, а внутри него такая ссылка, то она откроется не внутри фрейма, а на той странице, куда вставлен этот фрейм. Если родительской страницы нет, то ссылка откроется вместо текущей страницы.
  • _top: в самой высокой «корневой» странице. Например, если есть страница, куда вставлен фрейм, в который вставлен фрейм, в котором ссылка c target="_top", то ссылка откроется в самой-самой верхней странице, насколько глубоко она бы ни находилась.

Используйте этот атрибут, только если указан href.

💡 Вместе с атрибутом target обязательно используйте rel="noopener noreferrer", чтобы в момент открытия внешние сайты не узнали лишнего про текущую страницу.

type — определяет, к какому типу относится документ по ссылке. Речь идёт о типах по стандарту MIME. Это чисто техническая информация, но её можно указать, чтобы применить общий стиль к ссылкам одного типа.

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

Подсказки

Скопировано

💡 Чтобы отправить пользователя в самый верх страницы, используйте href="#top" или href="#".

💡 Обязательно указывайте атрибут href для ссылок, без него они неотличимы от <span> и перестают иметь смысл. Спецификация HTML допускает «логические» ссылки без href для текущих или будущих ссылок, но практической пользы в этом мало.

💡 Якорная ссылка может также вести и на нужный раздел внешней страницы. Для этого используйте URL-ссылку, а в конце, после знака #, добавьте ID якоря. Например: https://yoursite.com/how-to-make-cookies#alternative-recipe

Ещё примеры

Скопировано

Сделаем так, чтобы ссылка открывалась в новой вкладке браузера:

<a href="https://doka.
 
 guide/" target="_blank">  <img src="dogs.png" alt="Три собаки: одна смотрит влево, вторая закрыла глаза и спит, третья смотрит вправо"></a>
          <a href="https://doka.guide/" target="_blank">
  <img src="dogs.png" alt="Три собаки: одна смотрит влево, вторая закрыла глаза и спит, третья смотрит вправо">
</a>
Открыть демо в новой вкладке

Сделаем ссылку для отправки письма на почту:

<a href="mailto:[email protected]">Отправить сообщение в никуда</a>
          <a href="mailto:[email protected]">Отправить сообщение в никуда</a>
Открыть демо в новой вкладке

На практике

Скопировано

Вадим Макеев советует

Скопировано

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

Чтобы создать такую ссылку, нужно две вещи:

  1. Добавить уникальный id="element" целевому элементу.
  2. Сослаться на него с помощью ссылки вида #element.
<a href="#section-1">  Фотографии пёсиков</a>…<section>  <h4>Фотографии пёсиков</h4></section>
          
 
<a href="#section-1">
  Фотографии пёсиков
</a>
…
<section>
  <h4>Фотографии пёсиков</h4>
</section>

Чтобы перемещение по якорю было плавным, можно добавить свойство scroll-behavior контейнеру, который будет прокручиваться. Чаще всего, это <body>:

body {  scroll-behavior: smooth;}
          body {
  scroll-behavior: smooth;
}

Обратите внимание, что уникальность id важна, поскольку браузер рассчитывает, что на странице есть только один такой элемент и найдёт только первый по коду, а до второго не дойдёт.

Расстановку таких id лучше поручить шаблонизатору, он точно не ошибётся.

Например, генераторы статики умеют делать уникальный id из содержимого заголовка:

<h4>  Уникальный заголовок</h4>
          <h4>
  Уникальный заголовок
</h4>

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

h4 {  scroll-margin: 20px;}
          h4 {
  scroll-margin: 20px;
}

Алёна Батицкая советует

Скопировано

🛠 По умолчанию ссылка — строчный элемент. Поэтому, если нужно обернуть в неё целый блок, задайте для ссылки display: block.

🛠 Ссылку нельзя вкладывать в ссылки 🤷‍♀️

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

<!-- Плохо --><a href="#">  <h3>Заголовок, он же ссылка</h3></a><!-- Хорошо --><h3>  <a href="#">Заголовок, он же ссылка</a></h3>
          <!-- Плохо -->
<a href="#">
  <h3>Заголовок, он же ссылка</h3>
</a>
<!-- Хорошо -->
<h3>
  <a href="#">Заголовок, он же ссылка</a>
</h3>

На собеседовании

Скопировано

Это партнёрская рубрика, мы выпускаем её совместно с сервисом онлайн-образования Яндекс Практикум. Приносите вопрос, на который не знаете ответа, в задачи, мы разложим всё по полочкам и опубликуем. Если знаете ответ, присылайте пулреквест на GitHub.

❓

Какая разница между кнопками и ссылками? В каких случаях надо использовать ссылку, в каких кнопку? Почему эта разница важна с точки зрения доступности?

Скопировано

Это вопрос без ответа. Вы можете помочь! Почитайте о том, как контрибьютить в Доку.

Как перенаправить веб-страницу в HTML

Чтобы сообщить поисковым системам и посетителям веб-сайта, что ваша веб-страница навсегда перемещена в новое место с эквивалентным содержимым, используйте переадресацию 301. Код «301» интерпретируется как «переехал навсегда». (Подробнее о кодах состояния HTTP).

Самый простой способ перенаправить на другой URL-адрес — использовать HTML-тег с параметром http-equiv, установленным на «обновить». Атрибут содержимого устанавливает задержку перед тем, как браузер перенаправит пользователя на новую веб-страницу. Для немедленного перенаправления установите этот параметр на «0» секунд для атрибута содержимого.

Если вы хотите, чтобы перенаправление происходило в точное время, просто укажите желаемое параметр (в секундах) для содержимого. Давайте рассмотрим пример, где мы установили «7» секунд в качестве времени перенаправления.

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

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

Пример перенаправления веб-страницы: 

 

  <голова>
    
  
  <тело>
    
Скоро вы будете перенаправлены на w3docs.com!

Попробуй сам »

Как перенаправить на новую страницу, не покидая текущую страницу:

Если вы хотите перенаправить на другой веб-сайт, не покидая текущий веб-сайт, и открыть ссылку, которая перенаправляет на HTML-документ, вы можете использовать тег привязки с » Атрибут target» имеет значение «_blank». Это откроет ссылку в новом окне или вкладке, в то время как текущий веб-сайт останется открытым.

Вот пример использования:

 

  <голова>
    Перенаправление без выхода с текущей страницы
  
  <тело>
    Нажмите здесь, чтобы перейти на W3docs.com

Попробуй сам »

В этом примере при нажатии на ссылку откроется «https://www.w3docs.com» в новом окне или вкладке, а текущий веб-сайт останется открытым.

Если вы хотите перенаправить на документ HTML вместо веб-сайта, вы можете использовать тот же метод, установив атрибут href ссылки на путь к документу HTML, на который вы хотите перенаправить.

Вот пример:

 Нажмите здесь, чтобы открыть Example.html

В этом примере при нажатии на ссылку откроется «example.html» в новом окне или вкладке, в то время как текущий веб-сайт останется открытым.

Узнайте больше о перенаправлении веб-страниц с помощью JavaScript, PHP, Apache и Node.js.

Якорные ссылки WordPress и ссылки перехода

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

В этом руководстве

Зачем использовать переходы по страницам?

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

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

💡

Вы также можете использовать блок Table of Contents для автоматического создания переходов между всеми заголовками вашего поста/страницы.

Создание переходов по страницам в редакторе блоков
Шаг первый: создание привязки

Первый шаг — выбрать раздел, который вы хотите, чтобы ваши читатели перешли с на после того, как они нажмут кнопку перехода на страницу. Для этого нам понадобится так называемый «якорь». Вы можете добавить привязку к большинству блоков вашего контента. Вы можете проверить Справочное руководство по основным блокам и выполнить поиск по запросу «Якорь», чтобы найти блоки, которые можно использовать для создания якорей.

  1. Нажмите на блок, к которому вы хотите добавить привязку. Это откроет настройки блока на правой боковой панели. Если вы не видите боковую панель, вам может потребоваться щелкнуть значок «Настройки» в правом верхнем углу, чтобы открыть настройки. Этот значок выглядит как квадрат с двумя неровными столбцами.
Настройки блока находятся на боковой панели.
  1. В настройках блока на правой боковой панели нажмите Дополнительно .
  2. Введите слово, которое станет вашей ссылкой в ​​9Поле 0060 HTML Anchor . Обязательно используйте уникальное слово, которое еще не используется в качестве якоря в другом разделе страницы. Если вы хотите использовать более одного слова, добавьте дефис (-) между словами, например: два слова .
Шаг второй: ссылка на ваш якорь

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

  1. Введите текст или добавьте изображение или кнопку, чтобы ваши читатели могли нажать на нее.
  2. Щелкните и выделите текст, изображение или кнопку, затем выберите параметр ссылка на панели инструментов блока. Параметр ссылки — это значок, который выглядит как фактическое звено цепочки, как показано здесь:
    3. .
  3. Введите якорь HTML , созданный на первом шаге, начиная с символа хэштега (#). Например, если вы создали якорь с именем create-a-page-jump , вы должны сослаться на #create-a-page-jump .
  4. Щелкните значок стрелки или нажмите Введите/Верните на клавиатуре, чтобы сохранить ссылку. Теперь, когда посетители нажимают на созданную вами ссылку, они переходят в раздел, в который вы добавили привязку HTML при создании перехода на страницу.

⚠️

Ссылки перехода на страницу не будут работать, когда вы Предварительный просмотр , но вы можете протестировать их после Опубликовать пост/страницу.

Вернуться к началу в редакторе блоков

Чтобы создать ссылку перехода к началу страницы:

  1. В верхней части страницы добавьте любой блок по вашему выбору и создайте для него якорь.
  2. Ниже на странице создайте ссылку на начальный якорный блок в верхней части страницы.
Создание переходов между страницами в классическом редакторе

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

Шаг первый: Создайте HTML ID
  1. Переключитесь с Visual на Text редактор.
  1. Добавьте HTML ID к тексту, который вы хотите использовать в качестве цели, или куда читатель попадет после того, как он нажмет на ссылку перехода на вашу страницу. Целевой текст записывается так:

Я — целевой текст.

В приведенном выше HTML-коде замените уникальный идентификатор на 9.0085 и Я целевой текст с вашим собственным содержанием.

h4 означает, что это заголовок 3-го уровня. Вы можете изменить его на другой уровень заголовка или даже абзаца по мере необходимости. Узнайте больше о работе с HTML.

💡

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

Шаг второй: ссылка на HTML-идентификатор

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

  1. Переключиться с Text на редактор Visual .
  2. Выделите текст, на который хотите сделать ссылку.
  3. Щелкните значок ссылки на панели инструментов.
  4. В открывшемся поле введите символ хэштега (#), за которым следует имя 9 цели. 0060 HTML ID , созданный на первом этапе, например: #unique-identifier
  5. Щелкните стрелку или нажмите Return/Enter на клавиатуре, чтобы сохранить ссылку.
Вернуться к началу в классическом редакторе

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

  1. Переключиться с Visual на Text редактор.
  2. Добавить этот код
    над всем остальным HTML на странице. Это создает невидимую цель в верхней части публикации или страницы, которая имеет top в качестве HTML-идентификатора .
  1. Переключение обратно с Text на редактор Visual .
  2. Выделите текст, на который хотите сделать ссылку.
  3. Щелкните значок ссылки на панели инструментов.
  4. В открывшемся поле введите символ хэштега (#), за которым следует имя 9 цели. 0060 HTML ID , созданный на шаге 2, например: #top
  5. Щелкните стрелку или нажмите Return/Enter на клавиатуре, чтобы сохранить ссылку.
Перейти к якорю на другой странице или в публикации

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

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

Например:

  • Вы создали страницу на своем отличном сайте с именем Пример и адрес страницы https://yourgroovydomain.com/example/
  • Затем вы создали ссылку перехода под названием уникальный идентификатор на этой странице
  • При нажатии на ссылку перехода адрес вашей страницы изменится на https://yourgroovydomain. com/example/#unique-identifier

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

https://yourgroovydomain.com/example/#unique-identifier

Переходы на страницы в меню навигации

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

  1. Первый шаг — создать привязку, если вы используете редактор блоков, или добавить HTML ID , если вы используете классический редактор. Это будет место для прыжка.
  2. В настройках меню добавьте новый элемент, используя параметр Пользовательская ссылка .
  3. В поле Text напишите все, что вы хотите, чтобы пункт меню назывался.

    No related posts.