Закладки в HTML

Урок «Link Titles & Targets» менял как открывается ссылка. Закладки (fragment-ссылки) меняют куда на странице вы попадаете. Длинные уроки, FAQ и документация часто нуждаются в переходе к «Тарифам», «FAQ» или «Наверх» без загрузки нового документа. Этот приём сочетает уникальный id на цели с href, который начинается с #.

Что такое закладка внутри страницы

Идентификатор фрагмента — это часть URL после #. В HTML точку посадки создают, задавая элементу id. Затем любая ссылка с href вида #that-id просит браузер прокрутить страницу к первому совпадающему id (или к странице, указанной перед #, если вы добавили путь).

Прямой ответ

1. Задайте цели атрибут id, например <h2 id="pricing">.
2. Ссылайтесь через href="#pricing".
   Символ # означает «найди этот id». Id на странице должны быть уникальными. Предпочитайте короткие имена без пробелов: pricing, а не Our Pricing!!.

Оглавление на той же странице

Мини-навигация вверху длинной страницы — классическая демонстрация для начинающих: fragment-ссылки сверху, совпадающие id у заголовков ниже и ссылка «назад».

Как читать пример на странице

• #intro и #pricing — это fragment-ссылки, а не отдельные файлы
• id каждого заголовка должен совпадать с фрагментом после #
• Навигация может стоять где угодно; оглавление вверху типично для длинного контента
• «Back to intro» показывает, что закладки работают и вниз, и вверх по одному документу

Ссылка на раздел другой страницы

Можно объединить относительный (или абсолютный) путь с фрагментом. Браузер загружает страницу, затем переходит к id, если он существует.

Когда использовать path#id

• Переходы на той же странице: достаточно #pricing
• Другой HTML-файл в проекте: guide.html#pricing
• Внешняя документация, которой вы доверяете: полный URL, оканчивающийся на #section-name, если у сайта стабильные id
  Если id на целевой странице отсутствует, браузер обычно открывает страницу сверху и игнорирует неизвестный фрагмент.

Привычки именования id

• Одно значение id на страницу — никогда не дублируйте
• По возможности начинайте с буквы; избегайте пробелов и странной пунктуации
• Для составных имён используйте дефисы: getting-started
• Держите имена стабильными, если другие страницы будут на них глубоко ссылаться
  Id нужны машинам и URL; видимый текст заголовка может оставаться понятным человеку и отличаться от строки id.

Закладки и «закладки» браузера

Словом «закладка» также называют сохранение страницы в избранном браузера. В этом уроке имеются в виду fragment-ссылки внутри страницы. Избранное браузера использует URL документа (иногда с фрагментом, если вы его скопировали). Одно слово — разные повседневные задачи; держайте HTML-смысл ясным, когда учите других.

Заметки по доступности и UX

Jump-ссылки помогают пользователям клавиатуры и скринридеров перемещаться по длинным страницам, когда цели — реальные ориентиры (заголовки, секции). Не создавайте десятки пустых id. Убедитесь, что цель видна после перехода — липкие шапки позже при CSS могут перекрывать заголовки; пока просто проверьте, что появляется нужный раздел.

Практика в редакторе

1. Создайте два заголовка с разными значениями id.
2. Над ними добавьте fragment-ссылки с href="#…".
3. Кликните каждую ссылку и убедитесь, что страница переходит к нужному заголовку.
4. Добавьте ссылку «Наверх», указывающую на id первого заголовка или верхний landmark.
5. Из второго файла сошлитесь через other.html#intro и проверьте переход между страницами.
6. Временно продублируйте id, посмотрите на путаницу, затем исправьте уникальность.

Типичные ошибки

• Один и тот же id дважды на одной странице
• Забытый # в href, из‑за чего браузер ищет имя файла
• Пробелы или странные символы в id
• Ссылка на id, которого не существует
• Путаница fragment-закладок с target="_blank" (разные задачи)
• Ожидание, что одного #pricing хватит, чтобы открыть другой файл без пути

Кратко

• Закладки на той же странице используют id плюс href="#id"
• Id должны быть уникальными, короткими и без пробелов
• Отлично подходят для длинных страниц и мини-оглавлений
• Используйте page.html#id, чтобы попасть в раздел другой страницы
• Отсутствующие фрагменты обычно тихо «проваливаются» — вы остаётесь вверху