HTML тег
По умолчанию во всех браузерах ссылки выглядят следующим образом:
- Непосещённая ссылка — текст синего цвета
- Посещенная ссылка — текст фиолетового цвета
- Активная (при клике (и удерживании) ЛКМ) — текст красного цвета
В качестве ссылки может выступать не только текст, но и любой другой HTML-элемент, который может быть расположен в теле документа, если его разместить внутри элемента .
Особенность ссылок состоит в том, что сама ссылка может вести не только на другую веб-страницу, но и на файл любого типа. Файл на который ведёт ссылка, открывается в окне браузера только в тех случаях, когда браузер знает тип документа, в других случаях выводится сообщение, как следует обработать файл — открыть его или сохранить в указанную папку.
По умолчанию, страница, на которую ведёт ссылка открывается в том же окне, где находится текущая ссылка. Ссылка, которая ведёт на несуществующую страницу, файл или изображение называется «мёртвая» или «битая».
Ссылки для перехода внутри веб-страницы
Ссылки можно также использовать для перехода к определенному месту внутри веб-страницы (не обязательно в текущей). Для определения места на странице, к которому будет осуществлён переход по ссылке, используется любой HTML-элемент. Чтобы определить элемент к которому будет сделан переход по ссылке, нужно использовать глобальный атрибут id , указав его у нужного элемента:
Заголовок
Чтобы перейти к определённому месту на другой странице, нужно указать необходимый идентификатор после URL-адреса:
ссылка ссылка
Примечание: основная польза от ссылок внутри веб-страницы заключается в том, что пользователю не приходится просматривать всю веб-страницу в поисках нужного раздела. Такие ссылки удобно применять на страницах с большим объемом содержимого, чтобы посетители могли быстро переходить к нужному им разделу.
Ссылка на почтовый ящик
Чтобы сделать ссылку на электронную почту, нужно в значении атрибута href ввести ключевое слово mailto , поставить после него двоеточие и написать адрес электронной почты, на который вы хотите сослаться:
Это ссылка на почту: моя почта
Такая ссылка ничем не будет отличаться от остальных ссылок вашего документа. Только вместо другой страницы при нажатии на такую ссылку откроется установленная у вас по умолчанию программа почты.
Атрибуты
download: Указывает, что файл, на который ведёт ссылка, будет загружен, когда пользователь кликнет по ссылке:
Значение атрибута определяет под каким именем будет сохранён файл. Например, оригинальное имя файла sun.png , если в качестве значения указано flower.png , то файл будет сохранён под именем flower.png . Если значение не указано, то будет использовано оригинальное имя файла.
Примечание: атрибут download используется только совместно с атрибутом href .
href: Указывает URL-адрес веб-страницы, на которую будет сделан переход (количество символов в значении адреса не должно превышать 255). Поскольку в качестве адреса ссылки может быть указан путь к файлу любого типа, то результат перехода по ссылке будет зависеть от конечного файла.
Примечание: в качестве URL может быть использован абсолютный или относительный адрес.
- alternate — ссылка на альтернативную версию документа (страница для печати, страница на другом языке и тд.)
- author — ссылка на автора документа
- bookmark — постоянный URL-адрес, используемый для закладок
- help — ссылка на документ-справку
- license — ссылки на сведения об авторских правах для документа
- next — следующий документ в выделенной области
- nofollow — ссылка на документ, который не нужно индексировать («nofollow» используется поисковой системой Google, чтобы указать, что поисковый бот не должен переходить по этой ссылке)
- noreferrer — указание браузеру не посылать HTTP-заголовок если пользователь перешел по ссылке
- prefetch — указывает, что следует кэшировать целевой документ
- prev — предыдущий документ в выделенной области
- search — ссылка на поиск для документа
- tag — тег (ключевое слово) для текущего документа
- _blank — открывает документ в новом окне или вкладке
- _parent — открывает документ в родительском фрейме
- _self — открывает документ в той же директории, где располагается ссылка (значение по умолчанию)
- _top — открывает документ во всю ширину окна
- имя_фрейма — открывает документ в элементе iframe, имя которого было указано в качестве значения
Примечание: атрибуты: hreflang, media, rel, target и type не могут быть использованы, если не установлен атрибут href .
Стиль по умолчанию
a:link, a:visited < color: (зависит от браузера); text-decoration: underline; cursor: auto; >a:hover, a:active
Пример
Результат данного примера в окне браузера:
Копирование материалов с данного сайта возможно только с разрешения администрации сайта
и при указании прямой активной ссылки на источник.
2011 – 2023 © puzzleweb.ru | razumnikum.ru
HTML тег
Гиперссылки (или просто «ссылки») определяются тегом (HTML Anchor Element).
Основная функция ссылок заключается в том, что они позволяют переходить с одного HTML документа на другой, либо содержать адрес файла, предназначенного для открытия в браузере пользователя, или для его дальнейшего скачивания.
Поддержка браузерами
| Тег | Chrome | Firefox | Opera | Safari | IExplorer | Edge |
|---|---|---|---|---|---|---|
| Да | Да | Да | Да | Да | Да |
Атрибуты
| Атрибут | Значение | Описание |
|---|---|---|
| charset | char_encoding | Не поддерживается в HTML5. Определяет кодировку, связанного документа. |
| coords | coordinates | Не поддерживается в HTML5. Определяет координаты ссылки. |
| download | filename | Если атрибут указан, то браузер не переходит по ссылке, а предлагает скачать документ, указанный в адресе ссылки. |
| href | URL | Задает URL страницы, или документа на которую ведёт ссылка. |
| hreflang | language_code | Определяет язык связанного документа на который ведёт ссылка. |
| media | media_query | Указывает, что документ на который ведёт ссылка адаптирован под определённые виды устройств. |
| name | section_name | Не поддерживается в HTML5. Задает имя якоря. Вместо этого атрибута используйте глобальный атрибут id. |
| rel | alternate author bookmark help license next nofollow noreferrer prefetch prev search tag |
Указывает отношение между текущим документом и связанным документом (на который ведёт ссылка). |
| rev | text | Не поддерживается в HTML5. Указывает отношение между текущим документом и связанным документом (на который ведёт ссылка). |
| shape | default rect circle poly |
Не поддерживается в HTML5. Определяет форму ссылки (использовался с атрибутом coords ). Используйте вместо данного тега элемент . |
| target | _blank _parent _self _top framename |
Указывает, где открыть документ. |
| type | media_type | Указывает MIME-тип документа на который осуществляется переход. |
Пример использования
Пример размещения ссылки в HTML документе href = "http://www.yandex.ru">Найдется всё
В браузере же это будет отображаться по умолчанию следующим образом: Найдется всё.
Атрибут href (аббревиатура от hyper reference) — это основной атрибут тега , указывающий браузеру, URL-адрес страницы, куда ведет ссылка. Единый указатель ресурса (англ. Uniform Resource Locator, URL) — единообразный локатор (определитель местонахождения) ресурса.
Относительные и абсолютные пути ссылок
В приведенном выше примере используется абсолютный адрес пути. Название абсолютный связано с тем, что мы задаем полный веб-адрес страницы в качестве пути к файлу. Ниже приведены примеры указания абсолютных путей:
href = «https://www.yandex.ru»>Содержимое элемента href = «http://www.yandex.ru»>Содержимое элемента href = «//www.yandex.ru»>Содержимое элемента
Обращаю Ваше внимание, что в большинстве случаев, абсолютные пути ссылок применяются для страниц или файлов, которые находятся на других ресурсах (распологаются не на том же сервере, что и страница с которой ссылаются).
Если страница или файл на который ссылаются расположен на том же сервере, что и страница с которой ссылаются, то, как правило используются относительные адреса ссылок. Основная особенность относительных ссылок заключается в том, что они размещаются относительно корня сайта или относительно текущего HTML документа.
Путь относительно текущего документа
Предлагаю для начала разобраться с путями относительно текущего HTML документа. Независимо в каких дебрях находится файл, путь вы будете задавать относительно этого файла.
Пример подключения файлов:
Пример подключения файлов к HTML документу из той же папки src = "image.png" alt = "someimage info"> href = "page.html">Содержимое элемента
Перейдем к следующему примеру, допустим у нас есть файл index.html, в этом же каталоге есть папка (каталог) с именем etc из которой нам необходимо подключить изображение и сделать ссылку на документ page.html:
Пример подключения файлов из дочернего каталога src = "etc/image.png" alt = "someimage info"> href = "etc/page.html">Содержимое элемента
Обратите внимание, как мы указываем путь к нашим файлам — мы задаем название каталога и через прямой слеш указываем название необходимого нам файла. Данный каталог является по отношению к текущему каталогу дочерним и чтобы подключить необходимые файлы мы спускаемся на один уровень ниже (название_каталога/необходимый_файл).
Ну и заключительный пример, в котором нам необходимо подключить к нашей странице изображение, которое находится в каталоге, который расположен на два уровня выше текущей страницы и необходимо добавить ссылку, которая находится на один уровень выше текущей страницы:
Пример подключения файлов из родительского каталога src = "../../image.png" alt = "someimage info"> href = "../page.html">Содержимое элемента
Обратите внимание, что если файл находится в родительской папке, то необходимо использовать символы ../ это позволит подняться на один уровень вверх. Вы можете, используя символы ../ подниматься вверх пока не доберетесь до корневой папки Вашего сайта или жесткого диска.
Путь относительно корня сайта
Хочу сразу обратить ваше внимание, чтобы путь относительно корня сайта работал на локальном компьютере, то у вас должна быть установлена программная среда, которая позволяет эммулировать веб-сервер.
Если вы планируете создавать сайты и у вас нет среды для ваших тренировок, то рекомендую Вам скачать программный комплекс, предназначенный для локальной разработки, отладки и тестирования веб проектов. Я использую Open Server, он предназначен для пользователей, которые используют операционную систему Windows. В качестве аналога Open Server под Mac, могу предложить MAMP, если он вам не подойдет, можете попробовать выбрать другой.
Перейдем к следующему примеру, в котором нам необходимо подключить файлы, которые находятся на веб-сервере. На примере куска этого сайта, подключим из папок primer по одному изображению и одному html файлу:
Как и при использовании абсолютных адесов, способ задавать путь относительно корня сайта довольно-таки прост. Разница заключается лишь в том, что у нас отпадает необходимость указывать имя домена, ну и соответственно относительные пути используются только в рамках одного сервера.
Пример подключения файлов относительно корня сайта src = "/html/primer/anyimage.png" alt = "someimage info"> href = "/html/primer/anypage.html">Содержимое элемента src = "/css/primer/anyimage.png" alt = "someimage info"> href = "/css/primer/anypage.html">Содержимое элемента
Обратите внимание, что необходимо указывать прямой слэш в начале пути, это сообщает браузеру пользователя, что путь начинается с корневого каталога.
Атрибут target
Атрибут target используется для того, чтобы указать браузеру, где необходимо открыть веб страницу. Следующий пример открывает документ в новом окне браузера:
href="http://yandex.ru" target="_blank">Поиск
Ниже представлены все значения этого атрибута:
| Атрибут | Значение | _blank | Загружает страницу в новое окно браузера. |
|---|---|
| _self | Загружает страницу в текущее окно. Это значение по умолчанию. |
| _parent | Загружает страницу во фрейм-родитель, если фреймов нет, то это значение работает как _self. |
| _top | Отменяет все фреймы и загружает страницу в полном окне браузера, если фреймов нет, то это значение работает как _self. |
| framename | Открывает ссылку в указанном фрейме. |
Работа с фреймами будет рассмотрена позднее в статье учебника «HTML фреймы».
Атрибут mailto
Использование атрибута «mailto» в HTML документе позволяет создать ссылку для отправки письма:
href = "mailto:smbd@some.com">Написать автору
Для того, чтобы ссылки mailto корректно работали необходимо чтобы на компьютере или в браузере посетителя был настроен почтовый / веб клиент по умолчанию, иначе при клике на ссылку ничего не произойдет.
В значении атрибута можно сразу указать значения для заголовков (тема, копии, тело письма и т.п.). Пробелы и переносы строки нельзя вставить без кодирования:
href = "mailto:mail_1@some.com?subject=Тема%20моего%20письма&cc=mail2@some.com&body= Здравствуй%20уважаемый%20автор">Написать автору
- subject —тема письма.
- cc —копия письма.
- bcc —скрытая копия письма.
- body —тело письма.
Допустимо указывать несколько адресов (либо не указывать вовсе):
href=" mailto:mail_1@some.com, mailto:mail_2@some.com ">Написать автору
Изображение как ссылка
Для того, чтобы использовать изображение в качестве ссылки, вам необходимо поместить изображение между тегами :
Использование изображения в качестве ссылки href = "http://yandex.ru"> ![]()
src="10.jpg" alt="Поиск в Яндекс">
При этом при клике на картинку будет осуществлён переход по указанной ссылке:
Размещение файлов на сайте для скачивания
С выходом HTML 5 тег обзавелся таким новым атрибутом как download, он сообщает браузеру пользователя, что необходимо скачать документ, указанный в адресе ссылки, а не переходить по ней.
Пример использования атрибута download href = "/path/to/file.mp3" download>Любимая песня
Обращаю Ваше внимание, что к сожалению, в настоящее время еще не все браузеры поддерживают применение этого атрибута:
| Тег | Chrome | Firefox | Opera | Safari | IExplorer | Edge |
|---|---|---|---|---|---|---|
| download |
14.0 | 20.0 | 15.0 | 10.1 | Нет | 13.0 |
Если использовать только HTML, то единственный вариант, который позволит посетителям скачать, а не открыть, с вашего сайта, например, текстовый файл, это поместить его предварительно в архив (заархивировать файл). Алгоритм работы любого браузера такой, что если он не может открыть файл (не поддерживает формат), то он предлагает скачать / скачивает файл.
Отличия HTML 4.01 от HTML 5
В HTML 4.01 элемент мог быть как гиперссылкой, так и якорем, а в HTML5 элемент всегда гиперссылка (в случае отсутствия атрибута href является контейнером для гиперссылки). В HTML5 добавлено два новых атрибута и пять удалено.
Значение CSS по умолчанию
a:link, a:visited color: (internal value); text-decoration: underline; cursor: auto; > a:link:active, a:visited:active color: (internal value); >
9 HTML-тегов (и 11 атрибутов), которые необходимо знать для SEO
HTML – это язык разметки, который составляет основу большинства веб-страниц.
Возможно, это одна из самых фундаментальных частей технического SEO.
Используя элементы HTML, специалисты по SEO могут передавать информацию о странице пользователям и поисковым роботам.
Это может помочь прояснить важность, характер и порядок содержимого на странице, а также его связь с другими веб-страницами.
Разница между тегами и атрибутами
Чтобы понять разницу между тегами и атрибутами, нам нужно убедиться, что мы правильно поняли нашу терминологию.
Многие люди будут использовать фразу «тег» и «атрибут» как синонимы, но давайте будем точными.
Формат нижеследующего HTML-элемента состоит из трех частей:
- Открывающий тег.
- Контент, относящийся к этому тегу.
- Закрывающий тег.
Добро пожаловать на мою страницу о котятах
- «
» открывает тег.
- «Добро пожаловать на мою страницу о котятах» – это содержание тега.
- «
» закрывает тег.
Этот элемент является заголовком и будет использоваться в качестве видимого заголовка на веб-странице, чтобы представить информацию о котятах.
Теги
Теги должны иметь открывающий
Есть также пустые элементы, такие как
, для которых нет содержимого или закрывающего тега.
Атрибуты
Атрибуты добавляются к элементам для их изменения. Они находятся внутри элемента, например:
3 Основные HTML-тега
Чтобы сделать веб-страницу полезной, необходимо несколько ключевых тегов.
Тег – это самый первый тег на веб-странице.
По сути, он представляет страницу как веб-страницу.
Тег вводит первый раздел страницы.
Здесь содержится информация о странице, которая не будет отображаться на странице.
Важно знать о , поскольку именно здесь должны быть размещены некоторые из важных тегов для SEO.
Тег body содержит информацию о странице, которую увидят ваши посетители.
Вот куда пойдут ваши тексты, изображения и видео.
В теле также будут находиться некоторые другие теги HTML, о которых мы поговорим позже.
Общие теги для SEO и используемые в них атрибуты
Тег находится внутри страницы.
Он может содержать атрибуты, описывающие информацию о веб-странице, которая на самом деле не будет отображаться в содержимом страницы.
Этот метатег часто называют «метаданными» из-за используемых с ним атрибутов, которые управляют такими вещами, как «мета-описание» и неиспользуемые «мета-ключевые слова».
Атрибут имени
Атрибут name используется с тегом .
По сути, это способ указать ботам, которые могут посещать страницу, относится ли к ним следующая информация или нет.
Например, включение означает, что все боты должны обратить внимание на директиву “noindex”.
Вы часто слышите, что это называется «метатег роботов».
Если использовалось следующее , только бот Google должен был бы принять во внимание директиву “noindex”.
Это хороший способ дать поисковым ботам команды, которые нужны не всем.
Атрибут Noindex
Атрибут «noindex» обычно используется в SEO.
Вы часто слышите, как его называют «тегом noindex», но точнее, это атрибут тега .
Он пишется так:
Этот фрагмент кода позволяет определять, какой контент может быть включен в индекс поисковой системы.
Добавляя атрибут «noindex», вы, по сути, сообщаете поисковой системе, что она не может использовать эту страницу в своем индексе.
Например, это полезно, если есть конфиденциальный контент, который вы не хотите видеть в обычном поиске.
Например, если на вашем сайте есть области, которые должны быть доступны только для платных участников, включение этого контента в поисковые индексы может сделать его доступным без входа в систему.
Директиву «noindex» необходимо прочитать, чтобы следовать ей. То есть поисковые роботы должны иметь доступ к странице для чтения HTML-кода, содержащего директиву.
Таким образом, будьте осторожны, чтобы не заблокировать доступ роботов к странице в robots.txt.
Атрибут Description
Атрибут описания, более известный как «мета-описание», используется с тегом .
Содержимое этого тега используется в результатах поиска под содержимым тега .
Это позволяет обобщать контент на странице таким образом, чтобы помочь поисковикам определить, соответствует ли страница их потребностям.
Это не влияет на рейтинг страницы, но может стимулировать переходы на страницу из результатов поиска.
Важно понимать, что во многих случаях Поисковая система будет игнорировать содержание атрибута описания в пользу использования своего собственного описания в поисковой выдаче.
Также известный в просторечии как «мета-заголовок», это тег, который вы используете для определения заголовка страницы. Он находится внутри сайта.
Таким образом, он не виден пользователям на веб-странице. Тем не менее, он отображается в строке браузера, в результатах поиска и позволяет вам обозначать релевантность страницы поисковому запросу – как для поисковых роботов, так и для пользователей.
от до
Эти теги-заголовки используются для указания , какие части содержания HTML должны быть оформлены в виде заголовков.
Теги располагаются внутри страницы, поэтому текст виден пользователям, просматривающим содержимое страницы.
Теги заголовков следует использовать для структурирования страницы.
При создании веб-сайта разработчики гарантируют, что стили будут связаны с каждым типом тега заголовка.
Это означает, что слова, заключенные в тег , должны отличаться от слов, заключенных в тег .
Это помогает пользователям определить, является ли раздел текста частью предыдущего раздела, например заголовки и подписи.
Теги заголовков также помогают поисковым роботам определять структуру контента на странице.
Теги ссылок и атрибут Href
Как специалисты по SEO, мы проводим много времени в поисках ссылок.
Но знаете ли вы, как структурирована ссылка и почему некоторые ссылки считаются более ценными, чем другие?
Стандартная гиперссылка – это, по сути, тег . Его формат следующий:
Атрибут href = определяет место назначения ссылки (то есть, на какую страницу она ведет).
Текст, который находится между открывающим тегом и закрывающим тегом , является текстом привязки.
Это текст, который пользователь увидит на странице, которая выглядит интерактивной.
Это используется для ин
Тег HTML ссылка, гиперссылка, якорь
Содержит обязательный атрибут href в котором указывают абсолютный либо относительный адрес ссылки и/или id элемента для якорной ссылки. Относительный адрес, например href=»/html» используется для указания позиции относительно текущего документа либо базового адреса из тега (подробнее про ). Абсолютный адрес, например href=»https://guruweba.com/html», не имеет привязки к текущему документу.
Существуют специальные ссылки mailto: — на электронную почту (открывает почтовый клиент пользователя, например gmail, с вписанным в строке «получатель» e-mail адресом со ссылки) и tel: — на номер телефона (для смартфонов — открывает набор номера и вводит номер со ссылки; для компьютеров — вызывает приложение для звонков, если установлено). Подробно эти виды ссылок описаны в статье: Ссылки на почту и номер телефона.
Синтаксис
Анкор — слово или фраза при клике на которые будет происходить переход к ссылаемому элементу.
URI Адрес — Абсолютный или относительный адрес страницы сайта, с или без указания позиции (id-элемента).
Отображение в браузере
Справка Гуру Веба по HTML.
Примеры использования в HTML коде
Справка HTML
Таблицы стилей CSS
Справка HTML. Параграф 2
Гуру Веба. Параграф 2
address@gmail.com
7(111)111-11-11
Поддержка браузерами
| Тег |  |
 |
 |
 |
 |
| Да | Да | Да | Да | Да |
Атрибуты
Указывает браузеру, что материал по ссылке необходимо скачать.
Если указано название файла, в диалоговом окне загрузки будет предложено сохранить файл именно под этим названием вместо названия файла с сайта.
by Lebedev
Оцените, насколько полезна эта страница
Комментарии
03 июня 2020 г.
А после HTML нужен пробел?
04 июня 2020 г.
Павел, необходим ли пробел после закрывающего тега ссылки или нет решает верстальщик, исходя их конкретной ситуации. Язык HTML это не требует.
Если вы используете ссылку как строчный объект внутри текстового абзаца, то да, вам нужен пробел (без пробела ссылка сольется с текстом, который будет находиться за ней).
Если же вы делаете, к примеру, навигационное меню, используя маркированный список, внутри которого располагаете ссылки , то в этом случае в пробеле нет необходимости.
29 июля 2020 г.
А если я хочу на странице сделать плавный переход, как будто прокручивание страницы к нужному моменту. Что тогда нужно мне добавить в данный код?
29 июля 2020 г.
Кристина, для того чтобы сделать плавную прокрутку к элементу страницы нужно использовать JavaScript. Можно воспользоваться существующей библиотекой, например, jQuery.ScrollTo, либо написать свое решение.
Вот пример как можно сделать плавную прокрутку страницы.
1) Добавьте атрибуты id у блоков, к которым нужна прокрутка.
2) Используйте якорные ссылки (href=»#») как кнопки для прокрутки.
3) Убедитесь, что к странице подключена библиотека JQuery, если нет — подключите.
4) Вставьте этот скрипт в конце кода вашей html страницы перед закрывающим тегом body:
В данном примере число 15 после offset().top — это расстоянии до блока в пикселях, на котором остановится прокрутка (можно удалить или поставить 0, если нужно прокручивать непосредственно к границам блока); 700 — длительность прокрутки в миллисекундах.
Вот ссылка на онлайн редактор кода, в котором сможете протестировать этот пример: https://guruweba.com/code/primer-plavnoy-prokrutki-stranitsy/
10 июля 2021 г.
Суть в чём — у меня есть страница, где содержится несколько изображений с гиперссылками вида «Viev details». Мне надо поменять «Viev details» на «На сайт/К сайту/Подробнее», однако в коде я не могу понять — КАК? Код этой страницы выглядит так:
Буду благодарен, если кто-то сможет подсказать.
22 июля 2021 г.
Иван, анкор ссылки (фраза «Viev details» в вашем случае) должен содержаться как раз после приведенного вами кода — перед закрывающим тегом . Возможно, после элемента , если ссылка содержит и картинку и текст.
Также возможно, что для генерации анкора используется JavsScript. В этом случае анкор не будет виден при открытии файла с кодом вашего блока, но будет виден через просмотр кода страницы в панели разработчика браузера. Тогда вам нужно будет найти скрипт в котором происходит генерация анкора и исправить текст анкора там.
24 июля 2021 г.
Огромное спасибо! Пришлось, правда, покопаться в Java (я в ней полный ноль), но нужный скрипт я нашёл в файле js
Ещё раз огромное спасибо)))