Как сделать внутреннюю ссылку в HTML

План заработка в Интернете

Как правильно выбрать партнерские программы, чтобы гарантированно зарабатывать? Что необходимо сделать вначале, чтобы ваш заработок был стабильным и предсказуемым? Возможно ли стартовать вообще без денег и каких-либо вложений в рекламу? Этот план поможет вам сделать первые шаги к заработку, даст ответы на важные вопросы и убережет от ошибок в начале пути. Подробнее...

Как всегда напоминаю, что есть замечательный видеокурс о вёрстке сайтов, в котором рассказывается в том числе о HTML и CSS:

>>> Вёрстка сайта с нуля 2.0 >>>

О ссылках я рассказывал здесь и здесь, но там речь шла только о переходах на внешние страницы. Однако довольно часто в HTML приходится делать ссылки внутри страницы. Например, если в одном документе у вас несколько разделов, а в начале статьи должно быть содержание документа со ссылками на эти разделы.

И в этой статье я расскажу о том, как сделать ссылку внутри страницы в HTML...

Как создать внутреннюю ссылку в HTML

Итак, ссылка на текст внутри страницы в HTML создаётся за два шага:

Надо создать ссылку.
Надо обозначить место в тексте, куда ведёт ссылка.

Создать ссылку можно так:

<a href="#name_link">Название ссылки</a>

То есть вы используете всё тот же атрибут href, но вместо URL пишите имя ссылки. А чтобы браузер знал, что эта ссылка ведёт на место внутри страницы, перед именем надо поставить знак #.

На втором шаге вы должны обозначить место в документе, куда ведёт ссылка. Обозначить место в документе, куда должна вести ссылка, можно одним из двух способов:

<h2><a name="name_link">Заголовок в статье</a></h2>

или

<h2 id="name_link">Заголовок в статье</h2>

Первый способ более старый, и он будет работать во всех браузерах.

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

Разумеется, атрибуты id или name могут быть использованы не только в заголовках, но и в других тегах. Например, в тегах абзаца или картинки. Так что внутренняя ссылка может вести на любое место в документе.

Ну а теперь пример для лучшего понимания:

<a href="#my_link_1">Ссылка на заголовок 1</a><br>
<a href="#my_link_2">Ссылка на заголовок 2</a><br>

   
<br><br>
   
<h2><a name="my_link_1">Первый заголовок в статье</a></h2>
<p>
Это текст внутри документа под первым заголовком. 
</p>

<h2 id="my_link_2">Второй заголовок в статье</h2>
<p>
Это текст внутри документа под вторым заголовком. 
</p>

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

Например, если на странице моего сайта https://info-master.su/programming/web/html/link-attributes.php есть подзаголовок, который обозначен так:

<h2 id="tabindex">Атрибут TABINDEX</h2>

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

<a href="https://info-master.su/programming/web/html/link-attributes.php#tabindex">
Ссылка на участок другой страницы
</a>

И таким образом пользователь может перейти не в начало страницы, а сразу к нужному участку, то есть к подзаголовку Атрибут TABINDEX.

На этом, пожалуй, разговор о ссылках я закончу. Для лучшего понимания посмотрите видео (выше) и изучите курс о вёрстке сайтов.

Вступить в группу "Основы программирования"

Подписаться на канал в РУТУБ

Подписаться на Дзен-канал

Подписаться на рассылки по программированию

Как создать свой сайт

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

Помощь в технических вопросах

Помощь студентам. Курсовые, дипломы, чертежи (КОМПАС), задачи по программированию: Pascal/Delphi/Lazarus; С/С++; Ассемблер; языки программирования ПЛК; JavaScript; VBScript; Fortran; Python; C# и др. Разработка (доработка) ПО ПЛК (предпочтение - ОВЕН, CoDeSys 2 и 3), а также программирование панелей оператора, программируемых реле и других приборов систем автоматизации. Подробнее...

Главная
Контакты