С помощью html тега <a> создаются ссылки на любом сайте, причем как внешние, так и внутренние. Тег <a> встречается на каждой странице сайта. Если бы его не было, то было бы очень затруднительно перемещаться по интернету, поскольку каждый адрес страницы (URL) пришлось бы писать в строке браузера вручную.
Синтаксис тега <a>
<a class="имя_класса" target="параметр" title="подсказка" href="URL">анкор</a>
Обязательным параметром у ссылки является только href="URL", т.е. адрес ссылки. Между открывающим тегом <a> и закрывающим тегом </a> пишется анкор ссылки, который может состоять из слов, символов, объектов (картинки и прочее).
Пример. Html код ссылки:
<body> ... <a href="https://zarabotat-na-sajte.ru/">как заработать на своем сайте</a> ... </body>
Преобразуется на странице в следующее:
Примечание 1Если Вы открыли тег <a>, то все что следует за ним будет ссылкой, пока не встетиться закрывающийся тег </a>. Ссылкой могут быть любые объекты. Очень часто в виде ссылке делают изображение. Например
Примечание 2<a href="URL_SITE"> <img src="URL_IMG"> </a>
Ссылки html вебмастера на профессиональном языке называют гиперссылками.
К открывающему тегу <a> можно прописывать различные атрибуты. Они отвечают за корректную работу ссылок. Давайте рассмотрим их.
Атрибуты и свойства тега <a>
1. Атрибут target="параметр", который может принимать следующие значения:
- _blank — открывает страницу в новом окне
- _self — загружает страницу в текущее окно
- _parent — загружает страницу во фрейм-родитель
- _top — отменяет все фреймы и загружает страницу в полном окне браузера
Пример с target
<body> <a target="_blank" href="https://zarabotat-na-sajte.ru/">как заработать на своем сайте</a> </body>
В этом случае мы получим ту же ссылку, что и в первом примере, но перейдя по ней, страница откроется в новом окне.
Чаще всего применяется значение _blank, поскольку он позволяет открывать страницу в новой вкладке. Это удобно для пользователя, поскольку у него остается открытой текущая страница в соседней вкладке.
2. Атрибут title="подсказка" позволяет прописать подсказку, которая высветится при наведении курсора на ссылку. Это нужно для более точного описания ссылки. Атрибут тайтл поможет пользователю убедиться в том, что по ссылке он найдет нужную информацию, а для поисковой системы это дополнительный ключевые слова для страницы, на которую ведет ссылка.
Пример с подсказкой title
<body> ... <a title="Подсказка для ссылки с использованием title" href="https://zarabotat-na-sajte.ru/">как заработать на своем сайте</a> ... </body>
Преобразуется на странице в следующее:
В данном случае подсказка высвечивается стандартным способом. Однако можно также сделать более красивую всплывающую подсказку: как сделать красивую всплывающую подсказку для ссылки »
3. Атрибут class="название класса" задает класс стиля для ссылки. О классах Вы уже знаете из предыдущего урока (стили в html). Для тега a стили имеют небольшие отличия. Объясню все нюансы на следующем примере.
Пример
<html> <head> <style type="text/css"> a.list:link{ color: black; text-decoration: none; font-family:Comic Sans Ms; font-weight:bold; font-size:14px; } a.list:visited { color: black; text-decoration: none; } a.list:hover{ color: orange; text-decoration: underline; } </style> </head> <body> <a class="list" href="https://zarabotat-na-sajte.ru/">как заработать на сайте</a> </body> </html>
Преобразуется на странице в следующее:
Поясню выше описанный пример. Класс, в котором мы описали тег <a> называется list. Давайте разберемся, что значат приписки visited, link и hover.
- a.класс:visited стиль для ссылки, который пользователь уже посетил. Это позволяет пользователю не заходить на одну и ту же страницу дважды, даже если у ссылки на эту страницу будут разные анкоры.
- a.класс:link стиль для тех ссылок, которые ещё не посещал пользователь (можно не указывать приписку ":link", поскольку a.класс - делает то же самое).
- a.класс:hover стиль ссылки при наведении курсора. Обычно для этого стиля делают другой цвет, а также подчеркивание, чтобы дать пользователю понять, что ссылка стала активной.
4. Атрибут rel="параметр" — определяет отношения между текущим документом и документом, на который ведет ссылка. Этот атрибут носит важное значение для поисковых машин, но браузерами никак не трактуется. Может принимать следующее значения:
4.1. nofollow — означает то, что вес по ссылке не будет передаваться (робот не будет переходить по ссылке). Например:
<a class="list_link" rel="nofollow" href="https://zarabotat-na-sajte.ru/">как заработать на сайте</a>
Визуально никаких отличий Вы не заметите, однако для поисковых систем эта ссылка не будет передавать вес. Поэтому мой совет для всех: закрывайте все внешние ссылки атрибутом rel="nofollow", чтобы сохранить вес на Вашем сайте.
4.2. canonical — в случае множества дублей на сайте, указывает главную страницу среди всех дублей
Есть также множество других значений атрибута rel, но они вообще никак не влияют не на внешний вид, ни на поисковые системы, поэтому рассматривать их не вижу смысла.
Как сделать ссылку на адрес почты
У ссылок есть еще одна интересная возможность: можно сразу указать адрес почты в таком формате, что при переходе по ней у пользователя будет открываться программа, которая стоит по умолчанию по обработке его почты. Возможно это будет OutLook или же браузер по умолчанию с почтой.
Сделать ссылку с адресом электронной почты легко. Для этого есть специальное слово mailto:
<a href="mailto:admin@zarabotat-na-sajte.ru">admin@zarabotat-na-sajte.ru</a>
Уважаемый читатель, теперь Вы узнали гораздо больше о html теге a. Теперь советую перейти к следующему уроку.
Ссылка на следующий урок: Урок 6. HTML тег table — подробное описание с примерами
Читайте также:
• Как изменить вид ссылки при наведении
• Как убрать подчеркивание ссылки
• Как сделать кнопку на сайте ссылкой
• Описание заголовочных тегов html
• Фреймы (теги <frame>, <frameset>, <noframe>, <iframe>)
• Атрибут position в HTML
• HTML тег <ul> - подробное описание с примерами
• HTML теги <h1>-<h6> - заголовочные теги внутри страницы
• Элементы тега <form>: радиокнопки, списки, флажки, текстовые поля
• HTML тег <embed>
• HTML тег <object>