HTML вложенные списки

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

18. HTML маркированный, нумерованный список, вложенные списки

HTML теги, определяющие HTML списки

Не стоит пренебрегать HTML списками. Умелое использование списков позволяет украсить дизайн любой web-страницы. Также их применение приветствуется поисковыми системами.

Процесс оптимизации сайтов для поисковиков (SEO) является неотъемлемой частью сайтостроения. Поисковой оптимизацией нужно будет заняться тогда, когда вы определитесь с тематикой вашего будущего сайта и займетесь непосредственно наполнением его контентом, но сначала как следует изучите HTML и CSS! В нашем деле последовательность имеет большое значение!


Содержание страницы

  1. HTML маркированный список
  2. HTML нумерованный список
  3. HTML вложенные списки или многоуровневые
  4. HTML списки определений

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

Пример:

<title>Маркированный HTML список, теги</title>
</head>
<body>
<ul>
<li>Sony</li>
<li>Asus</li>
<li>Dell</li>
</ul>
</body>
</html>

Результат:

Ненумерованные HTML списки

Теги

Определяем тип маркера для элементов маркированного HTML списка:

<title>HTML маркированный список</title>
</head>
<body>
<ul type="square">
<li>Sony</li>
<li>Asus</li>
<li>Dell</li>
</ul>
</body>
</html>

Результат:

markirovannyj spisok, html tegi

Атрибуты и значения

Определяем тип маркера для элементов маркированного списка:

<title>HTML списки, теги</title>
</head>
<body>
<ul type="circle">
<li>Sony</li>
<li>Asus</li>
<li>Dell</li>
</ul>
</body>
</html>

Результат:

numerovannyj spisok, tegi

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

Пример:

<title>Нумерованный список в HTML</title>
</head>
<body>
<ol>
<li>Sony</li>
<li>Asus</li>
<li>Dell</li>
</ol>

Теги <ol> </ol> определяют нумерованный HTML список.

Результат:

numerovannyj spisok html, tegi

Пример 2:

<title>Нумерованный список в HTML, теги</title>
</head>
<body>
<ol type="A">
<li>Sony</li>
<li>Asus</li>
<li>Dell</li>
</ol>

type="A" определяет в качестве маркера нумерованного списка большие буквы.

Результат:

numerovannyj spisok html

Пример 3:

<title>Нумерованные HTML списки</title>
</head>
<body>
<ol type="a">
<li>Sony</li>
<li>Asus</li>
<li>Dell</li>
</ol>

type="а" определяет в качестве маркера нумерованного HTML списка маленькие буквы.

Результат:

numerovannyj spisok

Пример с атрибутом start:

<title>HTML теги, определяющие нумерованные списки</title>
</head>
<body>
<ol start="3">
<li>Sony</li>
<li>Asus</li>
<li>Dell</li>
</ol>

Результат:

numerovannye spiski, tegi

Атрибут start="" определяет первый символ первого пункта нумерованного HTML списка.

HTML многоуровневые или вложенные списки

Вложенные или многоуровневые списки определяются порядком размещения тегов:

<title>HTML вложенные списки (многоуровневый)</title>
</head>
<body>
<ul>
<li>Америка</li>
<li>Европа
  <ul>
  <li>Швеция</li>
  <li>Норвегия</li>
  <li>Финляндия</li>
  </ul>
</li>
<li>Азия</li>
<li>Австралия</li>
</ul>

Результат:

Отсюда и название списка → вложенный или многоуровневый список.

HTML списки определений

Пример:

<title>HTML списки определений</title>
</head>
<body>
<dl>
<dt>HTML</dt>
<dd>Гипертекстовый язык разметки</dd>
<dt>CSS</dt>
<dd>Каскадные таблицы стилей</dd>
</dl>

Результат:

Нумерованные или упорядоченные списки в HTML

Рассмотрим теги

Дата публикации: Октябрь 2009 | Обновление: Август 2014

Урок 17. HTML ячейки   Вложенные HTML списки, теги   Урок 19. HTML iframe

    Сохранить в сервисы и закладки