HTML - Списки

15:58 , 12 Август 2019
HTML - Списки

Наряду с абзацами и заголовками существует еще один важный элемент страницы - это списки. Такие элементы наверняка знакомы всем пользователям интернета. Они представляют собой перечисление чего-либо (список) по пунктам. Возле каждого пункта списка обычно стоит закрашенный кружок (он называется маркер списка).

Списки создаются с помощью тега <ul>, внутри которого обязательно должны идти теги <li>. Тег <ul> задает сам список, а в теги <li>. следует ложить пункты списка (то есть одному <li> соответствует один маркер списка). Имейте ввиду, что отдельно теги <li> использовать нельзя.


Пример:


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Это заголовок тайтл</title>
	</head>
	<body>
		<ul>
			<li>Первый пункт списка.</li>
			<li>Второй пункт списка.</li>
			<li>Третий пункт списка.</li>
		</ul>
	</body>
</html>


Результат:

  • Первый пункт списка.
  • Второй пункт списка.
  • Третий пункт списка.


Списки, созданные через тег ul, называются неупорядоченными списками. Такое название им дано потому, что существуют еще и упорядоченные списки, у которых вместо маркеров-точек будут маркеры-цифры. Такие списки вместо тега ul имеют тег

    , а пункты таких списков также создаются через теги li.

    Давайте сделаем упорядоченный список, используя тег ol:


    Пример:

    
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>Это заголовок тайтл</title>
    	</head>
    	<body>
    		<ol>
    			<li>Первый пункт списка.</li>
    			<li>Второй пункт списка.</li>
    			<li>Третий пункт списка.</li>
    		</ol>
    	</body>
    </html>
    
    
    

    Результат:

    1. Первый пункт списка.
    2. Второй пункт списка.
    3. Третий пункт списка.


    Удобство упорядоченных списков в том, что я могу вставить новый пункт списка в любое место - и нумерация сама перестроится (то есть мне не приходится за ней следить в случае каких-либо изменений, как было бы в том случае, если бы я расставлял ее вручную).



Вопросы / Комментарии / Отзывы