Как оставить ссылку в html

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

Для добавления ссылки в HTML документ, используют тег a (anсhor) вместе с атрибутом href. В данном атрибуте прописывается адрес, ведущий на внешний ресурс или внутреннюю страницу сайта. При клике на ссылку, пользователь будет перенаправлен по указанному адресу.

Цвет ссылки

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

<a href=»https://myrusakov.ru/»>Как создать свой сайт</a>

Абсолютная ссылка

Абсолютная ссылка указывает полный путь до HTML страницы или до файла. На практике их используют, когда нужно сослаться на внешний ресурс.

Относительная ссылка

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

Ссылка на файл

Кроме основной задачи (переадресации), с помощью ссылки запускается механизм на скачивание файлов. В атрибуте href указывается путь до файла и атрибут download. Наличие данного атрибута, предлагает браузеру не переходить по адресу, а скачать файл, указанный в адресе ссылки.

<a href=»file.doc» download>Ссылка скачать файл</a>

Открытие ссылки

По умолчанию ссылка открывается (осуществляется переход пользователя) на другую страницу или сайт в том же окне браузера. Открытие ссылки в текущем окне в пределах одного сайта не является проблемой. Но все меняется, если мы имеем дело с ссылкой на внешний ресурс. Пользователь уходит по ссылке на другой сайт и не всегда потом может вернуться назад. Поэтому удобнее, когда внешняя ссылка открывается в новом окне. Для этого существует атрибут target. С помощью него можно указать, как будет открываться страница, на которую осуществляется переход. Значение _blank у атрибута target открывает страницу в новой вкладке.

<a href=»https://myrusakov.ru/» target=»_blank»>Myrusakov.ru</a>

Ссылка на телефон

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

Ссылка на почту

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

Ссылка якорь

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

Пользователь кликает на ссылку-якорь в навигационной панели.

и его перебрасывает в footer.

Как кнопку сделать ссылкой?

Тег button не может быть ссылкой, если он не находится внутри формы. Кроме того расположение ссылки как внутри тега button, так и снаружи не валидно.

Так что же делать? Отказаться от тега button и стилизовать класс, как у обычной ссылки.

<a href=»url» >Кнопка со ссылкой</a>

.btn <
display: inline-block; /* Строчно-блочный элемент */
background: #d81b6b; /* Красный цвет фона */
color: #fff; /* Белый цвет текста */
>

Активная ссылка

Ссылка, на которую нажал пользователь, является активной. Чтобы как-то её выделить среди остальных ссылок, можно в CSS стилях задать ей другой цвет через псевдокласс active.

Ссылка при наведении

Чтобы изменить внешний вид ссылки (как правило цвет), при наведении на неё курсора, следует задать ей псевдокласс hover.

Ссылка на изображение

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

В сайтостроении, как и в большинстве темах, теория не работает без практики. Лучше всего смотреть, как делают верстку профессионалы и повторять за ними. Мой видеокурс «Вёрстка сайта с нуля 2.0» нацелен именно на такой формат обучения.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Она выглядит вот так:

Комментарии ( 0 ):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

Создание гиперссылок

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

Предварительные требования:	Базовое знакомство с HTML, описанное в статье Начало работы c HTML. Форматирование текста в HTML, описанное в статье Основы редактирования текста в HTML.
Задача:	Научиться эффективно использовать гиперссылки и связывать несколько файлов вместе.

Что такое гиперссылка?

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

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

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

Анатомия ссылки

Простая ссылка создаётся путём обёртывания текста (или другого содержимого, смотрите Ссылки-блоки), который вы хотите превратить в ссылку, в элемент <a> , и придания этому элементу атрибута href (который также известен как гипертекстовая ссылка, или цель), который будет содержать веб-адрес, на который вы хотите указать ссылку.

Это дало нам следующий результат:

Добавляем информацию через атрибут title

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

Вот что получилось (описание появится, если навести курсор на ссылку):

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

Активное изучение: создаём собственную ссылку

Время упражнения: мы хотели бы, чтобы вы создали любой HTML-документ в текстовом редакторе на своём компьютере (наш базовый пример подойдёт.)

• Попробуйте добавить в тело HTML один или несколько абзацев или другие элементы, о которых вы уже знаете.
• Теперь превратите некоторые фрагменты документа в ссылки.
• Добавьте ссылкам атрибут title .

Ссылки-блоки

Как упоминалось ранее, вы можете превратить любой элемент в ссылку, даже блочный элемент. Если у вас есть изображение, которые вы хотели бы превратить в ссылку, вы можете просто поместить изображение между тегами <a></a>.

Примечание: вы узнаете гораздо больше об использовании изображений в Интернете в следующей статье.

Краткое руководство по URL-адресам и путям

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

URL-адрес (Uniform Resource Locator, или единый указатель ресурса, но так его никто не называет) — это просто строка текста, которая определяет, где что-то находится в Интернете. Например, домашняя страница Mozilla находится по адресу https://www.mozilla.org/ru/ .

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

Корень структуры — каталог creating-hyperlinks . При работе на локальном веб-сайте у вас будет один каталог, в который входит весь сайт. В корне у нас есть два файла — index.html и contacts.html . На настоящем веб-сайте index.html был бы нашей домашней, или лендинг-страницей (веб-страницей, которая служит точкой входа для веб-сайта или определённого раздела веб-сайта).

В корне есть ещё два каталога — pdfs и projects . У каждого из них есть один файл внутри — project-brief.pdf и index.html , соответственно. Обратите внимание на то, что вы можете довольно успешно иметь два index.html файла в одном проекте, пока они находятся в разных местах файловой системы. Многие веб-сайты так делают. Второй index.html , возможно, будет главной лендинг-страницей для связанной с проектом информации.

Тот же каталог: Если вы хотите подключить ссылку внутри index.html (верхний уровень index.html ), указывающую на contacts.html , вам просто нужно указать имя файла, на который вы хотите установить ссылку, так как он находится в том же каталоге, что и текущий файл. Таким образом, URL-адрес, который вы используете — contacts.html :

Примечание: вы можете объединить несколько экземпляров этих функций в сложные URL-адреса, если необходимо, например: ../../../сложный/путь/к/моему/файлу.html .

Фрагменты документа

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

Затем, чтобы связаться с этим конкретным id , вы должны включить его в конец URL-адреса, которому предшествует знак решётки, например:

Вы даже можете использовать ссылку на фрагмент документа отдельно для ссылки на другую часть того же документа:

Абсолютные и относительные URL-адреса

Два понятия, с которыми вы столкнётесь в Интернете, — это абсолютный URL и относительный URL:

Абсолютный URL

Указывает на местоположение, определяемое его абсолютным местоположением в Интернете, включая протокол и доменное имя. Например, если страница index.html загружается в каталог, называемый projects , который находится внутри корня веб-сервера, а домен веб-сайта — http://www.example.com , страница будет доступна по адресу http://www.example.com/projects/index.html (или даже просто http://www.example.com/projects/ ), так как большинство веб-серверов просто ищет целевую страницу, такую как index.html , для загрузки, если он не указан в URL-адресе.).

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

Относительный URL

Указывает расположение относительно файла, с которого вы связываетесь, это больше похоже на случай, который мы рассматривали в предыдущей секции. Для примера, если мы хотим указать со страницы http://www.example.com/projects/index.html на PDF файл, находящийся в той же директории, наш URL может быть просто названием файла — project-brief.pdf — никакой дополнительной информации не требуется. Если PDF расположен в поддиректории pdfs внутри каталога projects , относительная ссылка будет pdfs/project-brief.pdf (аналогичный абсолютный URL был бы http://www.example.com/projects/pdfs/project-brief.pdf .).

Относительный URL будет указывать на различные места, в зависимости от того, где находится файл, в котором он используется, — например, если мы переместим наш файл index.html из каталога projects в корневой каталог веб-сервера (верхний уровень, не в директорию) , то относительный URL pdfs/project-brief.pdf будет вести на http://www.example.com/pdfs/project-brief.pdf , а не на http://www.example.com/projects/pdfs/project-brief.pdf .

Советуем вам основательно разобраться в этой теме!

Практика написания хороших ссылок

При написании ссылок рекомендуется следовать некоторым правилам. Давайте рассмотрим их.

Используйте чёткие формулировки описания ссылок

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

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

Взгляните на этот пример:

Хороший текст ссылки: Скачать Firefox

Плохой текст ссылки: Нажми сюда, чтобы скачать Firefox

• Не пишите URL-адрес как часть текста ссылки. URL-адреса выглядят сложными, а звучат ещё сложнее, когда программы чтения с экрана читают их по буквам.
• Не пишите «ссылка» или «ссылки на» в тексте ссылки — это лишнее. Программы чтения с экрана сами проговаривают, что есть ссылка. На экране пользователи также видят, что есть ссылка, потому что ссылки, как правило, оформлены в другом цвете и подчёркнуты (подчёркивая ссылки, вы соблюдаете правила хорошего тона, поскольку пользователи привыкли к этому).
• Следите за тем, чтобы текст ссылки был как можно короче. Длинный текст ссылки особенно раздражает пользователей программ чтения с экрана, которым придётся услышать всё, что написано.
• Минимизируйте случаи, когда несколько копий одного и того же текста ссылок указывает на разные страницы. Это может вызвать проблемы для пользователей программ чтения с экрана, которые часто вызывают список ссылок — несколько ссылок, помеченных как «нажмите здесь», «нажмите здесь», «нажмите здесь», будут путать.

Используйте относительные ссылки, где это возможно

Из прочитанного выше, вы можете подумать, что всё время использовать абсолютные ссылки — хорошая идея; в конце концов, они не ломаются, когда страница перемещается. Тем не менее, лучше использовать относительные ссылки везде, где это возможно, в пределах одного сайта (при ссылке на другие сайты необходимо использовать абсолютную ссылку):

• Во-первых, гораздо проще прописать в коде относительные URL-адреса, как правило, они намного короче абсолютных URL-адресов, что значительно упрощает чтение кода
• Во-вторых, использование относительных URL-адресов эффективней по следующей причине. Когда вы используете абсолютный URL-адрес, браузер начинает поиск реального местоположения сервера запрашивая адрес у Domain Name System (DNS; также прочтите Как работает web), затем он переходит на этот сервер и находит файл, который запрашивается. С относительным URL-адресом проще: браузер просто ищет файл, который запрашивается на том же сервере. Используя абсолютные URL-адреса вместо относительных, вы постоянно нагружаете свой браузер дополнительной работой.

Создавая ссылки на не HTML ресурсы — добавляйте описание

Когда вы создаёте ссылку на файл, нажав на который можно загрузить документ PDF или Word или открыть просмотр видео, прослушивание аудио файла или перейти на страницу с другим, неожиданным для пользователя результатом (всплывающее окно или загрузка Flash-фильма), добавляйте чёткую формулировку, чтобы уменьшить путаницу. Отсутствие описания может раздражать пользователя. Приведём пример:

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

Посмотрите на примеры, чтобы увидеть, как добавить описание:

Используйте атрибут download, когда создаёте ссылку

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

Активное изучение: создание меню навигации

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

Вам нужно скачать или создать следующие страницы в одном каталоге (Смотрите navigation-menu-start):

1. Добавьте неупорядоченный список в указанном месте в любом html-файле. Список должен состоять из имён страниц (index, projects и т.д.). Меню навигации обычно представляет собой список ссылок, поэтому создание неупорядоченного списка семантически верно.
2. Создайте ссылки каждому элементу списка, ведущие на эти страницы.
3. Скопируйте созданное меню в каждую страницу.
4. На каждой странице удалите только ссылку, которая указывает на эту же страницу (на странице index.html удалить ссылку index и так далее). Дело в том, что, находясь на странице index.html, нам незачем видеть ссылку в меню на эту же страницу. С одной стороны, нам незачем ещё раз переходить на эту же страницу, с другой, такой приём помогает визуально определить, смотря на меню, в какой части сайта мы находимся.

Когда закончите задание, посмотрите, как это должно выглядеть:

Примечание: Если не удаётся сделать, или вы не уверены, что сделали верно, посмотрите наш вариант navigation-menu-marked-up.

Ссылки электронной почты

Можно создавать ссылки или кнопки, которые при нажатии открывают новое исходящее сообщение электронной почты, а не ссылку на ресурс или страницу. Для этого используется элемент <a> и mailto: — адрес почты.

Самыми простыми и часто используемыми формами mailto: являются subject, cc, bcc и body; дальше прописываем адрес электронной почты. Например:

В результате получим ссылку вида: Отправить письмо для nowhere.

Сам адрес электронной почты не является обязательным для заполнения. Если оставить это поле пустым (в поле href оставить только «mailto:»), откроется новое исходящее сообщение почтовой программой, в поле получателя будет пусто. Это можно использовать для кнопки «Поделиться».

Особенности и детали

Помимо адреса электронной почты, вы можете предоставить другую информацию. Фактически, любые стандартные поля для отправки почты могут быть добавлены к указанному вами адресу mailto . Часто используемыми из них являются «subject», «cc» и «body» (которые не являются истинным полем заголовка, но позволяют указать дополнительную информацию для нового сообщения электронной почты). Каждое поле и его значение задаются в качестве условия запроса.

Вот пример который включает cc(кому отправить копию сообщения, все получатели письма видят список тех кто это письмо получит), bcc(скрытый адрес получателя, никто из получателей не будет видеть полный список получателей письма), subject(тема письма) и body(текст сообщения):

Примечание: Значение каждого поля должно быть написано в URL-кодировке (то есть с непечатаемыми символами и пробелами percent-escaped). Обратите внимание на знак вопроса (?) для разделения основного адреса и дополнительных полей, амперсанд (&) для разделения каждого поля mailto: URL. Для этого используется стандартное описание URL запроса. Прочтите о методе GET, чтобы лучше понимать описание URL запроса.

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

Заключение

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

HTML links

In this article we provide a basic treatment of HTML anchors, or <a> elements, more commonly known as HTML links.

Introduction

In this article you’ll learn about one of the most ground-breaking inventions in the history of the Web — links. Links allow the reader of a document to instantly jump from document to document and from server to server. A lot has happened since links were first introduced, but one thing is the same: links are an immensely important part of the web experience and they can make accessing your content easy or hard for your website’s visitors, depending on how you use them.

This article explores how to create links that are easy to understand and function in any environment. Further, we’ll look at how linking affects your search engine popularity, and you’ll get some tips about wording link text.

What are links?

Links are parts of an HTML document that point to other resources — other HTML documents, text files, PDF files, etc. Some links are followed automatically by the browser, created using <link> elements (you’ve already encountered some of these in earlier articles, as when they were used to import CSS files into an HTML document). But generally, when we talk about links we mean those that are created by the page author and are optional for the user to activate. These are called anchors, and you add them to the HTML document using the <a> element.

The anatomy of an anchor

You can turn any inline element or text into an HTML link by adding an <a> element around it. For example, in the following HTML document, the text “Opera Software” is a link.

Visitors activating this link (either by clicking it with a mouse, activating it with the keyboard, or even by voice in some cases) will leave the current page and go to the Opera home page. There are more changes happening to the link itself, and we’ll look at those later when we talk about link styling.

The anchor tag has several attributes you can add:

• href — the resource the link points to (either an external file or an anchor ID).
• id — a unique identifier for the link, useful for styling a link with CSS or referencing it with JavaScript. You can also use an id attribute to make a link into a page anchor, and link to it from other <a> elements.
• class — a CSS class name to apply to the link, useful if, for example, if you want to style certain links on the page but not others.
• title — extra information about the link that the browser should display on hover.

Let’s go through the most important attributes first and then talk about what you can do to links to make things easier for your visitors.

The href attribute

An <a> element can play several roles, depending on which attributes are set. The most common attribute you’ll use is the href attribute, which defines what resource the link points to. This attribute can contain different values:

• A URL relative to the current folder, e.g., “…/…/help/help.html” (two dots means “go up one level in the site folder hierarchy”), or a URL absolute to the server root, e.g., “/help/help.html” (a forward slash at the beginning of the URL means the address starts at the root of the folder hierarchy the current page is on).
• A URL on a different server, for example “ftp://ftp.opera.com/” or "http://developer.yahoo.com/yui".
• A fragment identifier or id preceded by a hash sign, e.g., "#menu". This points to a target inside the current document rather than an external URL.
• A mixture of URLs and fragment identifiers. That is, you can link directly to a section of a different document by pointing the href attribute to a URL followed by a fragment identifier, for example "http://dev.opera.com/articles/view/new-structural-elements-in-html5/#aside".

Creating intra-page navigation with id attributes

You can also put an id attribute on an <a> element to make it into a page anchor. Page anchors are intra-page targets for other links on that page. You link to them by putting the ID in the href attribute of another link. For example, here’s an anchor coded to be a link target:

That target could be linked to by this link:

Handily, most browsers today allow you to write this in “shorthand” by putting the ID directly on the element you want to link to, like this:

This is much simpler, and we recommend that you do it this way whenever possible.

The following HTML contains examples of the different types of links:

Open this file in your browser of choice and experiment with it. You’ll find that activating any of the links in the first list will jump to the appropriate section of the same page. You might also have realized that the URL in the location bar of your browser changed and now shows the fragment identifier at the end of it, which means visitors can bookmark this section or email the link to other people to send them exactly where they should go. To recap:

• Anchor links can have a fragment identifier as the value of the href attribute. This fragment identifier must start with a hash sign (#).
• When activated, this link will jump to any HTML element with an id of this value. All IDs on a page must be unique.
• IDs follow certain naming conventions. Most important is that they must start with an alphanumeric character and must not contain spaces.

That covers the menu and the different sections in the example, but what about the other links? If you try them out you’ll see that they point to different targets — one goes to another site, another displays a photo, and the third one shows a specific section of another web page (found by jumping to a specific ID). If all of that worked for you, great — but what if your browser couldn’t understand some of the resources?

Don’t leave any ambiguity about what you’re linking to

An important thing to remember about links is that they are a substantial part of your relationship with your visitors. Readers trust that when you offer them a link, they can follow it and get good, relevant information. If your links don’t work because the linked resource is not available or is in a format the visitor’s browser cannot consume, you will betray that trust and lose credibility. Don’t let that happen.

Providing extra information with a title attribute

As with most other HTML elements, you can add a title attribute to an <a> element to include some extra information. Browsers will show a tooltip when visitors hover the mouse cursor over the link. The tooltip typically tells them what the link is about. For example, you could give a small introduction to the content and location of the linked document:

However, you cannot expect visitors to have enough patience and hand-eye coordination to rely on this for crucial information. Visually impaired users, who cannot see the page well (or perhaps at all), are very likely not to be able to reach this information. While screen readers have the option to read out title attributes for the end user, this feature is generally turned off by default. This is why you should never use the title attribute for crucial information about the link.

Crucial information might be:

• Linking to non-HTML resources like PDF files, images, videos, sound files, or downloads.
• Leaving the current site and linking to another server (external links).
• Linking to a document that will open in a different frame or a popup.

Linking to non-HTML resources — don’t make people guess

It can be very annoying when you click a link and your browser does not know what to do with the content the link points to. It is unfortunately all too common to see websites link to images, PDF documents, and videos without telling their visitors what to expect. Further, the resource might be quite large, which means that visitors might prefer to download it rather than opening it inside the browser, or they might prefer to not access it at all.

One of the biggest success factors for a web page is not making users guess what will happen when they perform an action. Instead, tell them directly what effects the action will have. In the case of linked resources, all you need to do is tell your visitors what the linked resource is. Here are some examples:

By providing information about linked files and their nature, you leave the decision of what to do with them to your visitors, rather than expecting them to have certain browser settings or pre-installed software. If you mix that information with clever styling you can even make such links look attractive and intuitive, for example, by giving different types of links easily recognisable icons (see more about this in guides/Styling lists and links). If you want to be very safe, you can also offer a help section that explains what the different file formats are and where you can get the software needed to display them.

External vs. internal links

One of the biggest fears for business websites is people leaving the site prematurely. This is often the reason for sites not offering third-party links (unless the third parties pay money for the privilege of having web traffic directed to them). We’ll come back to this error in judgment later; for now let’s talk about what developers can do to help prevent visitors from inadvertantly leaving their sites and how these measures affect the site’s success.

Frames and popups — just say no

The fear of losing visitors to other sites while still wanting to link to them gave us two innovations(?) in web development that have been a thorn in usability’s side for years: frames and popups.

Using HTML frames means you separate the page shown in the browser into several different documents. The benefit is that the document seemingly stays the same even when you load different content, either from your own server or from third party servers. This is where the usefulness ends, however. Simply put, frames provide a terrible user experience. For example, when a site uses frames:

• Search engines cannot index the whole page. In search results, they might instead show only parts of a page that don’t make sense out of context.
• Visitors cannot bookmark the page in the condition they view it. The next time they open that bookmark they’ll see the initial state of the frameset, not the page as they left it.
• Visitors who are dependent on assistive technology have a very hard time navigating around framesets.
• Third parties might not want their sites to be shown inside a frameset and thus use “framebreaker” scripts that replace framesets with the real URL when you try to embed them. This is also used to stop criminals luring Internet users into entering personal information into a

legitimate-looking website (“phishing”).

Links inside a frameset use the target attribute of the anchor to target the correct frame. Each frame in a frameset gets a unique name and activating the link opens the document defined in the href attribute in that frame. If the frameset is not available (for example, if a visitor found the document with the links via a search engine), each link opens in a new browser instance.

Opening a new browser instance is another common way to link to third party sites, either with a scripted pop-up window or with a target attribute with a value of _blank . The fact that every modern browser comes with a pop-up blocker should give an indication of how unpopular this technique is today!

In short, do not use the target attribute when you create links unless you know what you are doing. It is an outdated idea anyway; today, virtually all browsers have tabbed interfaces, so users can easily open third-party sites in a different tab without leaving your site. Under certain circumstances you may want to indicate the difference between external and internal links, but always leave it to the discretion of the visitor what to do with them.

Benefits of outbound and inbound links

There are several good reasons for linking to third party sites even when they are competitors.

• It gives you credibility in the eyes of your visitors, telling them you are so sure of the quality of your content that you don’t avoid competition.
• It is an opportunity to deliver a full service. You can link to content and articles or even products on other sites that you don’t cover but that might be of interest for those visitors who want to dive deeper into the topic at hand.
• You can prove a point by building on an older article by a third party and offering a better or different solution while referencing the old article via a link.

The usefulness of inbound links (links pointing from a third-party site to yours) is less debated. The more often that other, high-quality sites link to yours, the higher you’ll rank in search engines. Before that happens, however, you need to prove that you don’t shy away from linking to others either.

This brings us to another very important part of creating good links: how to word them.

Link wording

We covered this briefly in the section about linking to non-HTML resources, but it is good to remind ourselves that links are not just interactive elements, but also an integral part of the page copy.

Some assistive technologies will offer a list of links instead of the whole document to allow visitors to quickly navigate it and find the link they want. This means that your link text needs to make sense out of context as well as in context. You can easily check this in Opera by opening any website and choosing Tools > Links from the menu or pressing Ctrl + Shift + L . You’ll get a new tab that shows all the links in the document and the resources they point to.

You should also make sure that your page doesn’t contain multiple links with the same wording but pointing to different resources. The classic mistake is “click here” links, worded like "To download the latest version of our tool click here". It’s much better to use link text that explains what the link points to. For example, turn that sentence into “You can download the latest version of our tool and try it out for yourself.”

The same applies to “more” links. These are often found in news sites, where you see a heading and some teaser text followed by a “more” or “full story” link. The solution to this problem is to either use a linked “more” image with some unique alternative text, or to add a <span> element inside the link after the “more” and hide it with CSS.

Link styling

A full treatment of link styling is beyond the scope of this article (but you can find more information in guides/Styling lists and links). Still, it is important to remember that how links look is very important and that there are several different link states to consider. The link states (called CSS pseudo class selectors) are:

• :link (default) — defines the style of unvisited links in general. By default, unvisited links are blue.
• :visited — defines the style of links that have already been clicked (visited). By default, already visited links are purple.
• :hover — defines the style of a link while the mouse cursor is hovering over it.
• :focus — defines the style of a link when it has focus (or highlighted) by a mouse click or via another alternative control mechanism such as the keyboard.
• :active — defines the style of the link while it is activated; that is, while the connection to its target is in progress. This is also the style of the last activated link when you arrive at a document by using the browser’s Back function.

HTML5: block level linking

In HTML4, the <a> element was restricted to turning other inline elements into links. This was fine for most situations, but it became annoying when you wanted, for example, to turn an entire advertising banner section containing images and paragraphs into a link. For the code to remain valid, you would have to wrap each individual bit of text and each image in its own separate link — all going to the same place — which is not only horribly repetitious, but confuses assistive technology and its users. Putting an inline element around a section of block level content also makes styling behave weirdly, unless you remember to set it to display like a block level element using CSS.

Fortunately, HTML5 removes this restriction, allowing you to put a single link around any amount of content you want. To get it to behave properly, you still have to set the link to behave like a block level element, but this is easy, and far more flexible than it used to be. Let’s look at an example:

Here you can see that we have the <a> element wrapping both a heading and a paragraph. To make this work correctly we’ve set it to display: block; in the CSS. If you try the example out yourself, you’ll see that the entire block is part of the clickable link area. I have also added a background-color change on hover to make this more visible.

Conclusion

We covered a lot in this article, but perhaps the most important takeaway is to remember not only what links do, but what they should do.

HTML Link Code — How to Insert a Link to a Website with HREF

We get to a point when building websites and we want a page to lead or go to another page. Its no news that most websites have the “about us”, “contact us” options on their webpage.

So how do we go about this? how do we link a page to another page? how do we navigate through pages on our websites?

The <a></a> in html helps in doing this using the HREF attribute.

We might be confused at some point , what then is adding link to your head tag? It also uses HREF attribute after all?

They are two different things and they are added differently.

The external links we add to our head tags works solely on the body.

For example, adding the bootstrap CDN and the google font link

You can’t access these links on your website. They cannot be seen on your website, you only see the effects on the content in the body.

How then will I add a link to my website?

Like I said earlier, the use of <a> and </a> tags is used to add a link to a website. The <a> tag indicates where the hyperlink starts and the </a> tag indicates where it ends. Whatever text gets added inside these tags, will work as a hyperlink.

You will notice from the code snippet that the <a> tag is inside the body tags. It goes in the body tags where it can be seen and clicked.

But <a>Click me</a> is not yet a “link” if the href attribute is not added.

The href attribute is the most important attribute of the hyperlink. It indicates the link’s destination.

Now! We have created a hyperlink. The “click me” can now be clicked and it will go straight to Freecodecamp page.

The target Attribute

By default, the linked page will be displayed in the current browser window. To change this, you must specify another target for the link.

The target attribute specifies where to open the linked page.

The target attribute can have one of the following values:

• _self — Default. Opens the page in the same window/tab as it was clicked.
• _blank — Opens the page in a new window or tab.
• _top — Opens the document in the full body of the window.

This code snippet will open freecodecamp.org in a new tab.

To open all links in the document in a new tab, without having to write the target attribute for all the links in your website, you can use `<base>` element

This also applies to all target attribute values, like _top value.

Link to an Email Address

You have to use mailto: inside the href attribute to create a link that opens the user’s email (to let them send a new email)

Link to a Telephone Number

You have to use tel: inside the href attribute to create a link that opens the user's phone boot to call (to let them give a call to the number)

HTML Bookmark Link

Html Bookmark is helpful, if you have a long page that you want to allow the users to quickly navigate to different sections in the same web page or you can navigate to targeted location of the other web page.

First, use the id attribute to create a bookmark:

Next step, you need to create a link that the user can click on to jump to the bookmark.

For example, you can check out the following code to see the result of a bookmark link.

It can also be done in a different way.

The second step still remains the same, but the first step changes.

You can use the named attribute to create a bookmark.

The href attribute is the most important attribute of the hyperlink. It indicates the link’s destination.

I hope the article was helpful and you have gotten a handful of how to add a link to your website using the HREF attribute.