Тег <listing> выводил листинг программы: текст моноширинным шрифтом уменьшенного размера, с сохранением строк. Тег парный, закрывающий тег </listing> нужен. Он был в ранних версиях HTML, HTML 3.2 уже называл его устаревшим, а HTML 4.0 убрал совсем. Сегодня стандарт запрещает тег, но требует от браузеров обращаться с ним как с <pre>.
<listing>
a = 1
b = 2
</listing>В этой статье
Что делал тег listing и чем он отличается от pre
Задумывался listing для вставки кода в страницу. Своего вида у него в браузере нет: он выглядит и ведёт себя как pre. Класс тега тот же, HTMLPreElement, и стили те же.
Пример: listing и pre рядом
Кнопки выбирают текст. В рамке два блока с одним и тем же текстом: сначала listing, потом pre. Под рамкой записаны класс, показ, шрифт, пробелы, отступы и высота обоих.
Показ block, шрифт monospace размером 13px, пробелы pre, отступы сверху и снизу по 13px. Высота у обоих тегов одинаковая.
Пробелы и переносы строк внутри listing
Как и в pre, пробелы и переносы строк внутри listing сохраняются, а длинная строка не переносится и выходит за край блока. Чтобы появилась прокрутка, нужен overflow: auto в CSS. Одно исключение: перевод строки сразу после открывающего тега браузер отбрасывает, поэтому текст можно начинать с новой строки без пустой строки сверху.
Пример: пробелы, переносы и длинная строка
Кнопки выбирают текст, запись показана над рамкой. Под рамкой записаны число строк, начало текста, сохранён ли отступ, высота и наличие горизонтальной прокрутки.
В первом варианте текст начинается со слова «Первая», пустой строки перед ним нет. Во втором отступ перед b() остался. В третьем строка не переносится, а прокрутка появилась из-за overflow: auto в стиле демо.
Теги внутри listing и listing внутри абзаца
Теги внутри listing работают: b делает слово жирным, a даёт ссылку. Знак меньше в тексте нужно писать сущностью <. Если записать <span> прямо в тексте, браузер сочтёт его тегом, и слово span на экране не появится. А listing внутри p закрывает абзац, как любой блочный тег.
Пример: что внутри listing и вокруг него
Кнопки выбирают разметку, запись показана над рамкой. Под рамкой записаны число дочерних тегов, видимый текст и для абзаца родитель тега.
Три тега остаются тегами, сущности превращаются в знаки, а запись span в тексте не видна. Абзац заканчивается перед listing.
Чем заменить тег listing: pre и code
Для показа кода берут pre с вложенным code: pre хранит строки и отступы, а code сообщает, что внутри код. Один code годится для короткой записи в абзаце: он строчный и переносы строк не сохраняет. Размер и название шрифта задают в CSS через font-size и font-family.
<pre><code>a = 1
b = 2</code></pre>Пример: pre и code вместо listing
Кнопки выбирают тег, запись показана над рамкой. Под рамкой записаны класс тега, показ, пробелы, шрифт и сохранены ли переносы строк.
Обычный pre и pre с code выглядят как listing, а один code склеивает две строки в одну.
