Як зробити зміст статті в HTML: якірні посилання, CSS та автоматизація

Зміст особливо корисний у довгій інструкції, огляді або довідковій статті: читач одразу бачить структуру матеріалу й може перейти до потрібного розділу. Для такої навігації не потрібен складний JavaScript — базовий варіант будується на звичайних HTML-посиланнях, які ведуть до унікальних id заголовків.

У старих версіях таких інструкційх часто використовували ручні «якорі» редактора та оформлення, прив’язане до конкретної CMS. Сьогодні краще використовувати стандартні фрагментні посилання, семантичний контейнер <nav> і CSS, а автоматизацію підключати лише там, де вона справді заощаджує час.

Як працює зміст з якірними посиланнями

У адресі сторінки частина після символу # називається фрагментом. Якщо на сторінці є елемент із відповідним id, браузер прокручує документ до нього. Тому зміст складається з двох пов’язаних частин: посилання виду href="#rozdil" і заголовка з id="rozdil".

Наочний приклад. Нижче — невеликий робочий зміст. Посилання ведуть до трьох демонстраційних фрагментів прямо всередині цього блока, тому результат можна перевірити одразу на сторінці.

У реальній статті замість демонстраційних абзаців посилання змісту ведуть до H2/H3 із такими самими унікальними id. Код для копіювання наведено нижче.

<a href="#vstanovlennia">Встановлення</a> <h2 id="vstanovlennia">Встановлення</h2>

Значення id має бути унікальним у межах документа. Для зручності краще використовувати короткі латинські ідентифікатори без пробілів, зрозумілі людині: vstanovlennia, nalashtuvannia, pomylky. Змінювати їх після індексації статті без причини небажано, тому що на конкретні фрагменти можуть посилатися інші сторінки.

Готова розмітка змісту статті

Якщо зміст є окремим навігаційним блоком, його можна обгорнути в <nav> і дати зрозумілий підпис через aria-label. Усередині зручно використовувати звичайний список посилань.

<nav class="article-toc" aria-label="Зміст статті"> <p><strong>Зміст</strong></p> <ol> <li><a href="#shcho-tse">Що це таке</a></li> <li><a href="#pryklad">Приклад</a></li> <li><a href="#pomylky">Типові помилки</a></li> </ol> </nav>

Після блока в самій статті мають бути відповідні заголовки: <h2 id="shcho-tse">, <h2 id="pryklad"> і <h2 id="pomylky">. Не варто створювати порожні елементи лише заради якорів, якщо ідентифікатор можна поставити безпосередньо на заголовок.

Як оформити зміст за допомогою CSS

Зміст має бути помітним, але не конкурувати з основним текстом. Для базового оформлення достатньо відступів, спокійної рамки й нормального стану посилань під час наведення та клавіатурного фокусу.

.article-toc { margin: 1.5rem 0; padding: 1rem 1.25rem; border: 1px solid #d8d8d8; border-radius: .5rem; } .article-toc ol { margin-bottom: 0; } .article-toc a:hover, .article-toc a:focus-visible { text-decoration-thickness: 2px; }

Якщо на сайті є фіксована верхня панель, після переходу до якоря заголовок може опинитися під нею. Замість JavaScript зазвичай достатньо задати заголовкам scroll-margin-top:

article h2[id], article h3[id] { scroll-margin-top: 6rem; }

Значення підбирають під реальну висоту фіксованої шапки. Такий прийом не змінює положення елемента у звичайному потоці документа, а впливає саме на точку зупинки під час прокручування до фрагмента.

Вкладений зміст для H2 і H3.

У великих посібниках зміст може відображати не лише розділи H2, а й підрозділи H3. У такому разі вкладеність списку має повторювати структуру документа, а не використовуватися просто для візуального відступу.

<ol> <li> <a href="#html">HTML</a> <ol> <li><a href="#html-tehy">Теги</a></li> <li><a href="#html-posylannia">Посилання</a></li> </ol> </li> <li><a href="#css">CSS</a></li> </ol>

Не потрібно включати до змісту кожен невеликий підзаголовок. Якщо список стає довшим за видиму частину статті й перестає допомагати орієнтуватися, залиште лише ключові розділи.

Ручний та автоматичний зміст у Joomla

Для однієї-двох статей ручна розмітка залишається найпрозорішим варіантом: ви повністю контролюєте текст посилань і id. У великому довіднику зручніша автоматизація, яка збирає заголовки після рендерингу матеріалу.

Під час вибору автоматичного рішення важливо перевірити кілька речей:

• воно використовує наявні H2/H3, а не створює візуальні заголовки зі звичайних абзаців;
• згенеровані id стабільні й не змінюються під час кожного відкриття сторінки;
• однакові заголовки отримують різні ідентифікатори;
• зміст не дублюється в мобільній і десктопній версіях;
• перехід за посиланнями працює з клавіатури й після ввімкнення кешування.

Якщо розширення генерує випадкові якорі або перебудовує заголовки, такі посилання важко використовувати з інших сторінок. Для evergreen-матеріалів стабільність фрагментів важливіша за красиву анімацію.

Часті помилки під час створення змісту

Зміст сам по собі не виправляє погану структуру тексту. Якщо стаття складається з десятків заголовків з одним реченням під кожним, зміст лише підкреслює надмірну фрагментацію. Спочатку варто вибудувати логічну ієрархію матеріалу, а вже потім додавати навігацію.

На практиці найчастіше трапляються такі помилки:

• однакові id у кількох заголовків;
• посилання веде на неіснуючий ідентифікатор;
• у href забувають символ #;
• рівні H2/H3 вибирають за розміром шрифту, а не за структурою;
• зміст містить забагато другорядних пунктів;
• фіксована шапка перекриває заголовок після переходу.

Після публікації корисно вручну натиснути кожен пункт змісту на комп’ютері та смартфоні. Особливо це важливо після зміни редактора, шаблону або плагіна обробки заголовків.

Підсумок

Сучасний зміст статті можна зробити без складних скриптів: унікальні id на заголовках, посилання на фрагменти, семантичний <nav> і трохи CSS дають зрозумілу та стійку навігацію. Автоматизація виправдана для великої кількості довгих матеріалів, але вона має зберігати стабільні якорі та нормальну структуру заголовків.

Якщо потрібно освіжити базові знання розмітки, див. матеріали «Що таке HTML» і «HTML-теги: що це і які бувають».