Навігація – одна з найважливіших частин будь-якого веб-сайту. Вона дозволяє користувачам легко переміщатися різними розділами та сторінками сайту. Використання правильного коду та структури допоможе зробити вашу навігацію зручною та інтуїтивно зрозумілою для користувачів.
Основними елементами, які потрібно використовувати для створення навігації в HTML, є списки. Це дуже зручно та гнучко, тому що дозволяє легко додавати та змінювати елементи навігації. Необхідно використовувати теги <ul> і <li>. Тег <ul> використовується для створення списку, а <li> для кожного списку.
Для створення посилань у навігації використовується тег <a>. Це дозволяє користувачам переходити на сторінки вашого сайту. Важливо пам'ятати, що посилання мають містити осмислений текст, який покаже користувачам, куди вони перейдуть при натисканні посилання.
| Тип навігації | Тег | Приклад використання |
|---|---|---|
| Посилання | <a> | <a href=”https://www.example.com”>Ссылка</a> |
| Меню | <ul> | <ul> <li>Пункт 1</li> <li>Пункт 2</li> <li>Пункт 3</li> </ul> |
| Випадаюче меню | <select> | <select> <option value=”1″>Опция 1</option> <option value=”2″>Опция 2</option> <option value=”3″>Опция 3</option> </select> |
| Таби | <div> | <div id=”tab1″>Таб 1</div> <div id=”tab2″>Таб 2</div> <div id=”tab3″>Таб 3</div> |
Тег <nav> Тег <nav> створює навігацію між сторінками чи розділами сайту. Він допомагає користувачеві знайти потрібну інформацію і є важливим елементом для доступності.
<nav> – элемент навигации HTML-элемент <nav> визначає окрему секцію документа, призначення якої позначення навігаційних посилань (як усередині поточного документа, так і ведучих на іншу сторінку). Як приклад такої секції можна навести меню, якірні посилання.
Базова структура – HTML/CSS Для початку необхідно відцентрувати головний контейнер, і до нього додати ще два (sidenav і content). Зафіксувати навігацію дуже просто. Достатньо додати position: fixed до панелі навігації та надати всьому контенту float: right.