HTML - основные теги языка

HTML-теги

HTML-теги — основа языка HTML. Теги используются для разграничения начала и конца элементов в разметке.

Каждый HTML-документ состоит из дерева HTML-элементов и текста. Каждый HTML-элемент обозначается начальным (открывающим) и конечным (закрывающим) тегом. Открывающий и закрывающий теги содержат имя тега.

Все HTML-элементы делятся на пять типов:

  • пустые элементы — <area>, <base>, <br>, <col>, <embed>, <hr>, <img>, <input>, , <link>, <menuitem>, <meta>, <param>, <source>, <track>, <wbr>;
  • элементы с неформатированным текстом - <script>, <style>;
  • элементы, выводящие неформатированный текст - <textarea>, <title>;
  • элементы из другого пространства имён - MathML и SVG;
  • обычные элементы - все остальные элементы.
В таблице приведен полный список элементов, поддерживаемых HTML4 и HTML5. Экспериментальные и устаревшие теги исключены. Элементы, добавленные в спецификацию HTML5, выделены бирюзовым цветом.

Полный список HTML-элементов


Таблица 1. HTML-элементы
Тег Описание
<!--...--> Используется для добавления комментариев.
<!DOCTYPE> Объявляет тип документа и предоставляет основную информацию для браузера - его язык и версия.
<a> Создаёт гипертекстовые ссылки.
<abbr> Определяет текст как аббревиатуру или акроним. Поясняющий текст задаётся с помощью атрибута title.
<address> Задает контактные данные автора/владельца документа или статьи. Отображается в браузере курсивом.
<area> Представляет собой гиперссылку с текстом, соответствующей определенной области на карте-изображении или активную область внутри карты-изображения. Всегда вложен внутрь тега <map>.
<article> Раздел контента, который образует независимую часть документа или сайта, например, статья в журнале, запись в блоге, комментарий.
<aside> Представляет контент страницы, который имеет косвенное отношение к основному контенту страницы/сайта.
<audio> Загружает звуковой контент на веб-страницу.
<b> Задает полужирное начертание отрывка текста, не придавая акцент или важность выделенному.
<base> Задает базовый адрес (URL), относительно которого вычисляются все относительные адреса. Это поможет избежать проблем при переносе страницы в другое место, так как все ссылки будут работать, как и прежде.
<bdi> Изолирует отрывок текста, написанный на языке, в котором чтение текста происходит справа налево, от остального текста.
<bdo> Отображает текст в направлении, указанном в атрибуте dir, переопределяя текущее направление написания текста.
<blockquote> Выделяет текст как цитату, применяется для описания больших цитат.
<body> Представляет тело документа (содержимое, не относящееся к метаданным документа).
<br> Перенос текста на новую строку.
<button> Создает интерактивную кнопку. Внутрь тега можно поместить содержимое - текст или изображение.
<canvas> Холст-контейнер для динамического отображения изображений, таких как простые изображения, диаграммы, графики и т.п. Для рисования используется скриптовый язык JavaScript.
<caption> Добавляет подпись к таблице. Вставляется сразу после тега <table>.
<cite> Используется для указания источника цитирования. Отображается курсивом.
<code> Представляет фрагмент программного кода, отображается шрифтом семейства monospace.
<col> Выбирает для форматирования один или несколько столбцов таблицы, не содержащих информацию одного типа.
<colgroup> Создает структурную группу столбцов, выделяющую множество логически однородных ячеек.
<data> Элемент используется для связывания значения атрибута value, которое представлено в машиночитаемом формате и может быть обработано компьютером, с содержимым тега.
<datalist> Элемент-контейнер для выпадающего списка элемента <input>. Варианты значений помещаются в элементы <option>.
<dd> Используется для описания термина из тега <dt>.
<del> Помечает текст как удаленный, перечёркивая его.
<details> Создаёт интерактивный виджет, который пользователь может открыть или закрыть. Представляет собой контейнер для контента, видимый заголовок виджета помещается в тег <summary>.
<dfn> Определяет слово как термин, выделяя его курсивом. Текст, идущий следом, должен содержать расшифровку этого термина.
<dialog> Интерактивный элемент, с которым взаимодействует пользователь для выполнения задачи, например, диалоговое окно, инспектор или окно. Без атрибута open не виден для пользователя.
<div> Тег-контейнер для разделов HTML-документа. Используется для группировки блочных элементов с целью форматирования стилями.
<dl> Тег-контейнер, внутри которого находятся термин и его описание.
<dt> Используется для задания термина.
<em> Выделяет важные фрагменты текста, отображая их курсивом.
<embed> Тег-контейнер для встраивания внешнего интерактивного контента или плагина.
<fieldset> Группирует связанные элементы в форме, рисуя рамку вокруг них.
<figcaption> Заголовок/подпись для элемента <figure>.
<figure> Самодостаточный тег-контейнер для такого контента как иллюстрации, диаграммы, фотографии, примеры кода, обычно с подписью.
<footer> Определяет завершающую область (нижний колонтитул) документа или раздела.
<form> Форма для сбора и отправки на сервер информации от пользователей. Не работает без атрибута action.
<h1-h6> Создают заголовки шести уровней для связанных с ними разделов.
<head> Элемент-контейнер для метаданных HTML-документа, таких как<title>, <meta>, <script>, <link>, <style>.
<header> Секция для вводной информации сайта или группы навигационных ссылок. Может содержать один или несколько заголовков, логотип, информацию об авторе.
<hr> Горизонтальная линия для тематического разделения параграфов.
<html> Корневой элемент HTML-документа. Сообщает браузеру, что это HTML-документ. Является контейнером для всех остальных html-элементов.
<i> Выделяет отрывок текста курсивом, не придавая ему дополнительный акцент.
<iframe> Создает встроенный фрейм, загружая в текущий HTML-документ другой документ.
<img> Встраивает изображения в HTML-документ с помощью атрибута src, значением которого является адрес встраиваемого изображения.
<input> Создает многофункциональные поля формы, в которые пользователь может вводить данные.
<ins> Выделяет текст подчеркиванием. Применяется для выделения изменений, вносимых в документ.
<kbd> Выделяет текст, который должен быть введён пользователем с клавиатуры, шрифтом семейства monospace.
<label> Добавляет текстовую метку для элемента <input>.
<legend> Заголовок элементов формы, сгруппированных с помощью элемента <fieldset>.
<li> Элемент маркированного или нумерованного списка.
<link> Определяет отношения между документом и внешним ресурсом. Также используется для подключения внешних таблиц стилей.
<main> Контейнер для основного уникального содержимого документа. На одной странице должно быть не более одного элемента <main>.
<map> Создаёт активные области на карте-изображении. Является контейнером для элементов <area>.
<mark> Выделяет фрагменты текста, помечая их желтым фоном.
<meta> Используется для хранения дополнительной информации о странице. Эту информацию используют браузеры для обработки страницы, а поисковые системы — для ее индексации. В блоке <head> может быть несколько тегов <meta>, так как в зависимости от используемых атрибутов они несут разную информацию.
<meter> Индикатор измерения в заданном диапазоне.
<nav> Раздел документа, содержащий навигационные ссылки по сайту.
<noscript> Определяет секцию, не поддерживающую сценарий (скрипт).
<object> Контейнер для встраивания мультимедиа (например, аудио, видео, Java-апплеты, ActiveX, PDF и Flash). Также можно вставить другую веб-страницу в текущий HTML-документ. Для передачи параметров встраиваемого плагина используется тег <param>.
<ol> Упорядоченный нумерованный список. Нумерация может быть числовая или алфавитная.
<optgroup> Контейнер с заголовком для группы элементов <option>.
<option> Определяет вариант/опцию для выбора в раскрывающемся списке <select>, <optgroup> или <datalist>.
<output> Поле для вывода результата вычисления, рассчитанного с помощью скрипта.
<p> Параграфы в тексте.
<param> Определяет параметры для плагинов, встраиваемых с помощью элемента <object>.
<picture> Элемент-контейнер, содержащий один элемент <img> и ноль или несколько элементов <source>. Сам по себе ничего не отображает. Дает возможность браузеру выбирать наиболее подходящее изображение.
<pre> Выводит текст без форматирования, с сохранением пробелов и переносов текста. Может быть использован для отображения компьютерного кода, сообщения электронной почты и т.д.
<progress> Индикатор выполнения задачи любого рода.
<q> Определяет краткую цитату.
<ruby> Контейнер для Восточно-Азиатских символов и их расшифровки.
<rb> Определяет вложенный в него текст как базовый компонент аннотации.
<rt> Добавляет краткую характеристику сверху или снизу от символов, заключенных в элементе <ruby>, выводится уменьшенным шрифтом.
<rtc> Отмечает вложенный в него текст как дополнительную аннотацию.
<rp> Выводит альтернативный текст в случае если браузер не поддерживает элемент <ruby>.
<s> Отображает текст, не являющийся актуальным, перечеркнутым.
<samp> Используется для вывода текста, представляющего результат выполнения программного кода или скрипта, а также системные сообщения. Отображается моноширинным шрифтом.
<script> Используется для определения сценария на стороне клиента (обычно JavaScript). Содержит либо текст скрипта, либо указывает на внешний файл сценария с помощью атрибута src.
<section> Определяет логическую область (раздел) страницы, обычно с заголовком.
<select> Элемент управления, позволяющий выбирать значения из предложенного множества. Варианты значений помещаются в <option>.
<small> Отображает текст шрифтом меньшего размера.
<source> Указывает местоположение и тип альтернативных медиаресурсов для элементов <picture>, <video>, <audio>.
<span> Контейнер для строчных элементов. Можно использовать для форматирования отрывков текста, например, выделения цветом отдельных слов.
<strong> Расставляет акценты в тексте, выделяя полужирным.
<style> Подключает встраиваемые таблицы стилей.
<sub> Задает подстрочное написание символов, например, индекса элемента в химических формулах.
<summary> Создаёт видимый заголовок для тега <details>. Отображается с закрашенным треугольником, кликнув по которому можно просмотреть подробности заголовка.
<sup> Задает надстрочное написание символов.
<table> Тег для создания таблицы.
<tbody> Определяет тело таблицы.
<td> Создает ячейку таблицы.
<template> Используется для объявления фрагментов HTML-кода, которые могут быть клонированы и вставлены в документ скриптом. Содержимое тега не является его дочерним элементом.
<textarea> Создает большие поля для ввода текста.
<tfoot> Определяет нижний колонтитул таблицы.
<th> Создает заголовок ячейки таблицы.
<thead> Определяет заголовок таблицы.
<time> Определяет дату/время.
<title> Заголовок HTML-документа, отображаемый в верхней части строки заголовка браузера. Также может отображаться в результатах поиска, поэтому это следует принимать во внимание предоставление названия.
<tr> Создает строку таблицы.
<track> Добавляет субтитры для элементов <audio> и <video>.
<u> Выделяет отрывок текста подчёркиванием, без дополнительного акцента.
<ul> Создает маркированный список.
<var> Выделяет переменные из программ, отображая их курсивом.
<video> Добавляет на страницу видео-файлы. Поддерживает 3 видео формата: MP4, WebM, Ogg.
<wbr> Указывает браузеру возможное место разрыва длинной строки.

Таблица-шпаргалка с тегами

Для удобства пользования я сгруппировала теги по тематическим разделам, добавив значения свойства display для каждого тега. Чтобы перейти к таблице, кликните по рисунку.

Рис. 1. Тематическая таблица тегов
Share:

HTML - изображения

HTML-изображения

HTML-изображения добавляются на веб-страницы с помощью тега <img>. Использование графики делает веб-страницы визуально привлекательнее. Изображения помогают лучше передать суть и содержание веб-документа.

С помощью HTML-тегов <map> и <area> можно создавать карты-изображения с активными областями.

1. Тег <img>

Элемент <img> представляет изображение и его резервный контент, который добавляется с помощью атрибута alt. Так как элемент <img> является строчным, то рекомендуется располагать его внутри блочного элемента, например, <p> или <div>.

Тег <img> имеет обязательный атрибут src, значением которого является абсолютный или относительный путь к изображению: 

<img src="image.png" alt="Пример кода">
HTML

Для тега <img> доступны следующие атрибуты:

Таблица 1. Атрибуты тега <img>
Атрибут Описание, принимаемое значение
alt Атрибут alt добавляет альтернативный текст для изображения. Выводится на месте появления изображения до его загрузки или при отключенной графике, а также выводится всплывающей подсказкой при наведении курсора мыши на изображение.
Синтаксис: alt="описание изображения".
crossorigin Атрибут crossorigin позволяет загружать изображения с ресурсов другого домена с помощью CORS-запросов. Изображения, загруженные в холст с помощью CORS-запросов, могут быть использованы повторно. Допускаемые значения:
anonymous — Cross-origin запрос выполняется с помощью HTTP-заголовка, при этом учетные данные не передаются. Если сервер не даёт учетные данные серверу, с которого запрашивается контент, то изображение будет испорчено и его использование будет ограничено.
use-credentials — Cross-origin запрос выполняется с передачей учетных данных.
Синтаксис: crossorigin="anonymous".
height Атрибут height задает высоту изображения в px.
Синтаксис: height="300".
ismap Атрибутismap указывает на то, что картинка является частью изображения-карты, расположенного на сервере (изображение-карта — изображение с интерактивными областями). При нажатии на изображение-карту координаты передаются на сервер в виде строки запроса URL-адреса. Атрибут ismap допускается только в случае, если элемент <img> является потомком элемента <a> с действительным атрибутом href.
Синтаксис: ismap.
longdesc URL расширенного описания изображения, дополняющее атрибут alt.
Синтаксис: longdesc="http://www.example.com/description.txt".
src Атрибут src задает путь к изображению.
Синтаксис: src="flower.jpg".
sizes Задаёт размер изображения в зависимости от параметров отображения. Работает только при заданном атрибуте srcset. Значением атрибута является одна или несколько строк, указанных через запятую.
srcset Создаёт список источников для изображения, которые будут выбраны, исходя из разрешения экрана. Может использоваться вместе или вместо атрибута src. Значением атрибута является одна или несколько строк, разделенных запятой.

<img src="flower.jpg"
  srcset="
    img/flower-mobile.jpg 320w,
    img/flower-wide-mobile.jpg 480w,
    img/flower-tablet.jpg 768w,
    img/flower-desktop.jpg 1024w,
    img/flower-hires.jpg 1280w"
  sizes="
    (max-width: 20em) 30vw,
    (max-width: 30em) 60vw,
    (max-width: 40em) 90vw"
  alt="Роза в моём саду">
HTML
usemap Атрибут usemap определяет изображение в качестве карты-изображения. Значение обязательно должно начинаться с символа #. Значение ассоциируется со значением атрибута name или id тега <map> и создает связь между элементами <img> и <map>. Атрибут нельзя использовать, если элемент <map> является потомком элемента <a> или <button>.
Синтаксис: usemap="#mymap".
width Атрибут width задает ширину изображения в px.
Синтаксис: width="500".

1.1. Адрес изображения

Адрес изображения может быть указан полностью (абсолютный URL), например:
url(http://anysite.ru/images/anyphoto.png)

Или же через относительный путь от документа или корневого каталога сайта:
url(../images/anyphoto.png) — относительный путь от документа,
url(/images/anyphoto.png) — относительный путь от корневого каталога.

Это интерпретируется следующим образом:
../ — означает подняться вверх на один уровень, к корневому каталогу,
images/ — перейти к папке с изображениями,
anyphoto.png — указывает на файл изображения.

1.2. Размеры изображения

Без задания размеров изображения рисунок отображается на странице в реальном размере. Отредактировать размеры изображения можно с помощью атрибутов width и height. Если будет задан только один из атрибутов, то второй будет вычисляться автоматически для сохранения пропорций рисунка.

1.3. Форматы графических файлов

Формат JPEG (Joint Photographic Experts Group). Изображения JPEG идеальны для фотографий, они могут содержать миллионы различных цветов. Сжимают изображения лучше GIF, но текст и большие площади со сплошным цветом могут покрыться пятнами.

Формат GIF (Graphics Interchange Format). Идеален для сжатия изображений, в которых есть области со сплошным цветом, например, логотипов. GIF-файлы позволяют установить один из цветов прозрачным, благодаря чему фон веб-страницы может проявляться через часть изображения. Также GIF-файлы могут включать в себя простую анимацию. GIF-изображения содержат всего лишь 256 оттенков, из-за чего изображения выглядят пятнистыми и нереалистичного цвета, как плакаты.

Формат PNG (Portable Network Graphics). Включает в себя лучшие черты GIF- и JPEG-форматов. Содержит 256 цветов и дает возможность сделать один из цветов прозрачным, при этом сжимает изображения в меньший размер, чем GIF-файл.

Формат APNG (Animated Portable Network Graphics). Формат изображения, основанный на формате PNG. Позволяет хранить анимацию, а также поддерживает прозрачность.

Формат SVG (Scalable Vector Graphics). SVG-рисунок состоит из набора геометрических фигур, описанных в формате XML: линия, эллипс, многоугольник и т.п. Поддерживается как статичная, так и анимированная графика. Набор функций включает в себя различные преобразования, альфа-маски, эффекты фильтров, возможность использования шаблонов. Изображения в формате SVG могут изменяться в размере без снижения качества.

Формат BMP (Bitmap Picture). Представляет собой несжатое (оригинальное) растровое изображение, шаблоном которого является прямоугольная сетка пикселей. Bitmap-файл состоит из заголовка, палитры и графических данных. В заголовке хранится информация о графическом изображении и файле (глубина пикселей, высота, ширина и количество цветов). Палитра указывается только в тех Bitmap-файлах, которые содержат палитровые изображения (8 и менее бит) и состоят не более чем из 256 элементов. Графические данные представляют саму картинку. Глубина цвета в данном формате может быть 1, 2, 4, 8, 16, 24, 32, 48 бит на пиксель.

Формат ICO (Windows icon). Формат хранения значков файлов в Microsoft Windows. Также, Windows icon, используется как иконка на сайтах в интернете. Именно картинка такого формата отображается рядом с адресом сайта или закладкой в браузере. Один ICO-файл содержит один или несколько значков, размер и цветность каждого из которых задаётся отдельно. Размер значка может быть любым, но наиболее употребимы квадратные значки со сторонами 16, 32 и 48 пикселей.

2. Тег <map>

Тег <map> служит для представления графического изображения в виде карты с активными областями. Активные области определяются по изменению вида курсора мыши при наведении. Щелкая мышью на активных областях, пользователь может переходить к связанным документам.

Для тега доступен атрибут name, который задает имя карты. Значение атрибут name для тега <map> должно соответствовать имени в атрибуте usemap элемента <img>: 

<img src="url" usemap="#имя_карты">
<map name="имя_карты">
...
</map>
HTML

Элемент <map> содержит ряд элементов <area>, определяющих интерактивные области в изображении карты.

3. Тег <area>

Тег <area> описывает только одну активную область в составе карты изображений на стороне клиента. Элемент не имеет закрывающего тега. Если одна активная область перекрывает другую, то будет реализована первая ссылка из списка областей. 

<map name="имя_карты">
<area атрибуты>
</map>
HTML
Таблица 2. Атрибуты тега <area>
Атрибут Краткое описание
alt Задает альтернативный текст для активной области карты.
coords Определяет позицию области на экране. Координаты задаются в единицах длины и разделяются запятыми:
для круга — координаты центра и радиус круга;
для прямоугольника — координаты верхнего левого и правого нижнего углов;
для многоугольника — координаты вершин многоугольника в нужном порядке, также рекомендуется указывать последние координаты, равные первым, для логического завершения фигуры.
download Дополняет атрибут href и сообщает браузеру, что ресурс должен быть загружен в момент, когда пользователь щелкает по ссылке, вместо того, чтобы, например, предварительно открыть его (как PDF-файл). Задавая имя для атрибута, мы таким образом задаем имя загружаемому объекту. Разрешается использовать атрибут без указания его значения.
href Указывает URL-адрес для ссылки. Может быть указан абсолютный или относительный адрес ссылки.
hreflang Определяет язык связанного веб-документа. Используется только вместе с атрибутом href. Принимаемые значения — аббревиатура, состоящая из пары букв, обозначающих код языка.
media Определяет, для каких типов устройств файл будет оптимизирован. Значением может быть любой медиа-запрос.
rel Дополняет атрибут href информацией об отношении между текущим и связанным документом. Принимаемые значения:
alternate — ссылка на альтернативную версию документа (например, печатную форму страницы, перевод или зеркало).
author — ссылка на автора документа.
bookmark — постоянный URL-адрес, используемый для закладок.
help — ссылка на справку.
license — ссылка на информацию об авторских правах на данный веб-документ.
next/prev — указывает связь между отдельными URL. Благодаря этой разметке Google может определить, что содержание данных страниц связано в логической последовательности.
nofollow — запрещает поисковой системе переходить по ссылкам на данной странице или по конкретной ссылке.
noreferrer — указывает, что переходе по ссылке браузер не должен посылать заголовок HTTP-запроса (Referrer), в который записывается информация о том, с какой страницы пришел посетитель сайта.
prefetch — указывает, что целевой документ должен быть кэширован, т.е. браузер в фоновом режиме загружает содержимое страницы к себе в кэш.
search — указывает, что целевой документ содержит инструмент для поиска.
tag — указывает ключевое слово для текущего документа.
shape Задает форму активной области на карте и ее координаты. Может принимать следующие значения:
rect — активная область прямоугольной формы;
circle — активная область в форме круга;
poly — активная область в форме многоугольника;
default — активная область занимает всю площадь изображения.
target Указывает, куда будет загружен документ при переходе по ссылке. Принимает следующие значения:
_self — страница загружается в текущее окно;
_blank — страница открывается в новом окне браузера;
_parent — страница загружается во фрейм-родитель;
_top — страница загружается в полное окно браузера.
type Указывает MIME-тип файлов ссылки, т.е. расширение файла.

4. Пример создания карты-изображения

1) Размечаем исходное изображение на активные области нужной формы. Координаты областей можно вычислить с помощью программы для обработки фотографий, например, Adobe Photoshop или Paint.

image-map
Рис. 1. Пример разметки изображения для создания карты

2) Задаем имя карты, добавив его в тег <map> с помощью атрибута name. Это же значение присваиваем атрибуту usemap тега <img>.

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

<img src="https://html5book.ru/wp-content/uploads/2014/12/flowers_foto.jpg" alt="flowers_foto" width="680" height="383" usemap="#flowers">
<map name="flowers">
<area shape="circle" coords="70,164,50" href="https://ru.wikipedia.org/wiki/Гербера" alt="gerbera" target="_blank"> 
<area shape="poly" coords="191,13,240,98,143,98,191,13" href="https://ru.wikipedia.org/wiki/%C3%E8%E0%F6%E8%ED%F2" alt="hyacinth" target="_blank"> 
<area shape="circle" coords="318,93,50" href="https://ru.wikipedia.org/wiki/Ромашка" alt="camomiles" target="_blank"> 
<area shape="circle" coords="425,129,45" href="https://ru.wikipedia.org/wiki/Нарцисс_(растение)" alt="narcissus" target="_blank"> 
<area shape="rect" coords="480,3,572,89" href="https://ru.wikipedia.org/wiki/Тюльпан" alt="tulip" target="_blank"> 
</map>
HTML
flowers_foto
Рис. 2. Пример создания карты-изображения, при нажатии курсора мыши на цветок осуществляется переход на страницу с описанием
gerbera hyacinth camomiles narcissus tulip
Share:

HTML-списки


 HTML-списки

HTML-списки используются для группировки связанных между собой фрагментов информации. Существует три вида списков:
маркированный список — <ul> — каждый элемент списка <li> отмечается маркером,
нумерованный список — <ol> — каждый элемент списка <li> отмечается цифрой,
список определений — <dl> — состоит из пар термин <dt> — <dd> определение.
Каждый список представляет собой контейнер, внутри которого располагаются элементы списка или пары термин-определение. Элементы списка ведут себя как блочные элементы, располагаясь друг под другом и занимая всю ширину блока-контейнера. Каждый элемент списка имеет дополнительный блок, расположенный сбоку, который не участвует в компоновке.

1. Маркированный список

Маркированный список представляет собой неупорядоченный список (от англ. Unordered List). Создаётся с помощью парного тега <ul></ul>. В качестве маркера элемента списка выступает метка, например, закрашенный кружок.
Браузеры по умолчанию добавляют следующее форматирование блоку списка: 
ul {padding-left: 40px; margin-top: 1em; margin-bottom: 1em;}
CSS
Каждый элемент списка создаётся с помощью парного тега <li></li> (от англ. List Item).
Для тега <ul> доступны ‎глобальные атрибуты.
<ul>
  <li>Microsoft</li>
  <li>Google</li>
  <li>Apple</li>
  <li>IBM</li>
</ul>
HTML
unordered list
Рис. 1. Маркированный список

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

Нумерованный список создаётся с помощью парного тега <ol></ol>. Каждый пункт списка также создаётся с помощью элемента <li>. Браузер нумерует элементы по порядку автоматически и если удалить один или несколько элементов такого списка, то остальные номера будут автоматически пересчитаны.
Блок списка также имеет стили браузера по умолчанию: 
ol {padding-left: 40px; margin-top: 1em; margin-bottom: 1em;}
CSS
Для тега <li> доступен атрибут value, который позволяет изменить номер по умолчанию для выбранного элемента списка. Например, если для первого пункта списка задать <li value="10">, то остальная нумерация будет пересчитана относительно нового значения.
Для тега <ol> доступны следующие атрибуты:
Таблица 1. Атрибуты тега <ol>
Атрибут Описание, принимаемое значение
reversed Атрибут reversed задает отображение списка в обратном порядке (например, 9, 8, 7…).
start Атрибут start задает начальное значение, от которого пойдет отсчет нумерации, например, конструкция <ol start="10"> первому пункту присвоит порядковый номер «10». Также можно одновременно задавать тип нумерации, например, <ol type="I" start="10">.
type Атрибут type задает вид маркера для использования в списке (в виде букв или цифр). Принимаемые значения:
1 — значение по умолчанию, десятичная нумерация.
A — нумерация списка в алфавитном порядке, заглавные буквы (A, B, C, D).
a — нумерация списка в алфавитном порядке, строчные буквы (a, b, c, d).
I — нумерация римскими заглавными цифрами (I, II, III, IV).
i — нумерация римскими строчными цифрами (i, ii, iii, iv). 
<ol>
  <li>Microsoft</li>
  <li>Google</li>
  <li>Apple</li>
  <li>IBM</li>
</ol>
HTML
ordered list
Рис. 2. Нумерованный список

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

Списки определений создаются с помощью тега <dl></dl>. Для добавления термина применяется тег <dt></dt>, а для вставки определения — тег <dd></dd>.
Блок списка определений имеет следующие стили браузера по умолчанию: 
dl {margin-top: 1em; margin-bottom: 1em;}
CSS
Для тегов <dl>, <dt> и <dd> доступны ‎глобальные атрибуты.
<dl>
  <dt>Режиссер:</dt>
    <dd>Петр Точилин</dd>
  <dt>В ролях:</dt>
    <dd>Андрей Гайдулян</dd>
    <dd>Алексей Гаврилов</dd>
    <dd>Виталий Гогунский</dd>
    <dd>Мария Кожевникова</dd>
</dl>
HTML
dl
Рис. 3. Список определений

4. Вложенный список

Зачастую возможностей простых списков не хватает, например, при создании оглавления никак не обойтись без вложенных пунктов. Разметка для вложенного списка будет следующей:
<ul>
 <li>Пункт 1.</li>
  <li>Пункт 2.
    <ul>
      <li>Подпункт 2.1.</li>
       <li>Подпункт 2.2.     
        <ul>
          <li>Подпункт 2.2.1.</li>
          <li>Подпункт 2.2.2.</li>
          </ul>
       </li>          
      <li>Подпункт 2.3.</li>
    </ul>
  </li>
 <li>Пункт 3.</li>
</ul>
HTML
ul ul ul
Рис. 4. Вложенный список

5. Многоуровневый нумерованный список

Многоуровневый список используется для отображения элементов списка на разных уровнях с различными отступами. Разметка для многоуровневого нумерованного списка будет следующей:
<ol>
  <li>пункт</li> <!-1.->
  <li>пункт           
    <ol>
      <li>пункт</li> <!-2.1.->
      <li>пункт</li> <!-2.2.->
      <li>пункт
        <ol>
          <li>пункт</li> <!-2.3.1.->
          <li>пункт</li> <!-2.3.2.->
          <li>пункт</li> <!-2.3.3.-> 
        </ol>
      </li> <!-2.3.->
      <li>пункт</li> <!-2.4.->  
    </ol>
  </li> <!-2.->
  <li>пункт</li> <!-3.->        
  <li>пункт</li> <!-4.->        
</ol>
HTML
Такая разметка по умолчанию создаст для каждого вложенного списка новую нумерацию, начинающуюся с единицы. Чтобы сделать вложенную нумерацию, нужно использовать следующие свойства:
counter-reset сбрасывает один или несколько счётчиков, задавая значение для сброса;
counter-increment задаёт значение приращения счётчика, т.е. с каким шагом будет нумероваться каждый последующий пункт;
content — генерируемое содержимое, в данном случае отвечает за вывод номера перед каждым пунктом списка.
ol {
/* убираем стандартную нумерацию */
list-style: none; 
/* Идентифицируем счетчик и даем ему имя li. Значение счетчика не указано - по умолчанию оно равно 0 */ 
counter-reset: li; 
}
li:before {
/* Определяем элемент, который будет нумероваться — li. Псевдоэлемент before указывает, что содержимое, вставляемое при помощи свойства content, будет располагаться перед пунктами списка. Здесь же устанавливается значение приращения счетчика (по умолчанию равно 1). */
counter-increment: li; 
/* С помощью свойства content выводится номер пункта списка. counters() означает, что генерируемый текст представляет собой значения всех счетчиков с таким именем. Точка в кавычках добавляет разделяющую точку между цифрами, а точка с пробелом добавляется перед содержимым каждого пункта списка */
content: counters(li,".") ". "; 
}
CSS
numeric list
Рис. 5. Многоуровневый нумерованный список
Share:
Read More