Маркований список html та приклади його використання

Ви знаєте? Вчора ми саме з дружиною складали список того, що потрібно купувати в будинок, на день народження, на відпочинок, і мені якраз спало на думку: «О. А наступну статтю я якраз присвячую спискам у html.» Взагалі, існує два основних типи, тому кожному типу я захотів присвятити окрему статтю. І ось сьогодні ми вивчатимемо маркований список html.

Що таке маркований список? Це спеціальний список, який містить у собі якихось упорядкованих дій, проте містить схожі за змістом елементи. І виділяються такі списочки якимись значками, наприклад маркерами, дефісами тощо. Ось у мене на блозі вони у мене представлені у вигляді вказівного пальця і використовую я його, коли перераховую щось. Давайте подивимося на прикладі.

Материнська плата
Оперативна пам'ять
Жорсткий диск
Відеокарта
І т.д.

Давайте тепер подивимося як це все відтворити у html

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

- unordered list (невпорядкований список). Цей тег ставиться на початку списку і закривається наприкінці. Він повідомляє нам, що тут буде маркірований невпорядкований список.
- list item (пункт списку). У ці теги полягає кожен елемент списку.

Насправді процедура створення маркованого списку дуже легка, і я покажу вам на прикладі:

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

Ну і звичайно я не можу не розповісти вам про атрибути, які стосуються цих тегів. Правда насправді ціатрибути в html вже не використовуються, так як все теж простіше і зручніше проробляти через стилі, тобто CSS. Але я все одно хотів би розповісти вам для загального розвитку, тому я познайомлю вас із атрибутом type та його значеннями.

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

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

- завдяки цьому значенню маркер залишиться круглим, але вже не зафарбованим;

— у цьому випадку маркери перетворяться на маленькі чорні квадратики.

Спробуйте самі подивитися, як це працює, і ви побачите всі зміни.

Вкладений список

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

Зробити це абсолютно нескладно, просто в той тег, який ми хочемо розширити, додаємо новий контейнер списку

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

Тепер зберігаємо та запускаємо всю цю справу в браузері. Дивіться, що в нас вийшло: тепер у кожному елементі списку є ще один новий список. Цього ми й домагалися. І якщо ви помітили, то маркери за промовчанням ставляться інші, ніж батьківські. Це зроблено спеціально, щоб не плутатися, але ви можете поставитипотрібний атрибут та вибрати свій маркер. Я думаю, що тут все має бути зрозумілим.

Ну, загалом я думаю, що суть ви вловили. Але якщо ви хочете добре розумітися на HTML і CSS, то я вам настійно рекомендую подивитися курс "HTML5 і CSS3 з нуля до профі". Завдяки цьому курсу ви легко вивчите всі основи html і css, а також навчитеся самостійно верстати кілька типів сайтів: сайти-візитки, блоги, інтернет-магазини, і навіть лендинги. Курс справді приголомшливий.