Теги <ul>, <li> та <a>

В публікації присвяченій створенню меню для блогу я використовую декілька HTML-тегів. Тут я хочу описати їх основні властивості та привести кілька простих варіантів використання. Для створення меню нам знадобляться три теги:
Тег <ul>  - маркований список;
Тег <li> - елемент списку;
Тег <a> - гіпер посилання.

Тег <ul> (маркований список)

Елемент вказує на використання маркованого списку. Кожний пункт списку має починатись з елемента li. Якщо до елемента застосовано таблицю стилів, то елемент li успадковує ці властивості. Закриваючий тег є обов'язковим.

Наприклад список із двох елементів описаний наступним чином:

<ul>    <li>елемент маркованого списку</li>    <li>наступний елемент маркованого списку</li> </ul>

виглядатиме у браузері так:

елемент маркованого списку наступний елемент маркованого списку

Тег <li> (елемент списку)

Визначає окремий елемент списку. Зовнішній елемент </ul> чи <ol> встановлює тип списку — маркований чи нумерований.

Синтаксис

Опис синтаксису наведено вище при описі тега <ul>.

Багаторівневі списки

Використовуючи описані HTML-теги створимо дворівневий список. Для цього в один із елементів першого рівня (тег <li>) вставимо ще один список (тег <ul>).
ВАЖЛИВО: Вкладений список необхідно вставити саме в елемент списку попереднього рівня, тобто перед закриваючим елементом li-тега  - </li>.

<ul>   <!-- початок елемента списку -->    <li>елемент списку       <!-- початок вкладеного списку -->       <ul>          <li>елемент вкладеного списку</li>          <li>наступний елемент вкладеного списку</li>       </ul>       <!-- кінець вкладеного списку --<    </li>    <!-- кінець елемента списку --<    <li>наступний елемент списку</li> </ul>

виглядатиме у браузері так:

елемент списку елемент вкладеного списку наступний елемент вкладеного списку наступний елемент списку

Багаторівневий список будується аналогічним чином. Для прикладу побудуємо трирівневий список у якому три основних пункти та по два у кожного вкладеного пункту.

<ul>   <li>Пункт 1     <ul>       <li>Пункт 1.1         <ul>           <li>Пункт 1.1.1</li>           <li>Пункт 1.1.2</li>         </ul>       </li>       <li>Пункт 1.2         <ul>           <li>Пункт 1.2.1</li>           <li>Пункт 1.2.2</li>         </ul>       </li>     </ul>   </li>   <li>Пункт 2     <ul>       <li>Пункт 2.1         <ul>           <li>Пункт 2.1.1</li>           <li>Пункт 2.1.2</li>         </ul>       </li>       <li>Пункт 2.2         <ul>           <li>Пункт 2.2.1</li>           <li>Пункт 2.2.2</li>         </ul>       </li>     </ul>   </li>   <li>Пункт 3     <ul>       <li>Пункт 3.1         <ul>           <li>Пункт 3.1.1</li>           <li>Пункт 3.1.2</li>         </ul>       </li>       <li>Пункт 3.2         <ul>           <li>Пункт 3.2.1</li>           <li>Пункт 3.2.2</li>         </ul>       </li>     </ul>   </li> </ul>

Описаний вище список виглядатиме у браузері так:

Пункт 1 Пункт 1.1 Пункт 1.1.1 Пункт 1.1.2 Пункт 1.2 Пункт 1.2.1 Пункт 1.2.2 Пункт 2 Пункт 2.1 Пункт 2.1.1 Пункт 2.1.2 Пункт 2.2 Пункт 2.2.1 Пункт 2.2.2 Пункт 3 Пункт 3.1 Пункт 3.1.1 Пункт 3.1.2 Пункт 3.2 Пункт 3.2.1 Пункт 3.2.2

Тег <a> (посилання)

Посилання — це «адреса» документу чи сайту в інтернеті. Для нас це буде адреса однієї із сторінок нашого блогу.

Синтаксис:

<a href="https://niproscho.blogspot.com/">Це посилання на головну сторінку блогу</a>

вигляд у браузері:

Це посилання на головну сторінку блогу

Наприклад список із двох елементів описаний нами на початку цієї публікації перетворюється у список посилань наступним чином:

<ul>    <li><a href="https://niproscho.blogspot.com/">Це посилання на головну сторінку блогу</a></li>    <li><a href="">Як створити меню для блогу</a></li> </ul>

виглядатиме у браузері так:

Це посилання на головну сторінку блогу Як створити меню для блогу