Ссылки внутри страницы

Влад Мержевич

Большие документы читаются лучше, если они имеют оглавление со ссылками на соответствующие разделы. Для создания ссылки следует вначале сделать закладку (якорь) в соответствующем месте и дать ей имя при помощи атрибута name тега <a>, как показано в примере 1.

Пример 1. Создание внутренней ссылки

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Закладка</title>
 </head>
 <body>
   <p><a name="top"></a></p> 
     <p>Друг уронил утюг в унитаз. И разбил его. Не утюг разбил, а унитаз.
     Причем так разбил, что по назначению унитаз и использовать никак 
     нельзя, ни боком, ни передом. Мгновением назад только 
     что вот все было хорошо и вот уже дыра прямо в унитазе, 
     да такая, что можно забыть, что есть такой предмет в 
     доме. Махнул рукой нечаянно, а потом мучайся...
   <p><a href="#top">Наверх</a></p>
 </body>
</html>

Между тегами <a name="top"> и </a> отсутствует текст, так как требуется лишь указать местоположение перехода по ссылке, находящейся внизу страницы. Имя ссылки на закладку начинается символом #, после чего идет название закладки. Название выбирается любое, соответствующее тематике.

Можно также делать ссылку на закладку, находящуюся в другой веб-странице и даже другом сайте. Для этого в адресе ссылки надлежит указать ее адрес и в конце добавить символ решетки # и имя закладки (пример 2).

Пример 2. Ссылка на закладку из другой веб-страницы

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Закладка</title>
 </head>
 <body>
  <p><a href="text.html#bottom">Перейти к нижней части текста</a></p>
 </body>
</html>

В данном примере показано создание ссылки на файл text.html, при открытии этого файла происходит переход на закладку с именем bottom.

HTML по теме

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.