Як зробити список в html

HTML: Нумерований і маркований список

В HTML за організацію списків відповідає цілий набір тегів, організація яких має відповідати певним правилам структуризації даних.

Стандартом п’ятої версії html підтримується 3 види списків: нумеровані списки, марковані списки і списки визначень. Також надається можливість вкладати списки один в одного, створюючи вкладені багаторівневі списки.

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

Нумерований список — це набір елементів (пунктів списку), що мають певну послідовність. Кожен пункт нумерованого списку має унікальний маркер, який вказує на порядок проходження даного пункту щодо інших пунктів списку. За замовчуванням маркерами пунктів нумерованого списку є числа. Перший пункт йде під числом 1, другий під числом 2 і так далі.

Найпоширенішими прикладами нумерованих списків є рецепти приготування різних страв. Так як будь-який рецепт — це нумерований список, з чіткою послідовністю дій.

Примітка: тег

    в якості дочірніх елементів може містити тільки теги

  1. , тобто весь вміст нумерованого списку повинна розміщуватись усередині елементів
  2. . тег
  3. , в свою чергу, не має обмежень на вміст, тому в ньому можна розміщувати абзаци, картинки, посилання, таблиці, інші списки і т.д.

маркований список

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

види маркерів

Види маркерів нумерованого списку можна змінити за допомогою атрибута type . Даний атрибут підтримує п’ять видів маркерів:

значення опис
1 Десяткові числа (1, 2, 3..)
a Список в алфавітному порядку, малі літери (a, b, c..)
A Список в алфавітному порядку, заголовні букви (A, B, C..)
i Римські цифри, рядкові (i, ii, iii, iv..)
I Римські цифри, великі (I, II, III, IV..)

Маркери не мають атрибута type, тому засобами HTML змінити вид маркера у маркованого списку не вийде. Щоб змінити вигляд маркера, в цьому випадку, можна скористатися CSS властивість list-style-type, за допомогою якого, крім значення за замовчуванням, можна вибрати ще два види маркера: circle або square .

Зміна маркерів у списків:

CSS властивість list-style-type, крім видів маркерів для маркованих списків, має безліч різних видів маркерів і для нумерованих списків. Але не завжди зміни одного стандартного виду маркера на інший буває досить для того, щоб красиво оформити список. Для оформлення списків краще використовувати CSS, який дозволяє не тільки змінювати вид маркера, а й замінювати маркери на картинки, контролювати їх розташування і управляти відступом. Як все це робити ви можете подивитися тут.

горизонтальний список

Якщо ви використовуєте HTML список для створення горизонтального меню, то вам потрібно буде розташувати елементи списку один за одним на одному рядку. Засобами HTML це зробити не вийде, тому потрібно буде скористатися CSS.

Щоб створити горизонтальний список, треба для пунктів списку прописати CSS властивість display із значенням inline або inline-block, в залежності від того, які ще властивості ви збираєтеся використовувати.

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

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

Списки в HTML. Все про HTML списках

У HTML для створення списків використовуються теги групи lists. До них відносяться:

Кожному з цих тегів присвячена окрема сторінка в нашому довіднику. Перейти на неї ви можете, натиснувши за назвою тега.

Далі буде показана практика створення HTML списків з прикладом вихідного коду і описом російською мовою.

У HTML є три типи списків: маркований, нумерований і список визначень (термінів).

маркований список

Приклад простого маркованого списку HTML

  • яблука
  • абрикоси
  • банани
  • Зливи
Вихідний код простого маркованого списку:

типи маркерів

Для маркованого списку доступні 3 типи маркерів за замовчуванням: disc, square і circle. Задати тип маркера можна за допомогою CSS властивості list-style-type . Тип маркера може бути заданий, як для списку в цілому (властивість застосовується до), так і для конкретного елемента (властивість застосовується до).

Список з різними типами маркерів:

  • Disc — зафарбований круг, точка.
  • Circle — окружність, порожня всередині.
  • Square — квадрат.

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

Положення маркера в списку

HTML підтримує 2 типу положень маркерів списку: всередині або зовні. Положення маркера регулюється CSS властивість list-style-position . Положення може бути задано, як для списку в цілому, так і для окремого елемента.

Приклад списку з різним положенням маркерів:

  • Маркер всередині (inside)
  • Маркер зовні (outside)

Вихідний код списку з різним положенням маркерів:

Свій маркер в HTML списку

Використовувати в якості маркера HTML списку можна і свою картинку. Для цього використовуйте CSS властивість list-style-image .

Приклад списку зі своєю картинкою в ролі маркера:

  1. Дизайн
  2. Верстка
  3. інтеграція

Вихідний код списку зі своїм маркером — картинкою:

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

Приклад нумерованого списку HTML

  1. вивчити HTML
  2. Додати CSS
  3. освоїти JavaScript
Вихідний код нумерованого списку

Типи нумерації в HTML списку

В HTML доступні 5 типів нумерації в списках. Щоб змінити тип нумерації використовуйте атрибут type . Тип нумерації можна задавати як для списку в цілому, так і для конкретних його елементів.

Різні типи нумерації в списках:

Інші варіанти нумерації, включаючи грецьку, єврейську, японську, з провідними нулями і т.д. можна отримати використовуючи CSS властивість list-style-type .

Багаторівневий список HTML (список в списку)

HTML не має окремого елемента для створення багаторівневих списків. Замість цього в HTML використовуються вкладені списки — список в списку.

Обмежень за кількістю рівнів вкладеності списків немає.

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

  • Tesla
    1. Model 3
    2. Model S
      1. 75
      2. 75D
      3. 100D
      4. P100D
      5. Model X
      6. BMW
      7. Nissan

      Вихідний код багаторівневого списку

      список визначень

      Для створення списку визначень використовуються теги, і . Тег dl — це контейнер списку визначень, dt — термін, dd — опис терміна.

      Багаторівневий список в HTML: як створити і налаштувати?

      Дата публікації: 2016-08-16

      Від автора: всіх вітаю. Напевно більшості з вас подобаються красиво оформлені списки, так як це дозволяє дуже легко сприймати інформацію, яка в них записана. У цій статті ми створимо багаторівневий список в html, а також трохи оформимо його за допомогою css. приступимо!

      Базова теорія

      Зрозуміло, що для створення багаторівневого списку потрібно хоча б розуміти, як створити простий список. Власне, самих видів списків в html існує два: нумерований і маркірований. Створені вони для різних цілей. Нумерований варто застосовувати тоді, коли, наприклад, какао-то перерахування дій потрібно виконувати строго в зазначеному порядку. Відповідно, такий список підійшов би для планування дня або записи рецепта.

      У маркірованому пункти просто стоять один за одним, але при цьому якщо їх поміняти місцями, то нічого не зміниться, так як пункти не прив’язані до якоїсь суворої нумерації.

      Це просто теорія, про яку потрібно знати, але на практиці не трапиться нічого страшного, якщо ви будете використовувати списки по-різному в різних ситуаціях. Я особливо не переймаюсь з приводу того, який тип обрати.

      Практичний курс по верстці адаптивного сайту з нуля!

      Вивчіть курс і дізнайтеся, як верстати сучасні сайти на HTML5 та CSS3

      Власне, тег ol створює нумерований список, а тег ul — маркований. Це зрозуміло. Сподіваюся, ви також маєте уявлення про те, як створювати найпростіший список, тому ми відразу перейдемо до створення багаторівневого.

      Багаторівневий список: як його робити?

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

      Отже, якщо ви уважно переглянули розмітку, то напевно вже вловили суть? Спочатку ми відкриваємо ol, це буде наш батьківський список, в якому будуть міститися вкладені списки і всі пункти. Пункти, як ви розумієте, створюються парним тегом li, всередині якого пишеться вміст.

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

      У нашому випадку виходить такий собі план на день. Не забудьте правильно закрити всі теги. Взагалі мінус багаторівневих списків, як і таблиць, це громіздка розмітка. Уявіть, що ми були дописали сюди ще списки для 19-го і 20-го чисел, а пункти розбили на підпункти, які винесли б в окремі переліки, які, в свою чергу, розташовувалися б уже всередині вкладених. Тобто була б уже вкладеність 2-го рівня. Разом все це зайняло б 30-60 рядків коду.

      До речі, ось так це виглядає:

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

      Щоб змінити нумератор, необхідно вже використовувати css. Звернемося до вкладених списків так:

      Ссылка на основную публикацию