Как создать якорь в html?

Как создать якорь в html?

Если для кого-то непонятен термин ЯКОРЬ, то в данной теме я расскажу об этом, а так же как создать якорь в html и его использовать. Ведь использование якоря html не только удобно, но и необходимо для SEO. В глазах поисковиков это выглядит как плюс вашему сайту, если конечно он создан в качестве внутренней перелинковки. Ну о данном факте могут не знать только начинающие. Данная статья поможет вам сделать якорь на странице html и как сделать якорь на другую страницу, а также представлю несколько видов якорей.

Якорь(англ. anchor) — это своего рода ярлык, выполненный в виде гиперссылки, который указывает на другое место в сайте.

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

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

СДЕЛАТЬ ЯКОРЬ В ПРЕДЕЛАХ ОДНОЙ СТРАНИЦЫ.

Якорь html выглядит из двух частей, это указатель и метка. Указатель можно сделать так:

1

<a href="#metka">>Параграф 1</a>

То есть вы заключаете в тег то слово или часть текста, которое делаете кликабельным и от него будет переброс к метке, а в том месте, куда вы хотите сделать переброс, указываете метку, которые можно сделать двумя способами:

1 способ создания якоря html:

1

<a name="metka">Текст</a>

2 способ вставить якорь в html:

1

<a id="metka">Текст</a>

Иными словами в указателе стоит имя metka, вот по имени метки и происходит переброс. Имейте в виду, что имена меток не должны повторяться, а если такое произойдет, то будет путаница с переходами. То бишь будут 2 указателя ссылаться на одну и ту же метку. Страшного ничего нет, но переход будет не к тому месту, в который вы ожидали.

ЯКОРЬ html В ПРЕДЕЛАХ СВОЕГО ИЛИ ДРУГОГО САЙТА

В данном случае указатель будет выглядеть чуток иначе:

1

<a href="myborder.ru/site1#metka">Текст</a>

Как вы заметили сделать якорь в html не так уж и сложно.

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

ЯКОРЬ html С ОТСТУПОМ 4 ВАРИАНТА

1 вариант вставить якорь на сайте:

Пометка: В данном случае браузер должен поддерживать background-clip:content-box, если выводите фон элемента.

1
2
3
4
5
6

#link-C {
	padding-top: 55px;
	margin-top: -55px;
	-webkit-background-clip: content-box;
	background-clip: content-box;
}

2 вариант вставки якоря:

Пометка: браузер должен поддерживать CSS псевдоэлементы

Если элемент содержит заливку или фон, то метод может работать некорректно. Так же может работать некорректно, если код содержит border-top или padding-top.

1
2
3
4
5
6

#link-B:before {
	display: block;
	content: "";
	height: 55px;
	margin: -55px 0 0;
}

3 вариант вставить якорь в html:

1
2
3
4
5
6
7
8

#link-D {
	border-top: 55px solid transparent;
	margin-top: -55px;
	padding: 15px; /* можно использовать пэддинги */
	-moz-background-clip: padding;
	-webkit-background-clip: padding-box;
	background-clip: padding-box;
}

4 вариант добавить якорь в html:

Пометка: Браузер должен поддерживать псевдоэлементы и если у вас есть фон или заливка, то можно использовать background-clip.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

#link-E {
	position: relative; /* псевдоэлемент позиционируется относительно него */
	border-top: 55px solid transparent;
	margin-top: -55px;
	-moz-background-clip: padding;
	-webkit-background-clip: padding-box;
	background-clip: padding-box;
}
#link-E:before {
	content: "";
	position: absolute;
	top: -2px; 
	left: 0;
	right: 0;
	border-top: 2px solid #ccc;
}

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

Думаю, как и мне, чтобы поставить якорь html, вам должен подойти какой-нибудь вариант обязательно.

Как сделать якорь на wordpress?

Меня иногда спрашивают: как можно создать якорь в wordpress? Вопрос конечно звучит банально, но без ответа оставлять нельзя. Поэтому нужно сказать, что в разных CMS якоря оформляются одинаково и сделать якорь как в вордпресс или в любой другой системе будет так же одинаково, к тому же сделать якорь в лендинге тоже идентичный, потому как написан он на языке html и CSS и если ваш сайт их поддерживает, то можете смело использовать представленные варианты.

Удачного создания якоря html!