A href html атрибуты

Описание

HTML тег определяет гиперссылку (её также называют просто "ссылка"), которая используется для перехода с одной страницы на другую. Текстовое содержимое тега выступает в качестве названия ссылки. Внешне ссылку легко отличить от обычного текста, так как по умолчанию она отображается в виде подчеркнутого текста, а при наведении на нее курсора мыши, он принимает вид руки с указательным пальцем, как бы показывающим, что этот текст является активным и по нему можно кликнуть ЛКМ.

Непосещённая ссылка - текст синего цвета
Посещенная ссылка - текст фиолетового цвета
Активная (при клике (и удерживании) ЛКМ) - текст красного цвета

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

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

Ссылки для перехода внутри веб-страницы

Ссылки можно также использовать для перехода к определенному месту внутри веб-страницы (не обязательно в текущей). Для определения места на странице, к которому будет осуществлён переход по ссылке, используется любой HTML-элемент. Чтобы определить элемент к которому будет сделан переход по ссылке, нужно использовать глобальный атрибут id , указав его у нужного элемента:

Заголовок

Теперь, чтобы перейти к нему, в значении атрибута href элемента мы должны указать значение атрибута id (идентификатор), перед которым нужно поставить символ решетки (#). Если элемент к которому будет сделан переход находится на одной странице с ведущей на него ссылкой, то имя документа в атрибуте href можно опустить, написав только идентификатор.

Чтобы перейти к определённому месту на другой странице, нужно указать необходимый идентификатор после URL-адреса:

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

Ссылка на почтовый ящик

Атрибуты

download: Указывает, что файл, на который ведёт ссылка, будет загружен, когда пользователь кликнет по ссылке: Значение атрибута определяет под каким именем будет сохранён файл. Например, оригинальное имя файла sun.png , если в качестве значения указано flower.png , то файл будет сохранён под именем flower.png . Если значение не указано, то будет использовано оригинальное имя файла.

Примечание: атрибут download используется только совместно с атрибутом href .

Href: Указывает URL-адрес веб-страницы, на которую будет сделан переход (количество символов в значении адреса не должно превышать 255). Поскольку в качестве адреса ссылки может быть указан путь к файлу любого типа, то результат перехода по ссылке будет зависеть от конечного файла.

Примечание: в качестве URL может быть использован абсолютный или относительный адрес.

Пример » hreflang: Определяет язык текста в документе, на который ведет ссылка. Пример » media: Указывает тип носителя документа, на который ведёт ссылка. rel: Указывает отношение между текущим документом и документом, на который ведет ссылка. Возможные значения атрибута:

alternate - ссылка на альтернативную версию документа (страница для печати, страница на другом языке и тд.)
author - ссылка на автора документа
bookmark - постоянный URL-адрес, используемый для закладок
help - ссылка на документ-справку
license - ссылки на сведения об авторских правах для документа
next - следующий документ в выделенной области
nofollow - ссылка на документ, который не нужно индексировать («nofollow» используется поисковой системой Google, чтобы указать, что поисковый бот не должен переходить по этой ссылке)
noreferrer - указание браузеру не посылать HTTP-заголовок если пользователь перешел по ссылке
prefetch - указывает, что следует кэшировать целевой документ
prev - предыдущий документ в выделенной области
search - ссылка на поиск для документа
tag - тег (ключевое слово) для текущего документа

Стиль по умолчанию

a:link, a:visited { color: (зависит от браузера); text-decoration: underline; cursor: auto; } a:hover, a:active { color: (зависит от браузера); }

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

Внешние ссылки, атрибут HREF

Ссылки в HTML обозначаются якорным элементом . Атрибут href применяется для указания URL адреса ссылки, а текст, расположенный между открывающим и закрывающим тегами, становится связанным.

href="http://www.сайт/html/" >Знакомство с языком HTML

В браузере отображается:

Абсолютные и относительные ссылки

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

В браузере увидим:

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

В браузере снова увидим:

Если необходимо сослаться на страницу, которая находится в подкаталоге, то перед именем файла прописывается подкаталог - .../html/text.html . Чтобы переместиться из каталога в другой каталог - .../svoy-site/html/text.html .

Атрибут TITLE

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

href="http://www.сайт/html/" title ="Знакомство с языком HTML. Руководство по написанию грамотного и оптимизированного кода самостоятельно от начала и до конца." >Знакомство с языком HTML

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

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

href="mailto:[email protected]" >Адрес моей электронной почты

В браузере видим:

Внутренние ссылки, атрибут NAME

Как включаются внешние ссылки мы уже поняли, сейчас разберемся с внутристраничным связыванием. Внутренние ссылки позволяют переходить к определенным местам web-страницы (якорям), а не на страницу в целом. Эти ссылки создаются с использованием знака # , за которым указывается соответствующее имя. После определяется местоположение с использованием атрибута name , значение которого соответствует имени указанному в ссылке. На этой странице якорями являются заголовки 3 уровня, в коде это выглядит так:

name="vnutr" >Внутренние ссылки, атрибут NAME :

Рассмотрим на общем примере, пишем HTML-код ссылок:

href="# vnesh" >Внешние ссылки, атрибут HREF .
href="# tip" >Абсолютные и относительные ссылки.
href="# title" >Атрибут TITLE .
href="# mail" >Ссылки электронной почты.
href="# vnutr" >Внутренние ссылки, атрибут NAME .
href="# target" >Атрибут TARGET .

Смотрим в браузере:

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

href="http://www.сайт/html/#html" >Создаем html-страницу

В браузере отобразится:

Атрибут TARGET

При включении ссылок в HTML- языке можно управлять тем, куда будет открываться страница. По умолчанию ссылки открываются в том же окне, где открыта исходная страница. Но если есть необходимость открыть страницу в новом окне, то необходимо к тегу прописать атрибут target со значением _blank . А чтобы открыть страницу в родительском окне у атрибута target должно быть значение _parent . Посмотрим пример.

Описание

Тег является одним из важных элементов HTML и предназначен для создания ссылок. В зависимости от присутствия атрибутов name или href тег устанавливает ссылку или якорь. Якорем называется закладка внутри страницы, которую можно указать в качестве цели ссылки. При использовании ссылки, которая указывает на якорь, происходит переход к закладке внутри веб-страницы.

Для создания ссылки необходимо сообщить браузеру, что является ссылкой, а также указать адрес документа, на который следует сделать ссылку. В качестве значения атрибута href используется адрес документа (URL, Universal Resource Locator, универсальный указатель ресурсов), на который происходит переход. Адрес ссылки может быть абсолютным и относительным. Абсолютные адреса работают везде и всюду независимо от имени сайта или веб-страницы, где прописана ссылка. Относительные ссылки, как следует из их названия, построены относительно текущего документа или корня сайта.

Синтаксис

... ...

Атрибуты

Активация ссылки с помощью комбинации клавиш. Устанавливает координаты активной области. Предлагает скачать указанный по ссылке файл. Задает адрес документа, на который следует перейти. Идентифицирует язык текста по ссылке. Устанавливает имя якоря внутри документа. Отношения между ссылаемым и текущим документами. Отношения между текущим и ссылаемым документами. Задает форму активной области ссылки для изображений. Определяет последовательность перехода между ссылками при нажатии на кнопку Tab . Имя окна или фрейма, куда браузер будет загружать документ. Добавляет всплывающую подсказку к тексту ссылки. Указывает MIME-тип документа, на который ведёт ссылка.

Закрывающий тег

Обязателен.

HTML5 IE Cr Op Sa Fx

Тег А

Посмотрите на мою фотографию!

Как сделать такое же фото?

Здравствуйте, уважаемые читатели блога сайт. Сегодня я хочу поподробнее поговорить про то, что такое гиперссылка в языке Html, как можно размещать их в тексте на сайте, как сделать ссылкой картинку, как правильно использовать тег «A» и его атрибуты «Href» и «Target blank» (открыть в новом окне).

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

Что такое гиперссылка и якорь (anchor)

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

Для того, чтобы сделать гиперссылку в Html коде, нам тоже понадобится использовать тег A. Для него можно будет использовать различные атрибуты, задающие, например, URL адрес цели перемещения по этой ссылке (href) или же предписывающий открывать ее в новом окне (target=_blank). Но давайте поговорим обо все по порядку.

Как мы уже упомянули чуть выше, гиперссылки являются ключевым элементом языка Html и они позволяют ссылаться как на внутренние страницы своего же сайта, так и на другие ресурсы интернета. Скажу банальность — переход по ссылке осуществляется посредством щелчка мыши по ней (а вы как думали?).

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

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

Служебные гиперссылки создаются не с помощью тега «A» (как обычные), а с помощью тега «Link» . Задач, ими выполняемых, довольно много, например, с помощью них к Html документу подключаются внешние файлы с таблицами каскадных стилей CSS или, например, .

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

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

Гиперссылки являются элементами навигации, которые призваны вас переносить на другие документы в сети, либо осуществлять перемещение по содержимому уже просматриваемой вами web-страницы с помощью заранее сделанных в теле документа меток, которые называются еще Html якорями (anchor).

Тут может возникнуть некоторая путаница, т.к. в SEO под словом , но в языке Html под «anchor» подразумевают именно якорь (перевод слова anchor) или же метку в тексте, на которую потом можно будет сослаться.

Зачем в Html используются якоря (anchor)? Это довольно удобно при создании навигации по довольно длинной web-странице. Наверное, вы встречали в сети, когда на открытой вами страничке сразу под ее заголовком приведены названия разделов статьи, опубликованной на этой странице.

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

Как создаются якоря и хеш ссылки

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

Т.е. для того, чтобы сделать anchor, нужно в пустой тег гиперссылки «А» прописать единственный атрибут «Name», в качестве значения которого использовать уникальную метку, которая не должна содержать пробелов и в которой можно использовать символы латиницы, цифры, дефис и подчеркивание (в полной аналогии с правилами, по которым можно создавать Урлы — ,,,[_],[-]).

При этом, якорь не будет виден на самой странице, т.к. внутри элементов «A» мы не прописали никакого текста. Однако, созданные таким вот образом anchor будут загрязнять Html код, и поэтому сейчас гораздо чаще чем якоря используют другой способ создания метки .

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

Т.е. для создания аналога якоря достаточно прописать к любому тегу универсальный атрибут ID (его можно будет использовать для всех тегов, и на его основе, кстати, работают ), например, так:

Текст заголовка

Так, теперь вместо создания нужного количества anchor, загрязняющих код и являвшихся на данный момент не валидными (не рекомендуемыми консорциумом W3C, который и разрабатывает язык Html), мы просто добавляет Id.

Оказывается, что для этого нужно будет, как обычно, внутри гиперссылки «А» вставить обязательный атрибут «Href», но значение которого будет формироваться из имени нужной метки (якоря) с предваряющим его знаком решетки «#» , которая еще имеет название хеш (отсюда, кстати, и растут ноги у часто используемого названия: хеш ссылки):

перекинет на место страницы, помеченной якорем

Обратите внимание, что при переходе по такой гиперссылке, открытия нового документа не произойдет. Браузер прокрутит уже открытую страницу до такого положения, чтобы место в тексте, куда вы вставили anchor, заняло позицию в самом верху экрана. Логично было бы предположить, что значения всех меток (якорей) на одной странице должно быть уникальным во избежании непоняток для браузера.

Если вы делаете якорь с помощью атрибута ID в удобно расположенном для этого теге, то нужно учитывать, что кроме ограничения по типу используемых символов (,,,[_],[-]), значение ID обязательно должно начинаться с символа латинской буквы .

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

Если вы не пропишите после символа решетки «#» никакого названия метки якоря (href="#"), то такая гиперссылка прокрутит страницу к началу . Именно так можно будет создать простейшую кнопку «Наверх», сделав ссылку с картинки (поговорим об этом чуть ниже) и вставив ее в шаблоне своего сайта, например, так:

Href — обязательный атрибут тега любой гиперссылки

Теперь давайте перейдем от навигации внутри документа (с помощью якорей) к навигации внешней, т.е. нам нужно будет сделать ссылки, ведущие на другие документы нашего или же другого сайта. Теперь в атрибуте Href нам нужно прописывать уже не метки якорей, а путь до открываемого файла (страница по своему замыслу является файлом, подгружаемым в браузер для последующего отображения).

анкор

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

Однако, напомню, при создании Урлов предпочтительнее использовать только следующие символы : (,,,[_],[-]) и не использовать пробелы. Если мы рассматриваем содержимое атрибута Href для абсолютных ссылок, то схематично это можно будет представить так:

Если отбросить то, что вы редко будете использовать, то можно представить все то же самое в несколько упрощенном виде:

Протокол(обычно http)://доменное_имя (например, сайт)/путь_до_файла (web страницы)

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

В интернете вы можете встретить различные варианты содержимого Href, например, такой:

Https://сайт/videokursy

Или такой (с расширением для файла):

Https://сайт/seo/kak-raskrutit-sajt.html

Сути это не меняет, а вот если в конце содержимого атрибута Href внутри гиперссылки будет стоять слэш, то это значит, что обращение идет уже не к файлу, а к папке, в которой будет искаться соответствующий индексный объект (подробнее об этом читайте в статье по url адресам упомянутой выше).

Скачать что-то по ссылке

Как видите, данная гиперссылка ничем не отличается от обычной, просто браузер понимает, что файл с расширение zip ему нужно именно скачать, а не пытаться открыть для просмотра, как, например, файлы документа с расширением html. Хотя, вы все это можете настроить сугубо индивидуально в своем браузере под свои личные нужды.

Скачать с Ftp сервера

Можно еще, например, создать (почтовый), добавив в Href соответствующий Url:

Написать письмо

При переходе по такой ссылке у вас на компьютере откроется используемая вами по умолчанию почтовая программа (в браузере можно настроить, чтобы линки с mailto в Href открывались в Gmail, в и др.) и появится диалог создания нового письма, в котором в поле «Кому» будет вставлен приведенный в Href почтовый адрес.

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

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

Как открыть ссылку в новом окне (target blank)

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

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

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

Откроет документ в этом же окне

Хотя, конечно же, target="_self" в теге «A» никто не прописывает, ибо это значение используется по умолчанию, а вот если нужно открыть страницу в новом окне, то нужно будет прописать target="_blank":

Откроется в новом окне

Обратите внимание, что значения атрибута Target пишутся со знаком подчеркивания вначале (_blank), ибо так оговорено в валидаторе Wc3, содержащем норы языка гипертекстовой разметки. Что примечательно, в Html предусмотрена возможность изменить вариант открытия ссылки принятый по умолчанию.

Например, если вы захотите, чтобы все гиперссылки вашего сайта открывались в новом окне, то нужно будет в области Head, используемого вами шаблона, прописать тег Base с атрибутом target="_blank":

что-то там еще

И теперь, если какую-то из ссылок вы захотите открывать в этом же окне, то в ее тег «A» вам уже нужно будет добавить target="_self", ибо по умолчанию сейчас у вас теперь используется _blank. О, как.

Кстати, элемент Base я использовал описанным выше способом, но и заключал в него область кода с несколькими гиперссылками, которые нужно было открыть в новом окне. Т.е. я использовал еще и закрывающий тег Base внутри области Body, и все работало. Хотя такой код, конечно же, получается не валидным.

Цвета гиперссылок при наведении и переходе — как их поменять

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

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

По умолчанию, в чистом Html (без использования свойств CSS) ссылки выделяются подчеркиванием и могут иметь три варианта цвета :

Синий — цвет для неотработанных ссылок, по которым пользователь еще не кликал
Красный — его принимает гиперссылка сразу после щелчка по ней и до тех пор, пока запрошенный документ не будет загружен в браузер пользователя по сети (в современных условиях уловить этот момент бывает совсем не просто и всему виной повсеместно )
Пурпурный — цвет для отработанных линков, по которым уже прошелся пользователь

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

Link — задается цвет не посещенной ссылки
Alink — цвет активной в данный момент, которая отрабатывается браузером
Vlink — цвет уже посещенной пользователем гиперссылки

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

Естественно, что здесь имелся в виду вариант чистого Html, когда по каким-либо причинам не удобно или не возможно использовать стилевое оформление, в противном случае все эти цвета можно будет легко задать и поменять с помощью .

Как сделать картинку ссылкой — два способа

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

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

Чтобы удалить добавление рамочки к картинке, которую вы сделали гиперссылкой, вам нужно добавить атрибут Border со значением ноль в тег Img:

Это очень простой способ сделать картинку ссылкой, но есть и более сложный вариант, называемый картой изображений . В этом случае, благодаря использованию довольно-таки большого числа Html тегов и атрибутов, можно сделать из одной картинки целую карту ссылок с активными областями (кликабельными и имеющими различные формы — прямоугольник, окружность, многоугольник).

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

Удачи вам! До скорых встреч на страницах блога сайт

Вам может быть интересно

Select, Option, Textarea, Label, Fieldset, Legend - теги Html формы выпадающих списков и текстового поля
Как вставить в HTML ссылку и картинку (фото) - теги IMG и A
Iframe и Frame - что это такое и как лучше использовать фреймы в Html
Пробельные символы и форматирование ими кода в Html, а так же спецсимволы неразрывного пробела и другие мнемоники
MailTo - что это и как в Html создать ссылку для отправки Емейла
Как задаются цвета в Html и CSS коде, подбор RGB оттенков в таблицах, выдаче Яндекса и других программах
Теги Font (Face, Size и Color), Blockquote и Pre - устаревшее форматирование текста в чистом HTML (без использования CSS)
Img - Html тег для вставки картинки (Src), выравнивания и обтекание ее текстом (align), а так же задания фона (background)
Списки в Html коде - теги UL, OL, LI и DL
Теги и атрибуты заголовков H1-H6, горизонтальной линии Hr, переноса строки Br и абзаца P по стандарту Html 4.01

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

Синтаксис тега

анкор

Обязательным параметром у ссылки является только href="URL" , т.е. адрес ссылки. Между открывающим тегом и закрывающим тегом пишется анкор ссылки, который может состоять из слов, символов, объектов (картинки и прочее).

... ...

Примечание 1

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

Примечание 2

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

Атрибуты и свойства тега

1. Атрибут target="параметр" , который может принимать следующие значения:

_blank - открывает страницу в новом окне
_self - загружает страницу в текущее окно
_parent - загружает страницу во фрейм-родитель
_top - отменяет все фреймы и загружает страницу в полном окне браузера

Пример с target

как заработать на своем сайте

Чаще всего применяется значение _blank , поскольку он позволяет открывать страницу в новой вкладке. Это удобно для пользователя, поскольку у него остается открытой текущая страница в соседней вкладке.

2. Атрибут title="подсказка" позволяет прописать подсказку, которая высветится при наведении курсора на ссылку. Это нужно для более точного описания ссылки. Атрибут тайтл поможет пользователю убедиться в том, что по ссылке он найдет нужную информацию, а для поисковой системы это дополнительный ключевые слова для страницы, на которую ведет ссылка.

Пример с подсказкой title

... как заработать на своем сайте ...

Преобразуется на странице в следующее:

В данном случае подсказка высвечивается стандартным способом. Однако можно также сделать более красивую всплывающую подсказку: как сделать красивую всплывающую подсказку для ссылки »

3. Атрибут class="название класса" задает класс стиля для ссылки. О классах Вы уже знаете из предыдущего урока (стили в html). Для тега a стили имеют небольшие отличия. Объясню все нюансы на следующем примере.

Пример

как заработать на сайте

Преобразуется на странице в следующее:

Поясню выше описанный пример. Класс, в котором мы описали тег называется list . Давайте разберемся, что значат приписки visited , link и hover .

a.класс:visited стиль для ссылки, который пользователь уже посетил. Это позволяет пользователю не заходить на одну и ту же страницу дважды, даже если у ссылки на эту страницу будут разные анкоры.
a.класс:link стиль для тех ссылок, которые ещё не посещал пользователь (можно не указывать приписку ":link", поскольку a.класс - делает то же самое).
a.класс:hover стиль ссылки при наведении курсора. Обычно для этого стиля делают другой цвет, а также подчеркивание, чтобы дать пользователю понять, что ссылка стала активной.

4. Атрибут rel="параметр" - определяет отношения между текущим документом и документом, на который ведет ссылка. Этот атрибут носит важное значение для поисковых машин, но браузерами никак не трактуется. Может принимать следующее значения:

4.1. nofollow - означает то, что вес по ссылке не будет передаваться (робот не будет переходить по ссылке). Например:

как заработать на сайте

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

4.2. canonical - в случае множества дублей на сайте, указывает главную страницу среди всех дублей

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

Как сделать ссылку на адрес почты

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