Тег link

Атрибуты

Атрибут Значение Описание
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-тип документа на который осуществляется переход.

Помогают ли nofollow-ссылки в SEO?

Напомним, Google не передаёт PR и не учитывает анкорный текст таких ссылок. Всё, казалось бы, ясно, но есть пометка «In general, we don’t follow them», то есть «в целом, мы не переходим по ним». И это «в целом» вносит некоторую неопределённость. Возможно, в некоторых случаях поисковый робот всё-таки по ним переходит.

Есть специалисты, которые уверяют, что часть PageRank передаётся и по nofollow-ссылкам. Другие говорят, что только по некоторым из них. Третьи, возможно, самые разумные, считают, что мы слишком много внимания уделяем старым формулировкам.

Ранее Ahrefs изучили 44,589 результатов поисковой выдачи, чтобы выяснить, существует ли какая-то корреляция между ранжированием и наличием/отсутствием атрибута rel=”nofollow”. Вот, что у них получилось:

Здесь нас интересует два значения: «number of backlinks» (общее количество внешних ссылок) и «number of “dofollow” backlinks» (количество ссылок без атрибута nofollow).

Корреляция для вторых немного слабее, чем в случае общего количества бэклинков. Тим из Ahrefs считает, что это может указывать на то, что Google придаёт больше ценности nofollow-ссылкам с «сильных» страниц, чем dofollow-ссылкам со слабых. Кто знает?

Но даже если предположить, что нет никакого прямого влияния на SEO, то косвенное точно имеет место:

1. Nofollow-ссылки помогают разнообразить ваш ссылочный профиль, делая его более естественным. Кроме того, множество ссылок на ваш сайт, наверняка, именно с этим атрибутом:

  • Социальные сети (Facebook, VK, Twitter и так далее).

  • Форумы.

  • Пресс-релизы.

  • Wikipedia.

  • Каталоги и справочники.

Короче говоря, если бы ссылочный профиль состоял только из dofollow-ссылок, это было бы подозрительно для поисковых систем. Очень примерная норма — это от 60% до 90%.

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

3. Nofollow защищают от санкций. Иногда покупка ссылок имеет смысл

Если у сайта-донора тонны трафика, то это довольно простой способ обратить внимание на свой сайт

SEO-лагерь снова разделился:

  1. Те, кто считает, что Google может идентифицировать купленные ссылки алгоритмически.

  2. Те, кто считает, что точно не может.

Дебаты не утихают, но важно другое — у Google есть инструмент, который позволяет пожаловаться на какой-либо сайт за продажу или покупку ссылок

И, вполне возможно, вам следует опасаться не санкций Google, а недобросовестных конкурентов.

Использование атрибута rel=alternate hreflang=x

Допустим, что у вас есть русскоязычная страница http://www.example.com/ и её испанская версия http://es.example.com Одним из двух способов вы можете сообщить Google, что под другим URL находится испаноязычный аналог русской версии сайта:

  • Элемент HTML link – в разделе HTML <head> по адресу http://www.example.com/ поместите элемент ссылку на испанскую версию этого сайта (http://es.example.com/): <link rel=»alternate» hreflang=»es» href=»http://es.example.com/» />
  • HTTP заголовок – при публикации файлов в формате, отличном от HTML (например, PDF), вы можете указать другую языковую версию URL с помощью HTTP-заголовка: Ссылка: <http://es.example.com/>; rel=»alternate»; hreflang=»es»

Если у вас есть несколько языковых версий URL, в каждой вы должны использовать атрибут rel=»alternate» hreflang=»x» для указания других.

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

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 wastes the user’s bandwidth! Only use prerender if you are absolutely sure
that the webpage is required at some point in the user’s 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

12.4 Path information: the BASE element

<!ELEMENT  - O EMPTY               -- document base URI -->
<!ATTLIST BASE
                    #REQUIRED -- URI that acts as base URI --
  >

Start tag: required, End tag:
forbidden

Attribute definitions

href =
This attribute specifies an absolute URI that acts as the base URI for
resolving relative URIs.

Attributes defined elsewhere

target (target
frame information)

In HTML, links and references to external images, applets, form-processing
programs, style sheets, etc. are always specified by a URI. Relative URIs are
according to a base URI, which
may come from a variety of sources. The element allows authors to specify a document’s base URI explicitly.

When present, the element must appear in the
section of an HTML document, before any element that refers to an external
source. The path information specified by the element only affects URIs in
the document where the element appears.

For example, given the following declaration and
declaration:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
 <HEAD>
   <TITLE>Our Products</TITLE>
   <BASE href="http://www.aviary.com/products/intro.html">
 </HEAD>

 <BODY>
   <P>Have you seen our <A href="../cages/birds.gif">Bird Cages</A>?
 </BODY>
</HTML>

the relative URI «../cages/birds.gif» would resolve to:

http://www.aviary.com/cages/birds.gif

12.4.1 Resolving relative URIs

User agents must calculate the base URI for resolving relative URIs
according to , section 3. The following describes how applies specifically to HTML.

User agents must calculate the base URI according to the following
precedences (highest priority to lowest):

  1. The base URI is set by the element.
  2. The base URI is given by meta data discovered during a protocol
    interaction, such as an HTTP header (see ).
  3. By default, the base URI is that of the current document. Not all HTML
    documents have a base URI (e.g., a valid HTML document may appear in an email
    and may not be designated by a URI). Such HTML documents are considered
    erroneous if they contain relative URIs and rely on a default base URI.

Additionally, the and elements define attributes that
take precedence over the value set by the element. Please consult the
definitions of these elements for more information about URI issues specific to
them.

Note. For versions of HTTP that define a Link header,
user agents should handle these headers exactly as
elements in the document. HTTP 1.1 as defined by does not
include a Link header field (refer to section 19.6.3).

previous   next
    elements   attributes  
index

Использование rel=preload c loadCSS

Поддержка rel=»preload» браузерами, ну… спасибо, что хотя бы Google Chrome его поддерживает. Другие популярные браузеры находятся на пути к этому.

Но мы можем обеспечить поддержку rel = ‘preload’ с помощью полифиллов.  Проект loadCSS предлагает скрипт cssrelpreload.js, который заставляет rel=»preload» работать в браузерах, которые не поддерживают его по умолчанию.

Пошаговое руководство по использованию cssrelpreload.js можно найти в readme проекта. Ниже приведен пример применения скрипта:

<link rel="preload" href="mystyles.css" as="style" onload="this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="path/to/mystylesheet.css"></noscript>
<script>
/*! loadCSS rel=preload polyfill. 2017 Filament Group, Inc. MIT License */ (function(){ ... }());
</script>

loadCSS можно найти на Github и NPM.

Пожалуйста, оставьте свои отзывы по текущей теме материала. За комментарии, подписки, дизлайки, отклики, лайки низкий вам поклон!

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>

Styling Links with CSS

Links or hyperlinks are an essential part of a website. It allows visitors to navigate through the site. Therefore styling the links properly is an important aspect of building a user-friendly website.

See the tutorial on HTML links to learn more about links and how to create them.

A link has four different states — , , and . These four states of a link can be styled differently through using the following anchor pseudo-class selectors.

  • a:link — define styles for normal or unvisited links.
  • a:visited — define styles for links that the user has already visited.
  • a:hover — define styles for a link when the user place the mouse pointer over it.
  • a:active — define styles for links when they are being clicked.

You can specify any CSS property you’d like e.g. , , , , etc. to each of these selectors to customize the style of links, just like you do with the normal text.

Example

Try this code

The order in which you are setting the style for different states of links is important, because what defines last takes precedence over the style rules defined earlier.

Note: In general, the order of the pseudo classes should be the following — , , , , in order for these to work properly.

Создание ссылки на определенную позицию страницы

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

Шаг 1: Создание закладки на странице

Закладка на определенном фрагменте страницы устанавливается с помощью атрибута id. На профессиональном языке веб-разработчиков его называют идентификатор фрагмента. Значение атрибута id должно начинаться с латинской буквы или знака подчеркивания (недопустимо начало с цифры или любого другого символа). Кроме того, на одной веб-странице несколько отмеченных закладками элементов не могут иметь одинаковое значение атрибута id. Предположим, что вы хотите отправить читателя к заголовку 2-го уровня на нашей веб-странице. Присвоим заголовку уникальное имя (в данном случае имя: absolut).

Наша закладка будет выглядеть следующим образом:

По сути вы создали закладку, зафиксированную на заголовке «Абсолютный URL-адрес».

Шаг 2: Создание ссылки на закладку

Для создания ссылки на элемент с установленным значением атрибута id понадобится элемент <a>, значение атрибута href которого должно начинаться с хеш-символа (#), после которого нужно указать значение атрибута id отмеченного элемента. Далее создадим ссылку, отправляющую читателя к закладке с именем absolut на текущей странице:

Данная ссылка ссылается на элемент <h2>, находящийся в другой части веб-страницы, атрибуту id которого присвоено значение absolut. Решетка (#) перед именем необходима для обозначения того, что это фрагмент, а не имя файла.

12.3 Document relationships: the LINK element

<!ELEMENT  - O EMPTY               -- a media-independent link -->
<!ATTLIST LINK
                                -- , ,  --
             #IMPLIED  -- char encoding of linked resource --
                    #IMPLIED  -- URI for linked resource --
       #IMPLIED  -- language code --
            #IMPLIED  -- advisory content type --
               #IMPLIED  -- forward link types --
               #IMPLIED  -- reverse link types --
             #IMPLIED  -- for rendering on these media --
  >

Start tag: required, End tag:
forbidden

Attributes defined elsewhere

  • , ()
  • (), ()
  • ()
  • ( )
  • , , , , , , , , , ( )
  • , , , , ()
  • ()
  • ()
  • ()

This element defines a link. Unlike , it may only appear in the
section of a document, although it may appear any number of times. Although
has no content, it conveys relationship information that may be rendered by
user agents in a variety of ways (e.g., a tool-bar with a drop-down menu of
links).

This example illustrates how several definitions may appear in the
section of a document. The current document is «Chapter2.html». The
attribute specifies the relationship of the linked document with the current
document. The values «Index», «Next», and «Prev» are explained in the section
on .

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
  <TITLE>Chapter 2</TITLE>
  <LINK rel="Index" href="../index.html">
  <LINK rel="Next"  href="Chapter3.html">
  <LINK rel="Prev"  href="Chapter1.html">
</HEAD>
...the rest of the document...

12.3.1 Forward and reverse links

The and attributes play complementary roles — the
attribute specifies a forward link and the attribute specifies a reverse
link.

Consider two documents A and B.

Document A:       <LINK href="docB" rel="foo">

Has exactly the same meaning as:

Document B:       <LINK href="docA" rev="foo">

Both attributes may be specified simultaneously.

12.3.2 Links and external style sheets

When the element links an external style sheet to a document, the attribute specifies the style sheet language and the attribute specifies the intended rendering medium or media.
User agents may save time by retrieving from the network only those style
sheets that apply to the current device.

are further
discussed in the section on style sheets.

12.3.3 Links and search engines

Authors may use the element to provide a variety of information to
search engines, including:

  • Links to alternate versions of a document, written in another human
    language.
  • Links to alternate versions of a document, designed for different media,
    for instance a version especially suited for printing.
  • Links to the starting page of a collection of documents.

The examples below illustrate how language information, media types, and
link types may be combined to improve document handling by search engines.

In the following example, we use the attribute to tell search
engines where to find Dutch, Portuguese, and Arabic versions of a document.
Note the use of the attribute for the Arabic manual. Note also the
use of the attribute to indicate that the value of the
attribute for the element designating the French manual is in French.

<HEAD>
<TITLE>The manual in English</TITLE>
<LINK title="The manual in Dutch"
      type="text/html"
      rel="alternate"
      hreflang="nl" 
      href="http://someplace.com/manual/dutch.html">
<LINK title="The manual in Portuguese"
      type="text/html"
      rel="alternate"
      hreflang="pt" 
      href="http://someplace.com/manual/portuguese.html">
<LINK title="The manual in Arabic"
      type="text/html"
      rel="alternate"
      charset="utf-8"
      hreflang="ar" 
      href="http://someplace.com/manual/arabic.html">
<LINK lang="fr" title="La documentation en Fran&ccedil;ais"
      type="text/html"
      rel="alternate"
      hreflang="fr"
      href="http://someplace.com/manual/french.html">
</HEAD>

In the following example, we tell search engines where to find the printed
version of a manual.

<HEAD>
<TITLE>Reference manual</TITLE>
<LINK media="print" title="The manual in postscript"
      type="application/postscript"
      rel="alternate"
      href="http://someplace.com/manual/postscript.ps">
</HEAD>

In the following example, we tell search engines where to find the front
page of a collection of documents.

<HEAD>
<TITLE>Reference manual -- Page 5</TITLE>
<LINK rel="Start" title="The first page of the manual"
      type="text/html"
      href="http://someplace.com/manual/start.html">
</HEAD>

Further information is given in the notes in the appendix on .

Setting Link Colors

You can set colors of your links, active links and visited links using link, alink and vlink attributes of <body> tag.

Example

Save the following in test.htm and open it in any web browser to see how link, alink and vlink attributes work.

<!DOCTYPE html>
<html>
   
   <head>
      <title>Hyperlink Example</title>
      <base href = "https://www.tutorialspoint.com/">
   </head>
	
   <body alink = "#54A250" link = "#040404" vlink = "#F40633">
      <p>Click following link</p>
      <a href = "/html/index.htm" target = "_blank" >HTML Tutorial</a>
   </body>
   
</html>

This will produce the following result. Just check color of the link before clicking on it, next check its color when you activate it and when the link has been visited.

HTML Теги

<!—><!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><menu><menuitem><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>

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>

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»

Атрибуты

= Новый в HTML5.

Атрибут Значение Описание
charset char_encoding Не поддерживается в HTML5.Задает кодировку символов связанного документа
crossorigin anonymoususe-credentials Указывает, как элемент обрабатывает запросы перекрестного происхождения
href URL Указывает расположение связанного документа
hreflang language_code Указывает язык текста в связанном документе
media media_query Указывает, на каком устройстве будет отображаться связанный документ
rel alternate
author
dns-prefetchhelp
icon
license
next
pingbackpreconnect
prefetchpreloadprerender
prev
search
stylesheet
Обязательно. Указывает связь между текущим документом и связанным документом
rev reversed relationship Не поддерживается в HTML5.Указывает связь между связанным документом и текущим документом
sizes HeightxWidthany Задает размер связанного ресурса. Только для rel=»icon»
target _blank
_self
_top
_parentframe_name
Не поддерживается в HTML5.Указывает, где должен быть загружен связанный документ
type media_type Указывает тип носителя связанного документа
Добавить комментарий

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

Adblock
detector