Creating hyperlinks

Attributes

Attribute	Value	Description
crossorigin	anonymoususe-credentials	Specifies how the element handles cross-origin requests
href	URL	Specifies the location of the linked document
hreflang	language_code	Specifies the language of the text in the linked document
media	media_query	Specifies on what device the linked document will be displayed
referrerpolicy	no-referrerno-referrer-when-downgradeorigin origin-when-cross-originunsafe-url	Specifies which referrer to use when fetching the resource
rel	alternate author dns-prefetchhelp icon license next pingbackpreconnect prefetchpreloadprerender prev search stylesheet	Required. Specifies the relationship between the current document and the linked document
sizes	HeightxWidthany	Specifies the size of the linked resource. Only for rel=»icon»
title		Defines a preferred or an alternate stylesheet
type	media_type	Specifies the media type of the linked document

CSS Advanced

CSS Rounded CornersCSS Border ImagesCSS BackgroundsCSS ColorsCSS Color KeywordsCSS Gradients
Linear Gradients
Radial Gradients

CSS Shadows
Shadow Effects
Box Shadow

CSS Text EffectsCSS Web FontsCSS 2D TransformsCSS 3D TransformsCSS TransitionsCSS AnimationsCSS TooltipsCSS Style ImagesCSS Image ReflectionCSS object-fitCSS object-positionCSS ButtonsCSS PaginationCSS Multiple ColumnsCSS User InterfaceCSS Variables
The var() Function
Overriding Variables
Variables and JavaScript
Variables in Media Queries

CSS Box SizingCSS Media QueriesCSS MQ ExamplesCSS Flexbox
CSS Flexbox
CSS Flex Container
CSS Flex Items
CSS Flex Responsive

Способы асинхронной загрузки CSS

Существует несколько способов заставить браузер загружать CSS асинхронно.

Первый способ (работает в современных браузерах) заключается в использовании JavaScript для создания и вставки ссылки на файл CSS в DOM:

// Создаем ссылку на таблицу стилей
var myCSS = document.createElement( "link" );
myCSS.rel = "stylesheet";
myCSS.href = "mystyles.css";
// вставляем ее в конце блока head
document.head.insertBefore( myCSS, document.head.childNodes.nextSibling );

Второй способ заключается в том, чтобы задать  атрибуту media в теге link значение, которое не соответствует устройству пользователя. Например, media=»print».

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

Но чтобы задействовать асинхронно загруженные стили, нужно использовать JavaScript-обработчик события onload. Это позволит изменить значение media на соответствующее браузеру и устройству пользователя. Например, screen или all:

<link rel="stylesheet" href="mystyles.css" media="nope!" onload="this.media='all'">

Примечание: мы используем комбинацию перечисленных выше приемов в библиотеке loadCSS.js, предназначенной для обработки асинхронной загрузки CSS. А также обходные пути для устаревших версий браузеров, которые не поддерживают события onload в элементах link.

Также можно загружать CSS асинхронно, используя значение rel=»alternate stylesheet». Оно используется для того, чтобы предложить пользователю альтернативное представление сайта:

<link rel="alternate stylesheet" href="mystyles.css" onload="this.rel='stylesheet'">

Методы, описанные выше, работают. Но у них есть один общий недостаток: они используют JavaScript.

Styling Links

Links can be styled with any CSS property (e.g. , ,
, etc.).

Example

a {  color: hotpink;}

In addition, links can be styled
differently depending on what state they are in.

The four links states are:

• — a normal, unvisited link
• — a link the user has visited
• — a link when the user mouses over it
• — a link the moment it is clicked

Example

/* unvisited link */a:link {  color: red;}/* visited
link */a:visited {  color: green;}/* mouse over link */
a:hover {  color: hotpink;}/* selected link */a:active {
 
color: blue;}

When setting the style for several link states, there are some order rules:

• a:hover MUST come after a:link and a:visited
• a:active MUST come after a:hover

Пример конфигурации: 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, что все эти страницы надо рассматривать в качестве взаимозаменяемых версий.

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>

Атрибуты

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

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

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.

Setting the Targets for Links

The attribute tells the browser where to open the linked document. There are four defined targets, and each target name starts with an underscore() character:

• — Opens the linked document in a new window or tab.
• — Opens the linked document in the parent window.
• — Opens the linked document in the same window or tab as the source document. This is the default, hence it is not necessary to explicitly specify this value.
• — Opens the linked document in the full browser window.

Try out the following example to understand how the link’s target basically works:

Example

Try this code

Tip: If your web page is placed inside an iframe, you can use the on the links to break out of the iframe and show the target page in full browser window.

CSS Tutorial

CSS HOMECSS IntroductionCSS SyntaxCSS SelectorsCSS How ToCSS CommentsCSS Colors
Colors
RGB
HEX
HSL

CSS Backgrounds
Background Color
Background Image
Background Repeat
Background Attachment
Background Shorthand

CSS Borders
Borders
Border Width
Border Color
Border Sides
Border Shorthand
Rounded Borders

CSS Margins
Margins
Margin Collapse

CSS PaddingCSS Height/WidthCSS Box ModelCSS Outline
Outline
Outline Width
Outline Color
Outline Shorthand
Outline Offset

CSS Text
Text Color
Text Alignment
Text Decoration
Text Transformation
Text Spacing
Text Shadow

CSS Fonts
Font Family
Font Web Safe
Font Fallbacks
Font Style
Font Size
Font Google
Font Pairings
Font Shorthand

CSS IconsCSS LinksCSS ListsCSS Tables
Table Borders
Table Size
Table Alignment
Table Style
Table Responsive

CSS DisplayCSS Max-widthCSS PositionCSS OverflowCSS Float
Float
Clear
Float Examples

CSS Inline-blockCSS AlignCSS CombinatorsCSS Pseudo-classCSS Pseudo-elementCSS OpacityCSS Navigation Bar
Navbar
Vertical Navbar
Horizontal Navbar

CSS DropdownsCSS Image GalleryCSS Image SpritesCSS Attr SelectorsCSS FormsCSS CountersCSS Website LayoutCSS UnitsCSS SpecificityCSS !important

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>

CSS Advanced

CSS Rounded CornersCSS Border ImagesCSS BackgroundsCSS ColorsCSS Color KeywordsCSS Gradients
Linear Gradients
Radial Gradients

CSS Shadows
Shadow Effects
Box Shadow

CSS Text EffectsCSS Web FontsCSS 2D TransformsCSS 3D TransformsCSS TransitionsCSS AnimationsCSS TooltipsCSS Style ImagesCSS Image ReflectionCSS object-fitCSS object-positionCSS ButtonsCSS PaginationCSS Multiple ColumnsCSS User InterfaceCSS Variables
The var() Function
Overriding Variables
Variables and JavaScript
Variables in Media Queries

CSS Box SizingCSS Media QueriesCSS MQ ExamplesCSS Flexbox
CSS Flexbox
CSS Flex Container
CSS Flex Items
CSS Flex Responsive

CSS Tutorial

CSS HOMECSS IntroductionCSS SyntaxCSS SelectorsCSS How ToCSS CommentsCSS Colors
Colors
RGB
HEX
HSL

CSS Backgrounds
Background Color
Background Image
Background Repeat
Background Attachment
Background Shorthand

CSS Borders
Borders
Border Width
Border Color
Border Sides
Border Shorthand
Rounded Borders

CSS Margins
Margins
Margin Collapse

CSS PaddingCSS Height/WidthCSS Box ModelCSS Outline
Outline
Outline Width
Outline Color
Outline Shorthand
Outline Offset

CSS Text
Text Color
Text Alignment
Text Decoration
Text Transformation
Text Spacing
Text Shadow

CSS Fonts
Font Family
Font Web Safe
Font Fallbacks
Font Style
Font Size
Font Google
Font Pairings
Font Shorthand

CSS IconsCSS LinksCSS ListsCSS Tables
Table Borders
Table Size
Table Alignment
Table Style
Table Responsive

CSS DisplayCSS Max-widthCSS PositionCSS OverflowCSS Float
Float
Clear
Float Examples

CSS Inline-blockCSS AlignCSS CombinatorsCSS Pseudo-classCSS Pseudo-elementCSS OpacityCSS Navigation Bar
Navbar
Vertical Navbar
Horizontal Navbar

CSS DropdownsCSS Image GalleryCSS Image SpritesCSS Attr SelectorsCSS FormsCSS CountersCSS Website LayoutCSS UnitsCSS SpecificityCSS !important

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

У HTML-тега есть атрибут – сокращение от relationship. Он определяет, в каком отношении находится открытый документ и страница, на которую указывает ссылка.

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

Нас же интересуют сейчас 4 значения:

• ,
• ,
• ,
• .

Все вместе они называются . Посмотрим, зачем они нужны и как с ними работать.

DNS Prefetch

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

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

<link rel=»dns-prefetch» href=»//othersite.org»>

1 2 3

<link rel=»dns-prefetch»href=»//othersite.org»>

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

Теперь, если юзер нажмет на ссылку, браузер сразу же приступает к установке TCP-соединения, минуя обращение к DNS-серверу.

Preconnect

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

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

<link rel= «preconnect» href= «//othersite.com»>

1 2 3

<link rel=»preconnect»href=»//othersite.com»>

Prefetch

Если для ресурса указано отношение , браузер обращается к DNS-серверу за его доменным именем, выполняет TCP-соединение, делает HTTP-запрос и, наконец, извлекает и сохраняет ресурс в кэше. И все это в фоне, без явных действий пользователя.

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

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

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

<link rel=»prefetch» href=»//site.com/nextimage.jpg»>

1 2 3

<link rel=»prefetch»href=»//site.com/nextimage.jpg»>

Prerender

Значение можно использовать только для HTML-страниц. Они будут полностью отрендерены в offline-режиме, а как только пользователь захочет перейти на них – сразу же показаны.

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

Не злоупотребляйте этой мощной возможностью.

<link rel=»prerender» href=»//site.com/about.html»>

1 2 3

<link rel=»prerender»href=»//site.com/about.html»>

Client-Side Image Maps

Client side image maps are enabled by the usemap attribute of the <img /> tag and defined by special <map> and <area> extension tags.

The image that is going to form the map is inserted into the page using the <img /> tag as a normal image, except it carries an extra attribute called usemap. The value of the usemap attribute is the value which will be used in a <map> tag to link map and image tags. The <map> along with <area> tags define all the image coordinates and corresponding links.

The <area> tag inside the map tag, specifies the shape and the coordinates to define the boundaries of each clickable hotspot available on the image. Here’s an example from the image map −

<!DOCTYPE html>
<html>

   <head>
      <title>USEMAP Hyperlink Example</title>
   </head>
	
   <body>
      <p>Search and click the hotspot</p>
      <img src = /images/html.gif alt = "HTML Map" border = "0" usemap = "#html"/>
      <!-- Create  Mappings -->
      
      <map name = "html">
         <area shape = "circle" coords = "80,80,20" 
            href = "/css/index.htm" alt = "CSS Link" target = "_self" />
         
         <area shape = "rect" coords = "5,5,40,40" alt = "jQuery Link" 
            href = "/jquery/index.htm" target = "_self" />
      </map>
   </body>
   
</html>

This will produce the following result −

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»

HTTP-запросы

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

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

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

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

Какими бывают состояния ссылок

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

• — ссылка, на которую наведен курсор;
• — активная ссылка (та, по которой совершается клик, или на которой удерживается кнопка мыши);
• — ссылка, еще не посещенная пользователем;
• — посещенная ссылка.

Для справки: из соображений безопасности набор стилей, которые можно использовать для ссылок , ограничен. Посещенные ссылки принимают только свойства , , (и его производные), , . При этом свойство к посещенной ссылке можно применить, только если это же свойство задано и для обычной. Прозрачность цвета, установленная через альфа-канал для элемента , будет проигнорирована. JavaScript-метод getComputedStyle всегда возвращает значение цвета непосещенных ссылок, даже если у посещенных ссылок цвет иной.

Стилизация состояний

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

a { color: red; } /* обычный цвет ссылки */
a:hover { color: blue; } /* цвет ссылки, на которую наведен курсор */

Псевдокласс также поддается гибкой стилизации:

a:active { background-color: yellow; } /* цвет фона ссылки в момент нажатия на нее */

Если в ваши планы входит максимально детальная проработка дизайна ссылок, то желательно определить стили для всех четырех состояний

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

a:link { color: red; }
a:visited { color: grey; }
a:hover { color: blue; }
a:active { background-color: yellow; }

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

Выбор ссылок с помощью селекторов

Как записать селектор с псевдоклассом для определенной группы ссылок? Например, если вам нужно применить какой-то стиль для всех ссылок навигационного меню с идентификатором , когда такая ссылка находится в состоянии наведенного на нее курсора, вы можете использовать такой селектор:

#main-menu a:hover {background-color: #a38beb;}

Либо, если у каждой ссылки этого меню дополнительно имеется свой класс (допустим, это ), то такая запись тоже подойдет:

#main-menu a.menu-link:hover {background-color: #a38beb;}
#main-menu .menu-link:hover {background-color: #a38beb;} /* так тоже сработает */

Чтобы определить стили для всех состояний данных ссылок, запишите для каждого псевдокласса отдельное правило:

#main-menu .menu-link:link { color: red; }
#main-menu .menu-link:visited { color: grey; }
#main-menu .menu-link:hover { background-color: #a38beb; }
#main-menu .menu-link:active { background-color: yellow; }

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

Когда нужно прописывать канонический тег

Используйте canonical, когда одинаковый контент доступен по разным URL. Когда дублирующиеся URL создаются системой, фактически сам контент не дублируется — разные URL обслуживают одно содержимое. Тем не менее, это дубли, канонический тег стоит указать. Разберем разные случаи.

Дублирование страниц

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

Другой вариант — страница товара подходит сразу под несколько категорий, так что образовываются множественные URL одного предмета. Решение такое же: выбрать популярную в качестве основной и указать ее на остальных дублирующих страницах в rel = «canonical».

Страницы пагинации

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

Пагинация на сайте www.petshop.ru

Вариант 1

Если на странице есть «Показать все», страница со всеми вариантами и будет канонической. На каждой из страниц пагинации укажите ее в атрибуте rel = «canonical».

Например, для страницы https://site.ru/category1/page-2 нужно прописать канонический URL:

Вариант 2

Если «Показать все» нет, для каждой страницы пагинации советуют указывать эти же страницы как канонические.

Например, на странице https://site.ru/category1/page2 нужно указать каноническую ссылку:

Вариант 3

Есть и другое мнение: если указать canonical страницы саму на себя, все страницы пагинации пойдут в выдачу. Если вы считаете, что плохо, если у разных URL с отличающимся контентом будут одинаковые Title и Description, то не делайте так.

В таком случае не нужно проставлять canonical, а лучше закрыть страницы пагинации в noindex, follow и использовать dissalow в robots для /page. Это значит, что индексировать нельзя, а переходить по ссылкам можно.

Напомним, что noindex подходит только для Яндекса.

HTTPS, HTTP, www

Один сайт может быть доступен по трем вариантам: http://site.ru и http://www.site.ru и https://www.site.ru. Но поисковые системы будут рассматривать все три как наборы отдельных страниц, если не указать canonical. Из-за чего могут быть проблемы со сканированием и индексацией сайта.

Мобильный URL

Google уже давно переходит на Mobile-First Indexing, то есть при индексировании он ориентируется на мобильную версию сайта.

Представитель Google Джон Мюллер рассказал, что делать с каноническим тегом в этих условиях.

Если у вас есть мобильная версия сайта m.site.ru, обычно у нее указывают rel = «canonical», ведущий на десктопную. А для десктопной используют тег rel=alternate, ведущий на мобильную. Если вы сделали так, ничего менять не надо. Бот распознает мобильную версию как каноническую, даже если в коде канонической указана десктопная. Если и в Sitemap.xml также, то тоже можно не трогать.

URL страны

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

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

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

Верхний и нижний регистр

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

Итак, с помощью rel = «canonical» можно указать поисковику, какую страницу считать основной и главной среди дублей, чтобы сканировать ее, индексировать, показывать в выдаче и направлять на нее ссылочный вес. Разберемся, как настраивать тег.

External CSS

With an
external style sheet, you can change the look of an entire website by changing
just one file!

Each HTML page must include a reference to the external style sheet file inside
the <link> element, inside the head section.

Example

External styles are defined within the <link> element, inside the <head> section of an HTML page:

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

An external style sheet can be written in any text editor, and must be saved with a .css extension.

The external .css file should not contain any HTML tags.

Here is how the «mystyle.css» file looks:

«mystyle.css»

body {  background-color: lightblue;}h1 {  color: navy;  margin-left: 20px;}

Note: Do not add a space between the property value and the unit (such as ). The correct way is:

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!

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>