Главная / Уроки по HTML, HTML5 / Ссылка внутри страницы HTML

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

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

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

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

1) Ссылка внутри страницы с помощью атрибута «name»:

<html>
<head>
<title>Структура HTML документа</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
</head>
<body>
<p> <a href="#link">Перейти к разделу 5</a></p>
<h1> Заголовок раздела 1</h1>
<p>Текст раздела 1</p>
<h2>Заголовок раздела 2</h2>
<p>Текст раздела 2</p>
<h2>Заголовок раздела 3</h2>
<p>Текст раздела 3</p>
<h2>Заголовок раздела 4</h2>
<p>Текст раздела 4</p>
<h2><a name="link">Заголовок раздела 5</a></h2>
<h2>Заголовок раздела 6</h2>
<p>Текст раздела 6</p>
<h2>Заголовок раздела 7</h2>
<p>Текст раздела 7</p>
<h2>Заголовок раздела 8</h2>
<p>Текст раздела 8</p>
<h2>Заголовок раздела 9</h2>
<p>Текст раздела 9</p>
<h2>Заголовок раздела 10</h2>
<p>Текст раздела 10</p>
</body>
</html>

В данном примере мы прописали ссылку (строка 7) и непосредственно сам атрибут «name» с параметром «link» (строка 16). В результате чего, при нажатии по ссылке «Перейти к заголовку раздела 5» нас перебросит к 5 заголовку, т.к. именно для него мы и задали метку.

2) Ссылка внутри страницы с помощью атрибута (идентификатора) «id»:

<html>
<head>
<title>Структура HTML документа</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
</head>
<body>
<p> <a href="#link">Перейти к разделу 5</a></p>
<h1>Заголовок раздела 1</h1>
<p>Текст раздела 1</p>
<h2>Заголовок раздела 2</h2>
<p>Текст раздела 2</p>
<h2>Заголовок раздела 3</h2>
<p>Текст раздела 3</p>
<h2>Заголовок раздела 4</h2>
<p>Текст раздела 4</p>
<div id="link"><h2>Заголовок раздела 5</h2></div>
<p>Текст раздела 5</p>
<h2>Заголовок раздела 6</h2>
<p>Текст раздела 6</p>
<h2>Заголовок раздела 7</h2>
<p>Текст раздела 7</p>
<h2>Заголовок раздела 8</h2>
<p>Текст раздела 8</p>
<h2>Заголовок раздела 9</h2>
<p>Текст раздела 9</p>
<h2>Заголовок раздела 10</h2>
<p>Текст раздела 10</p>
</body>
</html>

Данный пример практически аналогичен первому. Вместо атрибута «name» здесь используется идентификатор «id». Можно использовать любой вариант, какой больше нравится. Вот по такому принципу и формируется ссылка внутри страницы.

Добавить комментарий

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