Ссылка в html. Работа с тегами a и link

Ссылки html — это некие конструкции которые определяются тегами a, area, link и предоставляют связь между двумя ресурсами, одним из которых является документ на котором размещена ссылка.

Различают два типа ссылок в html:

Ссылки на внешние ресурсы

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

Гиперссылки

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

Ссылка в html элемент <a>

Чтобы создать гиперссылку мы должны использовать тег a этот тег является парным и выглядит следующим образом.

Атрибут href

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

Различают несколько видов путей:

Относительный — путь к странице указывается относительно текущего документа или сайта. К примеру если файлы или картинки находятся в одной папке или соседних нет необходимости в указании домена (имени сайта). Ниже пример.

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

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

Очень часто это используется для создания оглавления по статье, и возврата на начало страницы. Урлом выступает id элемента и перед ним ставится знак решетки.

Атрибут title

Используется для дополнительного описания ссылки. Заголовок мы можем увидеть когда наведем курсор на гиперссылку. Этот атрибут не обязательный, но иногда бывает полезным.

Атрибут target

Этот атрибут управляет поведением при открытии ссылки, по умолчанию ссылка открывается в текущем окне. Рассмотрим его основные значения.

_blank — открывает ссылку html в новом окне
_self — открывает в текущем окне

Атрибут rel

Определяет отношение между текущим и связанным документом. Ниже приведены основные значения атрибута.

rchives — Указывает на архив страниц или записей на сайте.
author — Указывает на страницу об авторе.
bookmark — Указывает на категории или записи.
first — Ссылка указывает на первую страницу сайта.
help — Указывает на страницу помощи.
index — Ссылка на содержание.
last — Ссылка указывает на последнюю страницу сайта.
license — Указывает на страницу с лицензией или с информацией об авторских правах.
me — Указывает на страницу автора статьи на другом сайте.
next — Указывает на следующую страницу или категорию.
nofollow — Запрещает поисковым роботам передавать вес по ссылке.
prev — Указывает на предыдущую страницу или категорию.
search — Ссылка на поиск.
sidebar — Добавить ссылку в избранное браузера.
up — Указывает что ссылка ведет на родительскую страницу.

Ссылка html тег link

Этот тег относится к первому типу ссылок и устанавливает связь с внешним документом. К примеру это может быть файл стилей или файл со шрифтами. Тег link должен размещаться внутри тега head. Если есть необходимость можем использовать его неоднократно.

Основные атрибуты

charset — Кодировка документа.
href — Путь к файлу.
media — Задает устройство, для которого применять стили.
rel — Определяет отношения между документом и файлом, на который ведет ссылка.
type — Тип данных файла который подключается.

Статьи по теме:

Как сделать картинку ссылкой?
Как убрать подчеркивание ссылки?
Hover эффект ссылки с анимацией

Статья оказалась полезной? Поделись с друзьями, и подпишись на нашу группу в вк и канал на youtube.

comments powered by HyperComments