Ссылки html — это некие конструкции которые определяются тегами a, area, link и предоставляют связь между двумя ресурсами, одним из которых является документ на котором размещена ссылка.
Различают два типа ссылок в html:
Ссылки на внешние ресурсы
Это ссылки на ресурсы, которые используются для расширения и дополнения страницы, их автоматически обрабатывает браузер при загрузке документа.
Гиперссылки
С данным типом ссылок напрямую взаимодействует пользователь. Они обычно связывают между собой страницы, к примеру навигация по сайту реализована с помощью гиперссылок. Текст или картинка может быть ссылкой.
Ссылка в html элемент <a>
Чтобы создать гиперссылку мы должны использовать тег a этот тег является парным и выглядит следующим образом.
<a href="webupblog.ru">Текст ссылки</a>
Атрибут href
Тег a имеет несколько атрибутов, самый основной, это атрибут href его значением является путь к файлу или странице на которую должна вести ссылка при клике.
Различают несколько видов путей:
Относительный — путь к странице указывается относительно текущего документа или сайта. К примеру если файлы или картинки находятся в одной папке или соседних нет необходимости в указании домена (имени сайта). Ниже пример.
<a href="/about.html">О сайте</a>
Абсолютный — наоборот указывает полный путь к странице. Такая страница может находится на другом сервере и относится к другому сайту. Обязательно указывать домен сайта.
<a href="/ob-avtore/">Об авторе</a>
Якорь — ссылка на html элемент, с помощью данного типа пути мы можем осуществлять навигацию по странице на которой находимся.
Очень часто это используется для создания оглавления по статье, и возврата на начало страницы. Урлом выступает id элемента и перед ним ставится знак решетки.
<a href="#top">Вверх</a>
Атрибут title
Используется для дополнительного описания ссылки. Заголовок мы можем увидеть когда наведем курсор на гиперссылку. Этот атрибут не обязательный, но иногда бывает полезным.
<a href="#top" title="После клика вы перейдете к шапке сайта.">Вверх</a>
Атрибут target
Этот атрибут управляет поведением при открытии ссылки, по умолчанию ссылка открывается в текущем окне. Рассмотрим его основные значения.
_blank — открывает ссылку html в новом окне
_self — открывает в текущем окне
Атрибут rel
Определяет отношение между текущим и связанным документом. Ниже приведены основные значения атрибута.
rchives — Указывает на архив страниц или записей на сайте.
author — Указывает на страницу об авторе.
bookmark — Указывает на категории или записи.
first — Ссылка указывает на первую страницу сайта.
help — Указывает на страницу помощи.
index — Ссылка на содержание.
last — Ссылка указывает на последнюю страницу сайта.
license — Указывает на страницу с лицензией или с информацией об авторских правах.
me — Указывает на страницу автора статьи на другом сайте.
next — Указывает на следующую страницу или категорию.
nofollow — Запрещает поисковым роботам передавать вес по ссылке.
prev — Указывает на предыдущую страницу или категорию.
search — Ссылка на поиск.
sidebar — Добавить ссылку в избранное браузера.
up — Указывает что ссылка ведет на родительскую страницу.
<a href="/ob-avtore/" rel="author" >Об авторе</a>
Ссылка html тег link
Этот тег относится к первому типу ссылок и устанавливает связь с внешним документом. К примеру это может быть файл стилей или файл со шрифтами. Тег link должен размещаться внутри тега head. Если есть необходимость можем использовать его неоднократно.
<head>
<link rel="stylesheet" type="text/css" href="theme.css" />
</head>
Основные атрибуты
charset — Кодировка документа.
href — Путь к файлу.
media — Задает устройство, для которого применять стили.
rel — Определяет отношения между документом и файлом, на который ведет ссылка.
type — Тип данных файла который подключается.
Статьи по теме:
Как сделать картинку ссылкой?
Как убрать подчеркивание ссылки?
Hover эффект ссылки с анимацией
Статья оказалась полезной? Поделись с друзьями, и подпишись на нашу группу в вк и канал на youtube.