Что такое линк, и как он используется?

Атрибуты

Атрибут Значение Описание
charset char_encoding Не поддерживается в HTML5.Определяет кодировку, связанного документа.
crossorigin anonymoususe-credentials Атрибут определяет, используется ли CORS при загрузке.
У этого атрибута есть 2 допустимых значения:anonymous
В этом случае перед загрузкой выполняется кросс-доменный запрос (Origin: HTTP header), при этом не передаются параметры доступа (такие как: cookie, сертификат X.509, логин/пароль для базовой аутентификации по HTTP).
В ответе сервера должен присутствовать заголовок Access-Control-Allow-Origin: HTTP header.use-credentials
Перед загрузкой выполняется кросс-доменный запрос (Origin: HTTP header) с указанием параметров доступа (в виде — cookie, сертификата или пары логин/пароль). В ответе сервера должен присутствовать заголовок Access-Control-Allow-Origin: HTTP header.
Если данный атрибут не задан, то CORS при загрузке не используется (отcутствует заголовок Origin: HTTP header).
При неверном значении атрибута (содержится некорректное значение) используется значение anonymous.
href URL Определяет местоположение связанного документа.
hreflang language_code Определяет язык текста связанного документа.
media media_query Указывает, что файл адаптирован (оптимизирован) под определённые виды устройств. Атрибут может принимать несколько значений и используется, чтобы указать стиль для речевых или печатных устройств, для определенных моделей смартфонов и так далее.
rel alternatearchivesauthorbookmarkexternalfirsthelpiconlastlicensenextnofollownoreferrerpingbackprefetchprevsearchsidebarstylesheettagup Указывает отношение между текущим документом и связанным документом (на который ведёт ссылка).Обязательный атрибут.
rev reversed relationship Не поддерживается в HTML5.Указывает отношение между текущим документом и связанным документом (на который ведёт ссылка).
sizes Height x Widthany Определяет размер связанной иконки. Только для rel = «icon»).
target _blank_parent_self_topframename Не поддерживается в HTML5.Указывает, где будет загружен документ (окно/фрейм).
type media_type Указывает MIME-тип документа на который осуществляется переход.

target

L’attributo target serve per aprire il collegamento su un frame diverso da quello in cui si trova il link. Ovviamente questo attributo è adoperato solo in caso di un sito strutturato in frames, è utile specialmente per chi avendo un menu laterale voglia fare in modo che i links richiamati dal menu siano visualizzati sulla pagina principale. Per fare questo si dovrà specificarne il nome, quello che è stato assegnato al frame. Ipotizziamo di avere con nome home il frame principale, volendo fare in modo che il link venga aperto su quel frame questa la sintassi:

<a href=»http://www.web-link.it» target=»home»></a>

Nel caso in cui non esistesse un frame con nome home verrebbe aperta una nuova finestra del browser. 

Le altre possibili destinazioni sono:

_blank : Apri il collegamento su una nuova finestra._self : Apri il collegamento sulla finestra che ha generato il collegamento._parent : Apri il collegamento sul frame di origine o su quello corrente._top : Apri il collegamento al livello superiore.

Se avete domande potete scrivere sul forum di supporto, gratuito e aperto a tutti.

Jump Links

You can make your links «jump» to other sections within the same page (or another page). These used to be called «named anchors», but they’re often referred to as jump links, bookmarks, or fragment identifiers.

Here’s how to link to the same page:

  1. Add an ID to the Link Target

    Add an ID to the part of the page that you want the user to end up. To do this, use the attribute. The value should be some short descriptive text. The attribute is a commonly used attribute in HTML.

    <h2 id=»elephants»>Elephants</h2>

  2. Create the Hyperlink

    Now create the hyperlink (that the user will click on). This is done by using the of the link target, preceded by a hash () symbol:

    <a href=»#elephants»>Jump to Elephants</a>

So these two pieces of code are placed in different parts of the document. Something like this:

<!DOCTYPE html>
<html>
<title>Example</title>
<body>
<p><a href=»#elephants»>Jump to Elephants</a></p>

<h2>Cats</h2>
<p>All about cats.</p>

<h2>Dogs</h2>
<p>All about dogs.</p>

<h2>Birds</h2>
<p>All about birds.</p>

<h2 id=»elephants»>Elephants</h2>
<p>All about elephants.</p>

<h2>Monkeys</h2>
<p>All about monkeys.</p>

<h2>Snakes</h2>
<p>All about snakes.</p>

<h2>Rats</h2>
<p>All about rats.</p>

<h2>Fish</h2>
<p>All about fish.</p>

<h2>Buffalo</h2>
<p>All about buffalo.</p>
</body>
</html>

It doesn’t have to be the same page. You can use this method to jump to an ID of any page. To do this, simply add the destination URL before the hash () symbol. Example:

<a href=»http://www.example.com#elephants»>Jump to Elephants</a>

Of course, this assumes that there’s an ID with that value on the page.

Атрибуты¶

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

Также для этого элемента доступны универсальные атрибуты.

href

Путь к файлу, на который делается ссылка.

Синтаксис

Значения

В качестве значения принимается полный или относительный путь к файлу.

Значение по умолчанию

Нет.

media

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

Синтаксис

Значения

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

В HTML5 в качестве значений могут быть указаны медиа-запросы.

Значение по умолчанию

rel

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

Синтаксис

Значения

Альтернативный тип, используется, к примеру, для указания ссылки на файл в формате XML для описания ленты новостей, анонсов статей.
Указывает ссылку на автора текущего документа или статьи.
Указывает ссылку на контекстно-зависимую справку.
Адрес картинки, которая символизирует текущий документ или сайт.
Сообщает, что основное содержание текущего документа распространяется по лицензии, описанной в указанном документе.
Сообщает, что текущий документ является частью связанных между собой документов, а ссылка указывает на следующий документ.
Указывает на предварительно кэшированный ресурс текущей страницы или сайта целиком.
Сообщает, что текущий документ является частью связанных между собой документов, а ссылка указывает на предыдущий документ.
Указывает ссылку на ресурс, который применяется для поиска по документу или сайту.
Определяет, что подключаемый файл хранит таблицу стилей (CSS).

Значение по умолчанию

Нет.

sizes

Указывает размер иконок для визуального отображения. Сама иконка может применяться браузером для отображения в адресной строке, при сохранении в избранное, а также поисковыми системами для придания наглядности результатам поиска (именно так поступает Яндекс).

Синтаксис

Значения

Вначале указывается ширина иконки в пикселах без указания единиц (например, 16), затем пишется латинская буква x в верхнем (X) или нижнем регистре (x), после чего идёт высота иконки. Если в файле хранится сразу несколько иконок, можно задавать их размеры через пробел. Ключевое слово указывает, что иконка может масштабироваться в любой размер, к примеру, если она хранится в векторном формате SVG.

Значение по умолчанию

Нет.

type

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

Синтаксис

Значения

Имя MIME-типа в любом регистре. Для подключаемых таблиц связанных стилей применяется тип .

Значение по умолчанию

Attribute Values

Value Description
alternate Provides a link to an alternate version of the document (i.e. print page, translated or mirror).
Example: <link rel=»alternate» type=»application/atom+xml» title=»W3Schools News» href=»/blog/news/atom»>
author Provides a link to the author of the document
dns-prefetch Specifies that the browser should preemptively perform DNS resolution for the target resource’s origin
help Provides a link to a help document. Example: <link rel=»help» href=»/help/»>
icon Imports an icon to represent the document.Example: <link rel=»icon» href=»/favicon.ico» type=»image/x-icon»>
license Provides a link to copyright information for the document
next Provides a link to the next document in the series
pingback Provides the address of the pingback server that handles pingbacks to the current document
preconnect Specifies that the browser should preemptively connect to the target resource’s origin.
prefetch Specifies that the browser should preemptively fetch and cache the target resource as it is likely to be required for a follow-up navigation
preload Specifies that the browser agent must preemptively fetch and cache the target resource for current navigation according to the destination given by the «as» attribute (and the priority associated with that destination).
prerender Specifies that the browser should pre-render (load) the specified
webpage in the background
. So, if the user navigates to this page, it speeds
up the page load (because the page is already loaded). Warning!
This waste the user’s bandwidth! Only use prerender if it is absolutely sure
that the webpage is required at some point in the user journey
prev Indicates that the document is a part of a series, and that the previous document in the series is the referenced document
search Provides a link to a resource that can be used to search through the current document and its related pages.
stylesheet Imports a style sheet

❮ HTML <link> tag

Menus

Icon BarMenu IconAccordionTabsVertical TabsTab HeadersFull Page TabsHover TabsTop NavigationResponsive TopnavNavbar with IconsSearch MenuSearch BarFixed SidebarSide NavigationResponsive SidebarFullscreen NavigationOff-Canvas MenuHover Sidenav ButtonsSidebar with IconsHorizontal Scroll MenuVertical MenuBottom NavigationResponsive Bottom NavBottom Border Nav LinksRight Aligned Menu LinksCentered Menu LinkEqual Width Menu LinksFixed MenuSlide Down Bar on ScrollHide Navbar on ScrollShrink Navbar on ScrollSticky NavbarNavbar on ImageHover DropdownsClick DropdownsCascading DropdownDropdown in TopnavDropdown in SidenavResp Navbar DropdownSubnavigation MenuDropupMega MenuMobile MenuCurtain MenuCollapsed SidebarCollapsed SidepanelPaginationBreadcrumbsButton GroupVertical Button GroupSticky Social BarPill NavigationResponsive Header

HTML Link Syntax

Links are specified in HTML using the tag.

A link or hyperlink could be a word, group of words, or image.

<a href=»url«>Link text</a>

Anything between the opening tag and the closing tag becomes the part of the link that the user sees and clicks in a browser. Here are some examples of the links:

Example

Try this code

The attribute specifies the target of the link. Its value can be an absolute or relative URL.

An absolute URL is the URL that includes every part of the URL format, such as protocol, host name, and path of the document, e.g., , , etc. While, relative URLs are page-relative paths, e.g., , , and so on. A relative URL never includes the or prefix.

HTML Tags

<!—><!DOCTYPE><a><abbr><acronym><address><applet><area><article><aside><audio><b><base><basefont><bdi><bdo><big><blockquote><body><br><button><canvas><caption><center><cite><code><col><colgroup><data><datalist><dd><del><details><dfn><dialog><dir><div><dl><dt><em><embed><fieldset><figcaption><figure><font><footer><form><frame><frameset><h1> — <h6><head><header><hr><html><i><iframe><img><input><ins><kbd><label><legend><li><link><main><map><mark><meta><meter><nav><noframes><noscript><object><ol><optgroup><option><output><p><param><picture><pre><progress><q><rp><rt><ruby><s><samp><script><section><select><small><source><span><strike><strong><style><sub><summary><sup><svg><table><tbody><td><template><textarea><tfoot><th><thead><time><title><tr><track><tt><u><ul><var><video>

Ссылки и SEO

Начну с основ. Все мы знаем, что такое ссылки – это адреса, которые ведут с одной страницы на другую. Ссылки бывают внутренними – те, которые ведут на другие страницы этого же сайта – и внешними – они ведут на какой-то другой сайт.

Оптимизаторы часто упоминают такой термин как ссылочный вес. Это условное понятие, которое (образно говоря) характеризует авторитет страницы. Оно базируется на том, что чем больше страниц ссылается на эту конкретную страницу, тем более ценная информация (по мнению поисковых систем) на ней находится. Примерно год назад подсчитать этот «авторитет» страницы было легко – существовал такой инструмент как PageRank – однако весной 2016 года Toolbar PageRank был официально убран компанией Google, и теперь подсчитать ссылочный вес страницы сложнее. Ссылочный вес страницы продолжает играть роль при продвижении в поисковиках, но к нему прибавилось еще множество других факторов, поэтому называть его главным или основным уже нельзя.

Итак, ссылки – это один из хороших способов продвигать ваш сайт (и какую-то конкретную страницу). Но что делать, если это внешние ссылки, которые ведут на другой сайт?

Абсолютный URL-адрес

Абсолютный URL-адрес содержит обозначение протокола (http:// или https://), имя сайта (например, wm-school.ru), путь к файлу, а также имя файла (например, file.html). Между протоколом и именем сайта может идти префикс www:

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

В следующем примере показано создание абсолютной ссылки на сторонний веб­ресурс:

Пример HTML:

Попробуй сам

В данном примере ссылка вида <a href=»https://wm-school.ru»>Перейти на сайт wm-school</a> является абсолютной и ведет на главную страницу сайта wm-school.ru. Если при указании в качестве ссылки доменного имени не указано имя файла, тогда по умолчанию отображается индексный файл (как правило index.html).

Зачем использовать nofollow

Основные причины, почему вам следует использовать nofollow-ссылки на своем сайте:

  • чтобы избежать накрутки ссылочного веса авторами (если на сайте можно публиковать свои материалы) – даже если запись будет рекламная, при простановке nofollow сайт-источник не сможет получить никаких преимуществ для SEO;
  • чтобы уменьшить количество спама в комментариях (от спамеров, которые хотят продвинуть таким образом свой ресурс);
  • чтобы помечать ссылки с потенциально опасным контентом (если вы не уверены в качестве материала, на который ссылаетесь, и не хотите отдавать ему ссылочный вес); грубо говоря, для того, чтобы избежать ассоциаций с сайтом, на который вы по какой-то причине ссылаетесь, потому что ссылки на сомнительные сайты негативно влияют на репутацию вашего сайта.

Кстати, прочитав все это, вы можете задаться вопросом: а стоит ли вообще ставить обычные исходящие ссылки, без nofollow? В целом – да. Потому что (удивительно, но факт) они могут положительно влиять на продвижение вашего сайта в поисковых системах. Например, если вы будете ссылаться на трастовый сайт (Википедия и т.д.), то это поможет поднять и рейтинг вашего сайта.

External CSS

An external style sheet is used to define the style for many HTML pages.

To use an external style sheet, add a link to it in the section of each HTML page:

Example

<!DOCTYPE html><html><head>
  <link rel=»stylesheet» href=»styles.css»>
</head><body><h1>This is a heading</h1><p>This is a paragraph.</p></body></html>

The external style sheet can be written in any text editor. The file must not contain any
HTML code, and must be saved with a .css extension.

Here is what the «styles.css» file looks like:

«styles.css»:

body {  background-color: powderblue;}h1 {  color: blue;}p {  color: red;}

Tip: With an external style sheet, you can change the look of an entire web site, by changing one file!

Пример конфигурации: rel=alternate hreflang=x

Компания «Пример» запустила сайт предназначенный для пользователей из Германии, Швейцарии и России.

Под следующим URL находятся в основном одно и тоже содержание, но с некоторыми отличиями вытекающими из этого региона:

  • http://www.example.com/site.html – главная на немецком языке;
  • http://de-de.example.com/site.html – немецкая версия с ценами в евро;
  • http://de-ch.example.com/site.html – немецкая версия с ценами в швейцарских франках;
  • http://ru.example.com/stranica.html – сайт на русском языке.

Атрибуты rel=»alternate» hreflang=»x» работают на уровне страницы, а не всего сайта, поэтому вы должны соответствующим образом отмечать каждый набор страниц, включая главную страницу.

Обновите код HTML во всех URL, добавив группу элементов с атрибутами rel=»alternate» hreflang=»x» на каждой странице:

<link rel=»alternate» hreflang=»de» href=»http://www.example.com/site.html» />
<link rel=»alternate» hreflang=»de-de» href=»http://de-de.example.com/site.html» />
<link rel=»alternate» hreflang=»de-ch» href=»http://de-ch.example.com/site.html» />
<link rel=»alternate» hreflang=»ru» href=»http://ru.example.com/stranica.html» />

Это руководство для алгоритма Google, что все эти страницы надо рассматривать в качестве взаимозаменяемых версий.

Что такое rel=’shortlink’?

А почему я вдруг решил заговорить с вами об удалении ссылки rel=’shortlink’ из WordPress, о который вы, наверняка, даже никогда не слышали? Да все очень просто! Данная ссылка является альтернативным (запасным) URL-ом страницы в коде которой стоит. Ее можно использовать вместо обычных ЧПУ и будет открываться та же самая страничка.

Он формируется движком WordPress и располагается практически на каждой странице вашего сайта. Основная функция rel=’shortlink’ это создание универсальной ссылки на каждую страницу. Помимо того, что каждый раз при написании статьи вы создаете для нее ЧПУ (человекоподобный урл — адрес), движок параллельно с вами формирует ссылку shortlink, которая по сути работает как ЧПУ и перенаправляет на тот же пост. Найти ее можно во внутреннем коде между тегами «Head».

Внутренний код должен быть избавлен от всякого «мусора» и не нужных элементов, которые могут помешать поисковому роботу неправильно проиндексировать страницу или замедлить его работу. Одним из таких элементов может является rel=’shortlink’.

С одной стороны, Яндекс и Google относятся к ней совершенно спокойно. А с другой, ссылка rel=’shortlink’ является дублем страницы и вылазит в Яндекс Вебмастере в качестве загруженных, но заблокированных страниц. А дубли, как известно пагубно влияют на жизнь сайта. Прям, как сигареты. Вроде все нормально, а потом «бац» и опухоль.

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

Use of Base Path

When you link HTML documents related to the same website, it is not required to give a complete URL for every link. You can get rid of it if you use <base> tag in your HTML document header. This tag is used to give a base path for all the links. So your browser will concatenate given relative path to this base path and will make a complete URL.

Example

Following example makes use of <base> tag to specify base URL and later we can use relative path to all the links instead of giving complete URL for every link.

<!DOCTYPE html>
<html>

   <head>
      <title>Hyperlink Example</title>
      <base href = "https://www.tutorialspoint.com/">
   </head>
	
   <body>
      <p>Click following link</p>
      <a href = "/html/index.htm" target = "_blank">HTML Tutorial</a>
   </body>
	
</html>

This will produce the following result, where you can click on the link generated HTML Tutorial to reach to the HTML tutorial.

Now given URL <a href = «/html/index.htm» is being considered as <ahref = «http://www.tutorialspoint.com/html/index.htm»

HTML Reference

HTML by AlphabetHTML by CategoryHTML Browser SupportHTML AttributesHTML Global AttributesHTML EventsHTML ColorsHTML CanvasHTML Audio/VideoHTML Character SetsHTML DoctypesHTML URL EncodeHTML Language CodesHTML Country CodesHTTP MessagesHTTP MethodsPX to EM ConverterKeyboard Shortcuts

HTML Tags

<!—>
<!DOCTYPE>
<a>
<abbr>
<acronym>
<address>
<applet>
<area>
<article>
<aside>
<audio>
<b>
<base>
<basefont>
<bdi>
<bdo>
<big>
<blockquote>
<body>
<br>
<button>
<canvas>
<caption>
<center>
<cite>
<code>
<col>
<colgroup>
<data>
<datalist>
<dd>
<del>
<details>
<dfn>
<dialog>
<dir>
<div>
<dl>
<dt>
<em>
<embed>
<fieldset>
<figcaption>
<figure>
<font>
<footer>
<form>
<frame>
<frameset>
<h1> — <h6>
<head>
<header>
<hr>
<html>
<i>
<iframe>
<img>
<input>
<ins>
<kbd>
<label>
<legend>
<li>
<link>
<main>
<map>
<mark>
<meta>
<meter>
<nav>
<noframes>
<noscript>
<object>
<ol>
<optgroup>
<option>
<output>
<p>
<param>
<picture>
<pre>
<progress>
<q>
<rp>
<rt>
<ruby>
<s>
<samp>
<script>
<section>
<select>
<small>
<source>
<span>
<strike>
<strong>
<style>
<sub>
<summary>
<sup>
<svg>
<table>
<tbody>
<td>
<template>
<textarea>
<tfoot>
<th>
<thead>
<time>
<title>
<tr>
<track>
<tt>
<u>
<ul>
<var>
<video>
<wbr>

HTTP-запросы

Прежде чем приступать к оптимизации, освежим в памяти, как происходит типичный HTTP-запрос.

Джо хочет посетить какой-то веб-сайт.

  1. Он вспоминает его человекопонятный адрес, вводит в адресную строку браузера и нажимает .
  2. Браузер обращается к DNS-серверу, чтобы получить соответствующий адресу IP.
  3. Получив IP, браузер отправляет TCP-сообщение на сервер веб-сайта, запрашивая соединение.
  4. Если сервер нормально работает, он подтверждает запрос и отправляет браузеру сообщение, которое он в свою очередь подтверждает (вот такая light-версия TCP-рукопожатия).
  5. Когда все рукопожатия завершены, устанавливается соединение между клиентом (браузером) и сервером.
  6. Браузер переходит с TCP на HTTP и запрашивает веб-страницу, которую Джо терпеливо ждет перед монитором.
  7. Сервер передает браузеру запрошенную страницу.

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

Современный метод

Существует решение, созданное специально для асинхронной загрузки CSS файлов: rel=»preload». Но даже этот вариант использует обработчик события onload.

Ниже приведен использования rel=»preload»:

<link rel="preload" href="mystyles.css" as="style" onload="this.rel='stylesheet'">

Значение атрибута rel=»preload» заставляет браузеры (которые его поддерживают) загружать, но не применять указанный файл. Поэтому необходим обработчик события onload, чтобы установить атрибут rel в значение stylesheet после загрузки.

Вариант с rel=»preload» имеет одно важное преимущество: браузеры начнут загружать CSS раньше, чем при использовании подхода с несоответствующим значением атрибута media

Атрибуты HTML-элемента link

HREF

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

Пример

<link rel="stylesheet" href="../styles/default.css">

CROSSORIGIN

Указывает, должен ли запрос к внешнему серверу предоставлять учетные данные CORS или нет. Допустимы два значения (без учета регистра):

  • anonymous: CORS запросы к элементу будут содержать установленный флаг «omit credentials«;
  • use-credentials: CORS запросы к элементу не будут содержать установленный флаг «omit credentials«.

Пример

<link rel="icon" href="http://www.otherserver.com/icons/default.png" crossorigin="anonymous">

REL

Атрибут HTML link rel содержит разделенный пробелами список типов ссылок, указывающий, какое значение связанный ссылкой ресурс имеет для документа (содержащего ссылку).

Элемент link должен содержать либо атрибут rel, либо атрибут itemprop, но не оба сразу. Атрибут href также является обязательным.

Пример

<link rel="prev" href="article1.html"> 
<link rel="next" href="article3.html"> 
<link rel="license" href="copyright.html"> 
<link rel="alternate" href="spanish-version.html" hreflang="es">

MEDIA

Список медиа-запросов с указанием типов медиа (и их характеристик), для которых предназначен связанный ссылкой ресурс. Например, документ или ресурс может быть оптимизирован для печати (меньше цветов, изображений и фоновых тонов), под мобильные устройства или обычные экраны. Значение по умолчанию -«all«.

Пример

<link rel="alternate" href="printer-version.html" media="print">

HREFLANG

Этот HTML link tag указывает язык, который будет использоваться в связанном ссылкой ресурсе (указан в атрибуте HREF).

Пример

<link rel="alternate" hreflang="es" href="spanish-version.html">

TYPE

Тип контента (или Internet Media Type), который должен содержать связанный ресурс.

Пример

<link rel="icon" href="icon.png" type="image/png"> 
<link rel="next" href="article2.html" type="text/html">

SIZES

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

Этот атрибут тега link в HTML должен объявляться только, когда присутствует атрибут rel и он имеет значение «icon«. Иначе ситуации его использование является недействительным.

Пример

<link rel="icon" href="icon.ico" sizes="64x64 32x32 16x16"> <link rel="icon" href="icon.svg" sizes="any">

CHARSET

Кодировка символов целевого ресурса. Этот атрибут является устаревшим и в HTML5 уже не используется. Вместо него разработчикам рекомендуется использовать HTTP-заголовки Content-Type, чтобы предоставить информацию о наборах символов в документах и других ресурсах.

Пример

<link rel="next" href="article2.html" charset="utf-8">

REV

Значение текущего документа (содержащего ссылку) для связанного ссылкой ресурса.

Этот атрибут HTML link tag является устаревшим и в HTML5 уже не используется. Разработчикам рекомендуется заменить его атрибутом rel.

Пример

<link rev="index" href="article1.html"> 
<link rev="index" href="article2.html"> 
<link rev="index" href="article3.html">

Данная публикация является переводом статьи «LINK ELEMENT» , подготовленная редакцией проекта.

Attribute Values

Value Description
alternate Provides a link to an alternate version of the document (i.e. print page, translated or mirror).
Example: <link rel=»alternate» type=»application/atom+xml» title=»W3Schools News» href=»/blog/news/atom»>
author Provides a link to the author of the document
dns-prefetch Specifies that the browser should preemptively perform DNS resolution for the target resource’s origin
help Provides a link to a help document. Example: <link rel=»help» href=»/help/»>
icon Imports an icon to represent the document.Example: <link rel=»icon» href=»/favicon.ico» type=»image/x-icon»>
license Provides a link to copyright information for the document
next Provides a link to the next document in the series
pingback Provides the address of the pingback server that handles pingbacks to the current document
preconnect Specifies that the browser should preemptively connect to the target resource’s origin.
prefetch Specifies that the browser should preemptively fetch and cache the target resource as it is likely to be required for a follow-up navigation
preload Specifies that the browser agent must preemptively fetch and cache the target resource for current navigation according to the destination given by the «as» attribute (and the priority associated with that destination).
prerender Specifies that the browser should pre-render (load) the specified
webpage in the background. So, if the user navigates to this page, it speeds
up the page load (because the page is already loaded). Warning!
This waste the user’s bandwidth! Only use prerender if it is absolutely sure
that the webpage is required at some point in the user journey
prev Indicates that the document is a part of a series, and that the previous document in the series is the referenced document
search Provides a link to a resource that can be used to search through the current document and its related pages.
stylesheet Imports a style sheet

❮ HTML <link> tag

What is CSS?

Cascading Style Sheets (CSS) is used to format the layout of a webpage.

With CSS, you can control the color, font, the size of text, the spacing
between elements, how elements are positioned and laid out, what background
images or background colors are to be used, different displays for different devices
and screen sizes, and much more!

Tip: The word cascading means that a style
applied to a parent element will also apply to all children elements within the
parent. So, if you set the color of the body text to «blue», all headings,
paragraphs, and other text elements within the body will also get the same color (unless you specify
something else)!

#

Questo simbolo # (pound o cancelletto) seguito dal nome che è stato assegnato con l’attributo name permette di saltare nel punto esatto in cui l’etichetta è stata posizionata, si veda la spiegazione di name un paio di righe sopra. Vediamo un esempio pratico:

<a href=»#weblink»></a>

 per saltare all’etichetta WebLink definita qualche riga sopra con la descrizione dell’attributo name.

Si possono richiamare punti precisi presenti su altre pagine web, facendo precedere al nome dell’etichetta creata con name, il nome della pagina o l’intero percorso: <a href=»http://www.web-link.it/html/link.htm#weblink»></a>

http:// questo tipo di ancora è senza dubbio la più adoperata e serve per richiamare altre pagine usando l’indirizzo assoluto nel web. E’ sufficiente specificare l’intero percorso. Vediamo un esempio pratico:

<a href=»http://www.ilmioforum.com»>clicca qui</a> per accedere al forum di Web-Link.

clicca qui per accedere al forum di Web-Link.

The target Attribute

We have used target attribute in our previous example. This attribute is used to specify the location where linked document is opened. Following are the possible options −

Sr.No Option & Description
1

_blank

Opens the linked document in a new window or tab.

2

_self

Opens the linked document in the same frame.

3

_parent

Opens the linked document in the parent frame.

4

_top

Opens the linked document in the full body of the window.

5

targetframe

Opens the linked document in a named targetframe.

Example

Try following example to understand basic difference in few options given for target attribute.

<!DOCTYPE html>
<html>

   <head>
      <title>Hyperlink Example</title>
      <base href = "https://www.tutorialspoint.com/">
   </head>
	
   <body>
      <p>Click any of the following links</p>
      <a href = "/html/index.htm" target = "_blank">Opens in New</a> |
      <a href = "/html/index.htm" target = "_self">Opens in Self</a> |
      <a href = "/html/index.htm" target = "_parent">Opens in Parent</a> |
      <a href = "/html/index.htm" target = "_top">Opens in Body</a>
   </body>

</html>

This will produce the following result, where you can click on different links to understand the difference between various options given for target attribute.

More Examples

Example

This example demonstrates how to add other styles to hyperlinks:

a.one:link {color: #ff0000;}a.one:visited {color: #0000ff;}a.one:hover
{color: #ffcc00;}a.two:link {color: #ff0000;}a.two:visited {color:
#0000ff;}a.two:hover {font-size: 150%;}a.three:link {color:
#ff0000;}a.three:visited {color: #0000ff;}a.three:hover {background:
#66ff66;}a.four:link {color: #ff0000;}a.four:visited {color:
#0000ff;}a.four:hover {font-family: monospace;}a.five:link {color:
#ff0000; text-decoration: none;}a.five:visited {color: #0000ff;
text-decoration: none;}a.five:hover {text-decoration: underline;}

Example

Another example of how to create link boxes/buttons:

a:link, a:visited {  background-color: white;  color: black; 
border: 2px solid green;  padding: 10px 20px;  text-align:
center;  text-decoration: none;  display: inline-block;}a:hover, a:active
{  background-color: green;  color: white;}

Example

This example demonstrates the different types of cursors (can be useful for links):

<span style=»cursor: auto»>auto</span><br><span style=»cursor:
crosshair»>crosshair</span><br><span style=»cursor:
default»>default</span><br><span style=»cursor: e-resize»>e-resize</span><br>
<span style=»cursor: help»>help</span><br><span style=»cursor:
move»>move</span><br><span style=»cursor: n-resize»>n-resize</span><br>
<span style=»cursor: ne-resize»>ne-resize</span><br><span style=»cursor:
nw-resize»>nw-resize</span><br><span style=»cursor:
pointer»>pointer</span><br><span style=»cursor: progress»>progress</span><br>
<span style=»cursor: s-resize»>s-resize</span><br><span style=»cursor:
se-resize»>se-resize</span><br><span style=»cursor: sw-resize»>sw-resize</span><br>
<span style=»cursor: text»>text</span><br><span style=»cursor:
w-resize»>w-resize</span><br><span style=»cursor: wait»>wait</span>

❮ Previous
Next ❯

Images

SlideshowSlideshow GalleryModal ImagesLightboxResponsive Image GridImage GridTab GalleryImage Overlay FadeImage Overlay SlideImage Overlay ZoomImage Overlay TitleImage Overlay IconImage EffectsBlack and White ImageImage TextImage Text BlocksTransparent Image TextFull Page ImageForm on ImageHero ImageBlur Background ImageChange Bg on ScrollSide-by-Side ImagesRounded ImagesAvatar ImagesResponsive ImagesCenter ImagesThumbnailsBorder Around ImageMeet the TeamSticky ImageFlip an ImageShake an ImagePortfolio GalleryPortfolio with FilteringImage ZoomImage Magnifier GlassImage Comparison Slider

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Adblock
detector