Ви знаєте, що я люблю? Списки!

Ви коли-небудь робили список покупок 
або завдань?

Ви коли-небудь читали списки 
на веб-сайтах?

Наприклад,
"Топ-10 Найсмішнішніх Собачих Мордочок"?

Я впевнена, ви бачили, тому що
світ наповнений списками.

HTML дає нам декілька тегів для 
створення списків,

і ми зараз трішки попрактикуємось з ними,

створивши список причин, чому кролики
є прекрасними тваринками.

Отже, щоб створити маркований список,

ми повинні почати з тега < ul >.

Що означає тег < ul >?

Я закладаюсь, ви можете здогадатись,
що "l" – це список (англ. "List").

З "u" – трохи складніше, ця літера означає
"невпорядкований" (англ."unordered"),

і це означає, що браузер 
не нумеруватиме елементи списку.

Він всього лиш додаватиме 
маленькі маркери.

Щоб побачити, що я маю на увазі,
давайте додамо перший елемент.

"Вони – пухнасті".

Бачите маленький кружечок збоку?

Це і є маркер.

Як ви думаєте, що означає < li >?

"l" – це список (англ. list), "і" - це елемент
(англ. item), елемент списку.

Кожного разу, коли ми хочемо додати 
новий елемент,

ми маємо додати новий тег < li > під тегом < ul > .

Кожен тег < ul > має мати хоча б
один тег < li > під собою,

тому що список без елементів - 
це дуже нудно.

Добре, давайте додамо ще щось.

"Хороші слухачі" і...

"Їдять всі твої залишки моркви".

Гаразд, думаю, це буде дуже 
переконливий список.

Думаю, прочитавши це, 
коже би захотів завести собі кролика.

Я не пронумерувала список,

тому що не вважаю,
що одна причина

є важливішою за іншу,

але існує багато випадків,
коли нам потрібно створити нумерований список.

Наприклад, якщо б
ми захотіли створити список:

"Топ-3 найвідоміших кроликів".

Для того, щоб створити нумерований список,

ми використаємо тег < ol > замість < ul > .

Ви здогадались, що означає < ol > ?

Ось підказка, просто відкиньте

дві перші літери від слова, 
яке було означенням < ul >.

Правильно, ці літери означають 
"впорядкований список" (англ. "ordered list").

І цей тег каже браузеру автоматично

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

Далі ми використовуємо тег < li >, 
для того щоб додати

нові елементи у список.

Тому ми напишемо "Багс Банні",

далі "Тампер",

і, звичайно, ми не можемо 
забути про "Різдвяного кролика".

В нумерованому списку важливе те,

що браузер сам створює для нас
нумерацію.

Тому, якщо ми по-іншому впорядкуємо 
список, видалимо або додамо нові елементи,

він завжди правильно розставить наші числа.

Наприклад, якщо ви всі скажете,

що не знаєте, хто такий Тампер.

Тоді спочатку я вам скажу,

що ви маєте переглянути "Бембі".

Але потім я неохоче пересуну

Тампера в самий низ.

І зараз бідний Тампер є третім номером.

Отже, зараз ви маєте все,
щоб створювати списки.

Тож вперед! Складайте списки!

Переклад на українську мову: Зоряна Гаврилюк, рев'юер: Юлія Білаш, Благодійний фонд "MagneticOne.org"