ПРИХОДИТЕ УЧИТЬСЯ НОВОЙ ПРОФЕССИИ ЛЕТОМ СО СКИДКОЙ ДО 70%Забронировать скидку

Создание и использование якорей в Markdown: основы

Пройдите тест, узнайте какой профессии подходите и получите бесплатную карьерную консультацию
В конце подарим скидку до 55% на обучение
Я предпочитаю
0%
Работать самостоятельно и не зависеть от других
Работать в команде и рассчитывать на помощь коллег
Организовывать и контролировать процесс работы

Быстрый ответ

Чтобы создать внутреннюю ссылку (якорь) в markdown, используйте конструкцию, которая включает в себя квадратные и круглые скобки. Если ваш документ создается в стандартном Markdown без расширений, вам необходимо добавить атрибут ID напрямую, через HTML.

Пример создания якоря на HTML:

HTML
Скопировать код
<h2 id="target-section">Заголовок раздела</h2> <!-- В Markdown данный пример также актуален! -->

Ссылка на якорь:

Markdown
Скопировать код
[Перейти к разделу](#target-section)

Пожалуйста, убедитесь, что значение id соответствует вашей ссылке — это обеспечит корректность перехода.

Пройдите тест и узнайте подходит ли вам сфера IT
Пройти тест

HTML и Markdown: Сочетание сил

HTML позволяет увеличить функциональность Markdown.

Именованные якоря HTML

HTML
Скопировать код
<h3><a name="section-name"></a>Название секции</h3> <!-- Этот метод по-прежнему используется на практике! -->

Ссылка на созданный якорь

Markdown
Скопировать код
[Перейти к секции](#section-name)

Использование устаревшего атрибута name по-прежнему поддерживается в HTML5, что делает его ценным инструментом для реализации якорей.

Визуализация

Вообразите город со сложной уличной сетью и указателями:

Markdown
Скопировать код
Добро пожаловать в Markdown-город! 🏙️
| Улица            | Указатель       |
|------------------|------------------|
| Интро-проспект   | 🚏 #intro        |
| ФАК-бульвар      | 🚏 #faq          |
| Площадь контактов| 🚏 #contact     |

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

Markdown отличается в зависимости от платформы

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

Автоматизированные якоря на GitHub

Markdown
Скопировать код
[Заголовок](#header-title)

GitHub автоматически преобразует заголовки документов в якоря.

Якоря с использованием Markdown Extra

Markdown
Скопировать код
## Заголовок {#custom-id}

Markdown Extra позволяет назначать id якорей вручную.

Специфические якоря для Bitbucket

Markdown
Скопировать код
[Название](#markdown-header-title-with-dashes) <!-- Bitbucket тоже имеет свой формат якорей! -->

Справочная документация Bitbucket поможет вам узнать подробности об их формате якорей.

Улучшаем читаемость: ключ к привлечению внимания читателей

Используйте осмысленные названия

Названия якорей должны быть понятными и описательны:

Markdown
Скопировать код
[Ознакомиться с руководством пользователя](#user-guide)  <!-- Это полезная информация для новичков -->

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

Адаптируйте информацию так, чтобы ее было удобно читать:

Markdown
Скопировать код
| Глава           | Якорь            |
|-----------------|-------------------|
| Вступление      | #intro            |
| Настройка       | #setup            |
| Советы профессионалов | #pro-tips   |

Берегите ресурс читателя

Суммируйте коротко и ясно:

Markdown
Скопировать код
Узнайте больше о якорях Markdown: они удобны, функциональны и всегда под рукой.

Полезные материалы

  1. GitHub Flavored Markdown Spec — правила создания якорей на GitHub.
  2. Extended Syntax | Markdown Guide — расширенные возможности Markdown, которых нет в базовой версии.
  3. CommonMark Spec — стандарт, задающий синтаксис для ссылок в Markdown.
  4. The Anchor element – HTML: HyperText Markup Language | MDN — использование якорей в HTML по рекомендациям от Mozilla.
  5. Daring Fireball: Markdown Syntax Documentation — оригинальная документация по синтаксису ссылок в Markdown.
  6. Tags Filters | Jekyll • Simple, blog-aware, static sites — использование тегов для создания ссылок в Jekyll.
  7. Links and cross references | Hugo — руководство по перекрестным ссылкам в Hugo.