Руководство HTML Hyperlink

HTML Hyperlink
HTML Email Link
target
download
hreflang
type
ping
CSS Hyperlink

1. HTML Hyperlink

Гиперссылки (Hyperlink) в основном встречаются на web страницах, которые позволяют пользователям нажимать и переходить на другую страницу.

В HTML, используйте тег <a> чтобы создать гиперссылку (hyperlink). "a" это аббревиатура Anchor (Якорь).

Самый простой синтаксис для создания гиперссылки:

<a href="url">link text</a>

<!-- Examples: -->

<a href="https://google.com">Go to Google</a>
<a href="my-page.html">Go to My Page</a>

Локальная ссылка (Local link)

Локальная ссылка это ссылка для подключения к странице на том же website, для которой не требуются префиксы http://, https://.

<a href="products.html">Products</a>
<a href="admin/products.html">Product Management</a>

Атрибут (attribute) href является самым важным у тега <a>, он определяет адрес назначения (destination) ссылки. HREF это аббревиатура hypertext reference.

Нажмите на текст ссылки (link text), который доставит вас на указанный адрес.

Например:

https://ex1.o7planning.com/html/a/hyperlink-example.html

hyperlink-example.html

<!DOCTYPE html>
<html>
<head>
    <title>Hyperlink</title>
    <meta charset="UTF-8">
</head>
<body>
    <h2>Hyperlink</h2>
    <a href="https://google.com">Go to Google</a>
</body>
</html>

Пример создания гиперссылки на изображении:

image-hyperlink-example.html

<!DOCTYPE html>
<html>
<head>
    <title>Hyperlink</title>
    <meta charset="UTF-8">
</head>
<body>
    <h2>Image Hyperlink</h2>

    <a href="https://o7planning.org">
       <img src="../../_testdatas_/triceratops.png" height="150"/>
    </a>
</body>
</html>

2. HTML Email Link

Руководство HTML Email Link

3. target

Атрибут target определяет место где ссылка будет открытна. Например, target="_blank" значит ссылка будет открыта в новом окне (Или новом Tab).

Возможные значения атрибута target:

target	Описание
_blank	Открывет связанный документ в новом окне или Tab (вкладке).
_self	Открывает связанный документ в том же окне/tab, в котором он был нажат (Это по умолчанию).
_parent	Открывает связанный документ в родительском Frame. Или действуйте как "_self", если родительский Frame не существует.
_top	Открывает связанный документ в Viewport браузера.
framename	Открывает связанный документ в названном Frame.

target="_blank"

Пример открытия связанного документа в новом окне (Или новом Tab):

<a href="https://o7planning.org" target="_blank">Visit o7planning!</a>

target="_self" (Default)

taget="_self", связанный документ откроется в том же окне/Tab, где была нажата ссылка (Обычно щелчок левой кнопкой мыши). Однако, если пользователи хотят открыть документ в новом окне (Или в новом Tab) они могут нажать на кнопку колесика мыши (Mouse Wheel button), чтобы щелкнуть на ссылку.

<a href="https://google.com">Go to Google</a>

<!-- Same as: -->
<a href="https://google.com" target="_self">Go to Google</a>

target="_parent"

Руководство HTML IFrame

taget="_parent": Связанный документ откроется в родительском Frame. Или он будет работать так же, как "_self" если родительский Frame не существует.

parent-page.html

<!DOCTYPE html>
<html>
<head>
  <title>Hyperlink</title>
  <meta charset="UTF-8">
</head>
<body>
   <h3>parent-page.html</h3>
   <p>IFrame:</p> 
   <iframe src="child-page.html"
           style="border:1px solid black;height:200px;width:100%;"></iframe>
</body>
</html>

child-page.html

<!DOCTYPE html>
<html>
<head>
  <title>Hyperlink</title>
  <meta charset="UTF-8">
</head>
<body>
  <h3>child-page.html</h3>
  <p>a href="other-page.html" target="_parent"</p>
  <a href="other-page.html" target="_parent">Go to other-page.html</a>
</body>
</html>

other-page.html

<!DOCTYPE html>
<html>
<head>
  <title>Hyperlink</title>
  <meta charset="UTF-8">
</head>
<body>
  <h3>other-page.html</h3>
  <button onclick="history.back()">back</button>
</body>
</html>

4. download

Атрибут download говорит браузеру скачать URL вместо навигации(navigate) к нему. Значение атрибута download используется как названия файла, сохраняется на жестком диске пользователя.

<a href="/images/picture.png" download>picture.png</a>
<a href="/images/picture.png" download="new-file-name.png">picture.png</a>

Примечение:

Атрибут (attribute) download работает только с URL одного происхождения (same-orgin URLs)

HTTP Header Content-Disposition

Content-Disposition: inline

Content-Disposition: attachment

Content-Disposition: attachment; filename="filename.jpg"

Если HTTP Header Content-Disposition предоставляет название файлу, данное название отличается от значения атрибута download, название атрибута предоставляемый HTTP Header будет приоритетом при использовании.

Если Content-Disposition был настроен как значение inline.

Firefox расставляет приоритеты в отношении файлов предоставленных Content-Disposition.
Chrome расставляет приоритеты в отношении файлов предоставленных атрибутом download.

Example:

Например тег <a> с атрибутом download. Примечание: Вам нужно запустить данный пример на протоколе (protocol) http:// (Или https://). Если вы запускаете данный пример напрямую на браузере по протоколу file:///, он может не работать (Чтобы проврить с браузерами Firefox, Chrome).

download-example.html

<!DOCTYPE html>
<html>
<head>
  <title>Hyperlink download attribute</title>
  <meta charset="UTF-8">
</head>
<body>
  <h3>Hyperlink download attribute</h3> 
  <a href="../../_testdatas_/flower.png" download="My-Flower.png">flower.png</a>
</body>
</html>

5. hreflang

Атрибут hreflang это подсказка, он дает знать человеческий язык (human language) источника связанных данных (linked resource).

<a href="/vi" hreflang="vi">Vietnamese</a>
<a href="/ru" hreflang="ru">Rusian</a> 
<a href="/" hreflang="en-us">English</a>

Атрибут hreflang полезен для инструментов поиска, таких как Google, Yandex,.. помогает им знать ресурс предоставленный тегом <a> пренадлежит какому языку.

Когда пользователь ищет документы в таких инструментах как в Google, Yandex,.. Эти инструменты будут знать IP адрес пользователя, таким образом, знает откуда пользователь и какой язык он использует. Основываясь на этих данных, инструменты дадут подходящий результат, включая языковой приоритет документа. Следовательно, это снижает показатель отказов (bounce rate) (Процент пользователей, получающих доступ к странице и сразу выходящих из нее по причине неуместности страницы).

6. type

Атрибут type это только подсказка, он дает знаить MIME Type у URL. Атрибут type имеется в некоторых тегах как в <a>, <object>, <source>,...

<a href="https://o7lanning.org" type="text/html">o7lanning</a>
<object width="400" height="400"
        data="helloworld.swf"
        type="application/vnd.adobe.flash-movie">
</object>

<audio controls>
    <source src="horse.ogg" type="audio/ogg">
    <source src="horse.mp3" type="audio/mpeg">
     Your browser does not support the audio element.
</audio>
<embed src="helloworld.swf" type="application/vnd.adobe.flash-movie">

7. ping

Атрибут ping является самым интересным у тега <a>, потому что не каждый знает о нем, даже программисты работающие с HTML много лет. Рассмотрим пример:

<a href="https://o7planning.org/10259/html" ping="https://example.com/trackpings">HTML</a>

Когда пользователь нажимает на гиперссылку выше, создается POST Request браузером и отправляется к https://example.com/trackpings. он совершенно невидим для пользователся и на самом деле силен, не может быть заблокирван даже когда пользователь отключает Javascript, так как Anchor ping не использует Javascript. Anchor ping является асинхронным (asynchronous) и не отменяется, даже если ссылка, которую пользователь только что щелкнул, не может загрузиться (load).

Вы можете предоставить много URL для атрибута ping, эти URL отделены пробелом.

<a href="https://o7planning.org/en/10259/html"
       ping="https://example.com/trackpings  https://abc.com/pings">HTML</a>

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

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

8. CSS Hyperlink

TODO