Веб-мастерская Ларисы ВоронинойСоздание списков с помощью HTML. Списки HTML.
WEB-мастерская Ларисы Ворониной logo

Создание списков с помощью HTML. Окт 20 2016


Списки используются для того, чтобы упорядочить какие-либо данные и представить их наглядном и удобном виде. Списки бывают маркированными и нумерованными. Как они выглядят, мы все прекрасно знаем.

Маркированный список заключается в парный тег <ul></ul>.

Каждый элемент списка HTML заключается в парный тег <li></li>.

<!DOCTYPE html>
<html>
     <head>
          <meta charset"utf-8">
          <title>Маркированный список</title>
     </head>
     <body>
          <h1>Маркированный список</h1>
          <ul>
               <li>Элемент 1</li>
               <li>Элемент 2</li>
               <li>Элемент 3</li>
               <li>Элемент 4</li>
          </ul>
     </body>
</html>

В браузере мы получаем вот такой результат:
spiski-html

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

<!DOCTYPE html>
<html>
     <head>
          <meta charset"utf-8">
          <title>Нумерованный список</title>
     </head>
     <body>
          <h1>Нумерованный список</h1>
          <ol>
               <li>Элемент 1</li>
               <li>Элемент 2</li>
               <li>Элемент 3</li>
                <li>Элемент 4</li>
          </ol>
     </body>
</html>

spiski-html

Внутри элементов списка HTML могут быть вложены и другие списки.

<!DOCTYPE html>
<html>
     <head>
          <meta charset"utf-8">
          <title>Вложенные списки</title>
     </head>
     <body>
          <h1>Вложенные списки</h1>
          <ol>
               <li>Животные
                    <ul>
                         <li>Лев</li>
                         <li>Тигр</li>
                         <li>Пантера</li>
                    </ul>
               </li>
               <li>Птици
                     <ul>
                          <li>Сокол</li>
                          <li>Орёл</li>
                          <li>Стерх</li>
                    </ul>
               </li>
           </ol>
     </body>
</html>

spiski-html

Список определений заключается в парный тег <dl></dl>.

Название определения заключается в парный тег <dt></dt>,

Описание определения заключается в парный тег <dd></dd>.

<!DOCTYPE html>
<html>
     <head>
          <meta charset"utf-8">
          <title>Список определений</title>
     </head>
     <body>
          <h1>Список определений</h1>
          <dl>
               <dt>Название определения 1</dt>
                    <dd>Описание определения 1</dd>
               <dt>Название определения 2</dt>
                    <dd>Описание определения 2</dd>
          </dl>
     </body>
</html>

spiski-html
Про оформление списков с помощью CSS читайте здесь.


Рейтинг@Mail.ru