Html 5 tag

HTML Упражнения

HTML Теги списка

Тег	Описание
<ul>	Определяет неупорядоченный (ненумерованный) список
<ol>	Определяет упорядоченный (нумерованный) список
<li>	Определяет пункты списка
<dl>	Определяет список описания
<dt>	Определяет термин в списке описания
<dd>	Описывает термин в списке описания

Для получения полного списка всех доступных тегов HTML, посетите наш HTML Справочник тегов на нашем сайте W3Schools на русском.

Вопросы для самоконтроля

Для чего нужны HTML-списки?
Какие бывают HTML-списки?
Каким тегом определяется неупорядоченный HTML-список?
Каким тегом определяется упорядоченный HTML-список?
Каким тегом определяется каждый элемент в HTML-списке?
Как по умолчанию обозначаются элементы неупорядоченного HTML-списка?
Как по умолчанию обозначаются элементы упорядоченного HTML-списке?
Что такое список описаний?
Какой тег определяет список описаний?
Какой тег определяет термин (имя) в списке описаний?
Какой тег определяет описание каждого термина в списке описаний?

HTML Теги списка

Тег	Описание
<ul>	Определяет неупорядоченный (ненумерованный) список
<ol>	Определяет упорядоченный (нумерованный) список
<li>	Определяет пункты списка
<dl>	Определяет список описания
<dt>	Определяет термин в списке описания
<dd>	Описывает термин в списке описания

Вопросы для самоконтроля

Для чего нужны HTML-списки?
Какие бывают HTML-списки?
Каким тегом определяется неупорядоченный HTML-список?
Каким тегом определяется упорядоченный HTML-список?
Каким тегом определяется каждый элемент в HTML-списке?
Как по умолчанию обозначаются элементы неупорядоченного HTML-списка?
Как по умолчанию обозначаются элементы упорядоченного HTML-списке?
Что такое список описаний?
Какой тег определяет список описаний?
Какой тег определяет термин (имя) в списке описаний?
Какой тег определяет описание каждого термина в списке описаний?

❮ Prev
Next ❯

Еще примеры

Пример

Установите различные типы списков (с помощью CSS):

<ol style=»list-style-type:upper-roman»><li>Кофе</li><li>Чай</li>
<li>Молоко</li></ol><ol style=»list-style-type:lower-alpha»>
<li>Кофе</li><li>Чай</li><li>Молоко</li></ol>

Пример

Отображение всех различных типов списков, доступных с помощью CSS:

Пример

Уменьшение и расширение высоты строки в списках (с помощью CSS):

<ol style=»line-height:80%»> <li>Кофе</li>
<li>Чай</li> <li>Молоко</li></ol><ol
style=»line-height:180%»> <li>Кофе</li> <li>Чай</li>
<li>Молоко</li></ol>

Пример

Вложите неупорядоченный список в упорядоченный список:

<ol> <li>Кофе</li> <li>Чай <ul>
<li>Black tea</li> <li>Зеленый чай</li>
</ul> </li> <li>Молоко</li></ol>

Резюме раздела

Используйте HTML елемент для определения неупорядоченного списка
Используйте CSS свойство для определения маркера элемента списка
Используйте HTML элемент для определения упорядоченного списка
Используйте HTML атрибут для определения типа нумерации
Используйте HTML элемент для определения элемента списка
Используйте HTML элемент для определения списка описания
Используйте HTML элемент для определения термина описания
Используйте HTML элемент для описания термина в списке описания
Списки могут быть вложены в списки
Элементы списка могут содержать другие элементы HTML
Используйте CSS свойство или для горизонтального отображения списка

HTML Tags

<!—><!DOCTYPE><a><abbr><acronym><address><applet><area><article><aside><audio><b><base><basefont><bdi><bdo><big><blockquote><body><br><button><canvas><caption><center><cite><code><col><colgroup><data><datalist><dd><del><details><dfn><dialog><dir><div><dl><dt><em><embed><fieldset><figcaption><figure><font><footer><form><frame><frameset><h1> — <h6><head><header><hr><html><i><iframe><img><input><ins><kbd><label><legend><li><link><main><map><mark><meta><meter><nav><noframes><noscript><object><ol><optgroup><option><output><p><param><picture><pre><progress><q><rp><rt><ruby><s><samp><script><section><select><small><source><span><strike><strong><style><sub><summary><sup><svg><table><tbody><td><template><textarea><tfoot><th><thead><time><title><tr><track><tt><u><ul><var><video>

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

Не такой известный тип списка, как рассмотренные выше. Состоит из терминов и их определений. Создаётся с помощью тегов:

<dl> — контейнер, содержащий список.

<dt> — тег термина.

<dd> — тег определения

Область применения списков определений — глоссарии, справочники, тесты, словари и другие ёмкие перечисления вида «Термин — объяснение».

Вот пример списка определений:

<!DOCTYPE html>
<html>
<head>
    <title>Список определений</title>
</head>
<body>
   <dl>
      <dt>Дескриптор</dt>
       <dd>Основная единица языка разметки, известная всем как "Тег".</dd>
      <dt>Атрибут</dt>
       <dd>Свойство тега, дающее ему дополнительные возможности оформления текста.</dd>
      <dt>Метка</dt>
       <dd>Одиночный тег, который не нужно закрывать.</dd>
   </dl>
</body>
</html>

Часть текста

Парный тег
<span>…</span> используется, когда нужно указать отдельный стиль CSS для части текста.

Пример:

index.html

XHTML

<!DOCTYPE html>
<html>
<head>
<title>HTML span example</title>
<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″>
</head>
<body>
<p>
Можно указать <span style=»color:#ff0000;»>отдельный стиль</span> для части текста.
</p>
<p>
<a href=»https://urvanov.ru/2016/03/02/%D1%83%D1%87%D0%B5%D0%B1%D0%BD%D0%B8%D0%BA-html/#span»>Часть текста <span></span></a>
</p>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<!DOCTYPE html>
<html>
<head>

<title>HTML span example</title>

</head>
<body>
<p>

Можно указать <span style=»color:#ff0000;»>отдельный стиль</span> для части текста.

</p>
<p>

<a href=»https://urvanov.ru/2016/03/02/%D1%83%D1%87%D0%B5%D0%B1%D0%BD%D0%B8%D0%BA-html/#span»>Часть текста <span></span></a>

</p>
</body>
</html>

More Examples

Example

Set different list types (with CSS):

<ol style=»list-style-type:upper-roman»><li>Coffee</li><li>Tea</li>
<li>Milk</li></ol><ol style=»list-style-type:lower-alpha»>
<li>Coffee</li><li>Tea</li><li>Milk</li></ol>

Example

Display all the different list types available with CSS:

Example

Reduce and expand line-height in lists (with CSS):

<ol style=»line-height:80%»> <li>Coffee</li>
<li>Tea</li> <li>Milk</li></ol><ol
style=»line-height:180%»> <li>Coffee</li> <li>Tea</li>
<li>Milk</li></ol>

Example

Nest an unordered list inside an ordered list:

<ol> <li>Coffee</li> <li>Tea <ul>
<li>Black tea</li> <li>Green tea</li>
</ul> </li> <li>Milk</li></ol>

Заголовки

Теги h1-h6 используются для создания заголовков на веб-страницах

Каждый из них имеет свой уровень важности, при этом h1 является наиболее важным, а h6 — наименее.Рассмотрим каждый из них более подробно и выделим их на странице желтым цветом

h1

Тег используется для заголовка страницы и должен быть единственным на странице. Этот тег является наиболее важным и несёт в себе описание страницы в целом.

Запись в коде:

Как выглядит h1 на сайте

Заголовок всегда должен быть лишь один на страницу, и определить его легко: его текст должен рассказывать, о чем вся веб-страница

h2

Тег используется для заголовков разделов(секций). Если на странице есть несколько разделов, то каждый из них может иметь заголовок второго уровня.

Запись в коде:

Вернемся к нашей странице и найдем в ней секции. Заголовки данных отделов будут оборачиваться в тег h2,как например заголовки «Find great work» и «Featured Job».

h3

Тег используется для заголовков подразделов. Если в разделе есть несколько подразделов, то каждый из них может иметь заголовок третьего уровня.Возьмем пример выше и выделим в главном разделе подразделы и выделим их заголовки желтым цветом.

Запись в коде:

Как выглядит h3 на сайте

h4-h6

Теги — используются для заголовков, которые являются менее важными, чем заголовки -. Их можно использовать для разделения информации на странице, но они должны быть использованы с умеренностью.

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

Важно помнить, что использование заголовков не только помогает организовать информацию на странице, но также улучшает SEO-оптимизацию сайта

Запись — в коде:

Данные заголовки используются довольно редко и их все меньше можно увидеть в современной верстке

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

Нумерованные списки при разметке мало чем отличаются от маркированных. Отличие всего одно: вместо тега контейнера списка, нужно использовать тег .

Элементы списка всё также помещаем в контейнеры .

И всё нумерованный список создаётся также просто!

Помним про Codestyle и закрываем все контейнеры.

Для того, чтобы было нагляднее посмотрим на реальном примере.

В контейнер нумерованного списка «Топ5 планет по диаметру» поместим список по порядку одного за другим элементы (планеты в порядке убывания) в контейнерах .

При отображении этого HTML-кода, нумерация элементов списка происходит автоматически:

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

В нумерованный список браузер автоматически вставляет номера элементов по порядку, начиная с некоторого значения (обычно 1). Это позволяет вставлять и удалять пункты списка, не нарушая нумерации, так как остальные номера автоматически будут пересчитаны.
Нумерованные списки создаются с помощью блочного элемента <ol> (от англ. Ordered List – нумерованный список). Далее в контейнер <ol> для каждого пункта списка помещается элемент <li> (от англ. List Item – пункт списка). По умолчанию применяется нумерованный список с арабскими числами.
Тег <ol> имеет следующий синтаксис:

Элементы нумерованного списка должны содержать несколько элементов списка, как показано в следующем примере:

Пример: Нумерованный список

Результат
HTML-код
Попробуй сам »

Пошаговая инструкция

Достать ключ
Вставить ключ в замок
Повернуть ключ на два оборота
Достать ключ из замка
Открыть дверь

Иногда при просмотре существующих кодов HTML вы будете встречать аргумент type в элементе <ol>, который используется для указания типа нумерации (буквы, римские и арабские цифры и т.п.). Синтаксис:

Здесь: type – символы списка:

A — прописные латинские буквы (A, B, C . . .);
a — строчные латинские буквы (a, b, c . . .);
I — большие римские цифры (I, II, III . . .);
i — маленькие римские цифры (i, ii, iii . . .);
1 — арабские цифры (1, 2, 3 . . .) (применяется по умолчанию).

Если вы хотите, чтобы список начинался с номера, отличного от 1, следует указать это при помощи атрибута start тега <ol>.
В следующем примере показан нумерованный список с большими римскими цифрами и начальным значением XLIX:

Пример: Применение атрибутов type и start.

Результат
HTML-код
Попробуй сам »

Перепела
Фазаны
Куропатки
Павлины

Нумерацию можно начинать и с помощью атрибута value, который добавляется к элементу <li> следующим образом:

В этом случае последовательная нумерация списка прервётся и с этого пункта нумерация начнётся заново, в данном случае с семи.

Пример использования атрибута value тега <li>, который позволяет изменить номер данного элемента списка:

Пример: Применение атрибута value

Результат
HTML-код
Попробуй сам »

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

В этом примере «Первый пункт списка» будет иметь номер 1, «Второй пункт списка» – номер 7, а «Третий пункт списка» – номер 8.

Специальные символы

Некоторые символы невозможно отобразить в HTML обычным способом, поэтому для их отображения нужно применять специальные коды. Такие символы называются «специальными».

Коды некоторых специальных символов:

Символ	Описание	Мнемоника	Код
	Неразрывный пробел
<	Меньше чем	<	<
>	Больше чем	>	>
	Знак охраны авторского права	©	©
	Зарегистрированный товарный знак	®	®
&	Знак амперсанда	&	&
Левая двойная угловая кавычка. Используется в типографии в качестве кавычек для русского языка.	«	«
Правая двойная угловая кавычка. Используется в типографии в качестве кавычек для русского языка.	»	»
°	Знак градуса	°	°
„	Внутренняя открывающая кавычка для русского языка.	&bdquo;	„
“	Внутренняя закрывающая кавычка для русского языка.	“	“

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

От маркированного отличается тем, что порядок элементов в нём важен, а потому вместо маркера здесь используются последовательно идущие цифры или буквы. О порядке в списке заботиться не нужно: эту задачу берёт на себя браузер. Если изменить список (удалить или добавить элемент, нарушив порядок), обозреватель пересчитает его и отобразит правильно.

Для создания нумерованных списков используются теги <ol> и <li>. Контейнер <ol> определяет начало и конец списка, тег <li> задаёт начало и конец его элемента — всё, как в маркированном списке, только <ul> заменено на <ol>.

<!DOCTYPE html>
<html>
<head>
    <title>Нумерованный список</title>
</head>
<body>
   <ol>
      <li>Камень</li>
      <li>Ножницы</li>
      <li>Бумага</li>
   </ol>
</body>
</html>

Так как с нумерованными списками не всегда всё так просто, для тега

создали следующие атрибуты (обратите внимание: ниже как раз приведён нумерованный список):

1. type. Этот атрибут позволяет нумеровать список не только арабскими, но также римскими цифрами или латинскими буквами разного регистра. type поддерживает значения 1 (по умолчанию), a, A, i, I (попробуйте поэкспериментировать с ними самостоятельно).

2. start. Не всегда нумерация должна начинаться с единицы. Этот атрибут позволяет задать начальное значение — номер первого элемента списка. В нём можно указать, чтобы отчёт начинался, например, с числа 100 или буквы K.

3. reversed. Если список должен идти не с 1 до 10, а с 10 до 1, то необходимо использовать этот атрибут. Если он задан, нумерация будет вестись в обратном порядке.

Для того, чтобы задать произвольный номер элементу в середине списка, нужно использовать в теге <li> атрибут <value>:

<li value=”45”>Сорок пятый элемент после тридцать восьмого</li>

Изменив номер одного элемента в середине списка, вы измените и нумерацию всех следующих за ним элементов — отчёт начнётся со значения в атрибуте value. Например, если элементу 18 вы присвоили номер 35, то следующие за ним элементы будут иметь номера не 19, 20, 21, а 36, 37, 38.

Предварительно форматированный текст

Тег
<pre>…</pre> позволяет определить блок предварительно форматированного текста. Он обычно отображается моноширинным шрифтом. Внутри этого тега все пробелы, переводы строк и табуляторы сохраняются при выводе страницы. По умолчанию же все пробелы, табуляторы и переводы строк склеиваются в один пробел. Внутри этого тега можно применять другие теги.

index.html

XHTML

<!DOCTYPE html>
<html>
<head>
<title>HTML pre example</title>
<meta http-equiv=»Content-Type» content=»text/html;charset=utf-8″>
</head>
<body>
<div>
Обычный текст внутри

одного div.
</div>

<pre>
Преформатированный текст

внутри тега

pre
</pre>

<p>
<a href=»https://urvanov.ru/2016/03/02/%D1%83%D1%87%D0%B5%D0%B1%D0%BD%D0%B8%D0%BA-html/#pre»>Предварительно форматированный текст <pre></pre></a>
</p>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

<!DOCTYPE html>
<html>
<head>

<title>HTML pre example</title>

</head>
<body>
<div>
Обычный текст      внутри

одного          div.
</div>

<pre>
Преформатированный       текст

внутри     тега

pre
</pre>

<p>

<a href=»https://urvanov.ru/2016/03/02/%D1%83%D1%87%D0%B5%D0%B1%D0%BD%D0%B8%D0%BA-html/#pre»>Предварительно форматированный текст <pre></pre></a>

</p>
</body>
</html>

Ссылки

С помощью тега
<a>…</a> вставляются ссылки. Адрес перехода указывается в атрибуте
href, а текст ссылки пишется внутри тега:

XHTML

<a href=»http://yandex.ru»>Яндекс</a>

1	<a href=»http://yandex.ru»>Яндекс</a>

Можно делать ссылки на конкретное место в документе, тогда браузер будет прокручивать страницу до этого места. Для этого нужно сначала сделать якорь в этом месте с помощью атрибута
name:

XHTML

1	<a name=»myplace1″></a>

Теперь можно сделать ссылку на это место. Для этого нужно использовать адрес
<адрес_страницы>#myplace1. Если якорь находится на той же самой странице, то адрес страницы можно опустить.

Либо вместо якоря через тег
<a>…</a> можно использовать идентификаторы элементов. Например, если есть div с
id=»mydiv1″, то ссылку можно делать вот так (но этот способ считается устаревшим):

XHTML

<div id=»mydiv1″>
</div>
<a href=»#mydiv1″>К моему div-у</a>

1
2
3

</div>

<a href=»#mydiv1″>К моему div-у</a>

Пример:

index.html

XHTML

<!DOCTYPE html>
<html>
<head>
<title>HTML a example</title>
<meta http-equiv=»Content-Type» content=»text/html;charset=utf-8″>
</head>
</body>
<p>
<a name=»firstp»></a>
Первый абзац.
</p>
<p>
<a name=»secondp»></a>
Второй абзац.
</p>
<p>
<a name=»infotext»></a>
Может показаться, что переход по ссылкам в этой странице не работает. Но это не так.
Попробуйте уменьшить размер окна браузера на столько, чтобы страница не помещалась в него целиком без полос прокрутки.
</p>
<p>
<a href=»#firstp»>К первому абзацу</a>
</p>
<p>
<a href=»https://urvanov.ru/projects/html-examples/a/#secondp»>Ко второму абзацу</a>
</p>
<p>
<a href=»#infotext»>К третьему абзацу</a>
</p>
<p>
<a href=»http://yandex.ru»>Яндекс</a>
</p>
<p>
<a href=»https://urvanov.ru/2016/03/02/%D1%83%D1%87%D0%B5%D0%B1%D0%BD%D0%B8%D0%BA-html/#a»>Ссылки <a></a></a>
</p>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

<!DOCTYPE html>
<html>
<head>

<title>HTML a example</title>

</head>
</body>
<p>

Первый абзац.
</p>
<p>

Второй абзац.
</p>
<p>

Может показаться, что переход по ссылкам в этой странице не работает. Но это не так.
Попробуйте уменьшить размер окна браузера на столько, чтобы страница не помещалась в него целиком без полос прокрутки.
</p>
<p>

<a href=»#firstp»>К первому абзацу</a>

</p>
<p>

<a href=»https://urvanov.ru/projects/html-examples/a/#secondp»>Ко второму абзацу</a>

</p>
<p>

<a href=»#infotext»>К третьему абзацу</a>

</p>
<p>

<a href=»http://yandex.ru»>Яндекс</a>

</p>
<p>

<a href=»https://urvanov.ru/2016/03/02/%D1%83%D1%87%D0%B5%D0%B1%D0%BD%D0%B8%D0%BA-html/#a»>Ссылки <a></a></a>

</p>
</body>
</html>

HTML Упражнения

HTML Теги списка

Вопросы для самоконтроля

HTML Теги списка

Вопросы для самоконтроля

Еще примеры

Пример

Пример

Пример

Пример

Резюме раздела

HTML Tags

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

Часть текста

More Examples

Example

Example

Example

Example

Заголовки

h1

h2

h3

h4-h6

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

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

Пример: Нумерованный список

Пример: Применение атрибутов type и start.

Пример: Применение атрибута value

Специальные символы

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

Предварительно форматированный текст

Ссылки

Похожие записи:

Похожие записи: