1.2. HTML теги

html_tagsHTML теги — основа языка HTML. Каждый тег несет в себе определенную информацию, может описывать документ в общем или способ форматирования текста. Все содержимое веб-страницы задается с помощью тегов.
Тег помещается в угловые скобки <тег>. Чаще всего для тега задается парный закрывающий тег, но в некоторых случаях он отсутствует. Информация, заключенная между открывающим и закрывающим тегом, называется его контейнером.
В таблице приведен полный список тегов, поддерживаемых 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> Создает структурную группу столбцов, выделяющую множество логически однородных ячеек.
<datalist> Элемент-контейнер для выпадающего списка элемента <input>. Варианты значений помещаются в элементы <option>.
<dd> Используется для описания термина из тега <dt>.
<del> Помечает текст как удаленный, перечёркивая его.
<details> Создаёт интерактивный виджет, который пользователь может открыть или закрыть. Представляет собой контейнер для контента, видимый заголовок виджета помещается в тег <summary>.
<dfn> Определяет слово как термин, выделяя его курсивом. Текст, идущий следом, должен содержать расшифровку этого термина.
<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.
<keygen> Генерирует пару ключей — закрытый и открытый. При отправке формы, закрытый ключ хранится локально, и открытый ключ отправляется на сервер. Работает внутри тега <form>.
<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>.
<pre> Выводит текст без форматирования, с сохранением пробелов и переносов текста. Может быть использован для отображения компьютерного кода, сообщения электронной почты и т.д.
<progress> Индикатор выполнения задачи любого рода.
<q> Определяет краткую цитату.
<ruby> Контейнер для Восточно-Азиатских символов и их расшифровки.
<rb> Определяет вложенный в него текст как базовый компонент аннотации.
<rt> Добавляет краткую характеристику сверху или снизу от символов, заключенных в элементе <ruby>, выводится уменьшенным шрифтом.
<rtc> Отмечает вложенный в него текст как дополнительную аннотацию.
<rp> Выводит альтернативный текст в случае если браузер не поддерживает элемент <ruby>.
<s> Отображает текст, не являющийся актуальным, перечеркнутым.
<samp> Используется для вывода текста, представляющего результат выполнения программного кода или скрипта, а также системные сообщения. Отображается моноширинным шрифтом.
<script> Используется для определения сценария на стороне клиента (обычно JavaScript). Содержит либо текст скрипта, либо указывает на внешний файл сценария с помощью атрибута src.
<section> Определяет логическую область (раздел) страницы, обычно с заголовком.
<select> Элемент управления, позволяющий выбирать значения из предложенного множества. Варианты значений помещаются в <option>.
<small> Отображает текст шрифтом меньшего размера.
<source> Указывает местоположение и тип альтернативных медиа ресурсов для элементов <video> и <audio>.
<span> Контейнер для строчных элементов. Можно использовать для форматирования отрывков текста, например, выделения цветом отдельных слов.
<strong> Расставляет акценты в тексте, выделяя полужирным.
<style> Подключает встраиваемые таблицы стилей.
<sub> Задает подстрочное написание символов, например, индекса элемента в химических формулах.
<summary> Создаёт видимый заголовок для тега <details>. Отображается с закрашенным треугольником, кликнув по которому можно просмотреть подробности заголовка.
<sup> Задает надстрочное написание символов.
<table> Тег для создания таблицы.
<tbody> Определяет тело таблицы.
<td> Создает ячейку таблицы.
<textarea> Создает большие поля для ввода текста.
<tfoot> Определяет нижний колонтитул таблицы.
<th> Создает заголовок ячейки таблицы.
<thead> Определяет заголовок таблицы.
<time> Определяет дату/время.
<title> Заголовок html-документа, отображаемый в верхней части строки заголовка браузера. Также может отображаться в результатах поиска, поэтому это следует принимать во внимание предоставление названия.
<tr> Создает строку таблицы.
<track> Добавляет субтитры для элементов <audio> и <video>.
<u> Выделяет отрывок текста подчёркиванием, без дополнительного акцента.
<ul> Создает маркированный список.
<var> Выделяет переменные из программ, отображая их курсивом.
<video> Добавляет на страницу видео-файлы. Поддерживает 3 видео формата: MP4, WebM, Ogg.
<wbr> Указывает браузеру возможное место разрыва длинной строки.

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

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

html5-tags-table

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

Возможно, вас также заинтересует

  • Создание Сайтов

    Все хорошо, но нет визуальных примеров. Некоторые вещи, если с ними не сталкивался, не знаешь по сути, где их следует применять.

    • Область применения тегов разобрана в следующих статьях. Теги — контейнеры для содержимого, за визуальное отображение отвечают css-стили. Содержимое может добавляться непосредственно внутрь тега, между открывающим и закрывающим тегом (это парные теги) или через значение атрибута (непарные теги, например, элемент input).

      • Создание Сайтов

        Понятно.

  • Николай Малахов

    как стоит заучить эти теги или не стоит?

    • заучивать не стоит, разве что вам по ним какой-нибудь зачёт сдавать))
      всё запоминается само собой в процессе использования. это относится и к css-свойствам и к методам jquery и ко всему, касающемуся веб-разработки и любой другой предметной области.
      я подготовила хорошую шпаргалку по тегам, сгруппировав теги по разделам: текст, мультимедиа, таблицы и т.д., на днях опубликую.
      невозможно всё держать в голове, потому что в любом случае хорошо помнить вы будете лишь то, что чаще используете.

  • Chernov Vladimir

    Таблица аккуратная и удобная! Спасибо!

  • Andrey

    ОООгромное спасибище за таблицу!!

  • Радислав Ялилов

    Опечатка в таблице: тег html — display: bock;

  • Дмитрий Жулёв

    Здравствуйте, как обрезать длинное сообщение или пост как в Blogger. Пишу в редакторе (всё получается) и отправляю в блог. Как написать этот код? Спасибо

    • Здравствуйте. Уточните, пожалуйста, вас интересует как обрезать текст сообщения в Blogger? Как именно вы пишите в редакторе? В текстовом редакторе или во встроенном редакторе движка? Дело в том, что на блоговых движках обычно есть кнопка обрезки или «more». А страница с анонсами статей (например в вордпресс) выводит для каждой статьи определенное количество слов, которое задаётся в файле function.php.

      • Дмитрий Жулёв

        Пишу из приложения для Android (Bloggeroid). Кнопок там нет, кроме локации. Пишу коды сам для audiо, текста (это получается). Да на сайте есть кнопка обрезки, мне-же нужно как я понимаю написать для этого правильно код. И обрезать всё что захочу, не обязательно текст. Получится? Спасибо Вам

  • Александр Тимощенко

    Елена, подскажите. Читаю курс Ваш, всё понятно, но нет ли видео наглядного для закрепления так сказать? Просто мне лично — видео доходит лучше =)

    • Видео нет((

      • Александр Тимощенко

        Жаль) Будем читать пока не дойдет =)

        • Хочу вас успокоить, когда я учила, с первого раза и до меня не дошло 😉 Должно пройти некоторое время, поэтому просто читайте и пробуйте набирать теги в визуальном редакторе, добавляйте им содержимое, задавайте элементам простенькие стили, экспериментируйте, чтобы понять, как всё работает.

          • Александр Тимощенко

            Ок. Подскажите, стоит ли зацикливаться на html на столько, чтобы «без шпаргалок» свободно работать? Именно для начала. Либо же лучше пользовать шпаргалку, и переходить дальше на css и ещё дальше? )

          • Допустим, вы прочитали про теги, создающие таблицы. Создаёте в редакторе таблицу и видите, что в таком виде на странице сайта её не разместить — у неё нет границ, текст в ячейках расположен близко друг к другу. Открываете главу 2.7. CSS таблицы, читаете про свойства, с помощью которых можно изменить внешний вид таблицы по умолчанию и пробуете применить их к созданной в редакторе таблице. Меняете значения свойств, например, толщину рамки, цвет рамки, внутренние отступы padding для ячеек таблицы и т.д. То есть просто активно изучаете один из элементов веб-страниц.

            Дальше берёте другой объект страницы, к примеру, список, и проводите эксперименты с ним. Самое главное — не бойтесь, создание html-страниц похоже на создание вордовских документов или презентаций, с разницей в том, что в офисных программах для добавления таблиц, списков и т.д. вы используете встроенные модули, а в html вам приходится создавать их с помощью тегов — прозрачных контейнеров для содержимого и после стилизовать. Работая в визуальном редакторе, вы не сломаете ни браузер, ни компьютер. Главное — втянуться в процесс, а не размышлять, учить/зубрить/читать шпаргалки.

            Представьте себе, как вы бы строили дом: в доме можно выделить основные модули — крыша (в html header), основное помещение (в html main, container и т.п.) и подвал (в html footer). Как видите, html-страница собирается по такому же принципу. И как в случае дома, так и для веб-страницы вам нужно задавать размеры элементам, позиционировать их друг над другом или внутри, оформлять (заливать цветом, рисовать рамки, тень и т.д.). Имена тегов (если вы учили английский) в большинстве случаев также дают нам понимание, для чего предназначен тот или иной тег.

        • И всё-таки напишите, какие моменты вам не понятны, постараюсь объяснить

  • Александр Тимощенко

    всё бы хорошо, если бы ещё возле каждого тега был пример отображения (для тех кто влияет на отображение) =) А то приходится гуглить каждый, чтобы посмотреть как он работает -)

    • Вы опять не услышали меня: вы хотите просто прочитать какую-то волшебную книгу, которая даст вам представление и понимание обо всём сразу. Так не бывает, нужно писать теги, экспериментировать с ними, а не гуглить, как они выглядят.
      За расположение элементов на странице отвечает их тип отображения, то есть блочный или строчный тот или иной элемент. Эти сведения есть в таблице-шпаргалке. Подробное описание каждого тега разобрано в следующих главах.

      • Владислав Ронин

        Почему сразу волшебную книгу? Мы же не магами делаемся, а веб разработчиками. Пусть и не очень легальным путем. Ищем все по проще. А как иначе? Зачем трудиться? Это надо искать, а это убивать время. А если еще на курсы записаться… Да, мы же там уснем все. Да и говорят они не по делу. Один Игорь Борисов чего стоит…

        Проще отключить мозг и ждать пока кто-то что-то сделает.

        Коль существа все ленивые, дальше читать не будут, напишу по теме.

        Я перерыл огромную кучу ресурсов, так или иначе отсыпающихся, на справочники html. (Меняется зараза быстро за меньше чем пару лет, столько атрибутов пропало, а с ангельским (английским) языком у меня не то, чтобы проблемы, только не давно начал учить 🙂 ). Тот же Влад Мержевич, расписывает все довольна подробно, но если честно, да простит он меня, нудно.

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

        Не даром говорят: «Краткость сестра таланта».

        Для тех кто начал изучать html, данный справочник, поможет закрепить знания.

        Все понятно, примеры не нужны. Пусть хоть один справочник обойдется без них. Курс, я кратко проглядел, там столько примеров… Бери и делай.

        В общем спасибо большое.

        P.S.
        Не знаете, у w3.org есть отдельно выправки пусть даже на ангельском языке, (имею введу информацию: тег убрали, добавили, скоро уберут, атрибут работает, атрибут не работает). Или все не посредственно в документации? А узнавать, только через валидатор.

        • Курсы — согласна, у всех разный уровень начальной подготовки, скорость восприятия и т.д. Борисова слушала яваскрипт, так вот как раз с ним и не уснёшь, очень бодро рассказывает. Много лишнего во всех русских курсах, самые динамичные и без воды у lynda.com (на английском, как-то слушала перевод — наш вариант просто ужас).
          Я не ставила цель сделать азбуку в картинках, как видите по сайту Влада, это не помогает. Если ты не любознательный и дотошный, боишься экспериментировать, то лучше сразу забросить это занятие. Без практики чтение спецификации превратится в сказки на ночь.
          P.S.
          Есть ресурс https://devdocs.io, можете там отслеживать что работает, а что устарело.

          • Владислав Ронин

            Спасибо за ресурс.

            Да не важно какой уровень подготовки. Я меньше двух месяцев изучаю HTML и CSS. Раннее вообще не был знаком с данными языком разметки.

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

            Но почему этого ни кто не понимает? Все видят готовые материалы, а это, может застопорить развитие технологий в будущем. Потому-что в итоге может остаться, только старый готовый материал.

            Борисов, хороший преподаватель. Доступно, понятно. Уснуть у него только отбитый человек сможет, которому в таком случаи, лучше не лезть в html, да и вообще в веб разработку.

            «Почему сразу волшебную книгу? Мы же не магами делаемся, а веб разработчиками. Пусть и не очень легальным путем. Ищем все по проще. А как иначе? Зачем трудиться? Это надо искать, а это убивать время. А если еще на курсы записаться… Да, мы же там уснем все. Да и говорят они не по делу. Один Игорь Борисов чего стоит…» — сарказм.

          • Не совсем никто не понимает. Мы же с вами это понимаем)) Значит, есть ещё такие люди и вот уж они точно не задают вопросов: как побыстрее научиться веб-технологиям, чтобы начать фрилансить или получить хорошую работу в веб-студии или т.п. Причина всей этой торопливости и веры в быстрое овладение технологиями в воспитании. Я думаю, что эти люди ничего в жизни не добивались самостоятельно, плюс вера в халяву, которую подогревают чудо-книжки типа «Как выучить html, css javascript за 24 часа» или рассказы «Я пришёл из армии, за месяц все изучил и начал получать заказы на фрилансе» . И несмотря на такой ажиотаж к профессиям, связанным с веб-разработкой, профессионалов не хватает.

          • Владислав Ронин

            Добавить не чего.

  • Freeman4D

    Добрый день, Елена!
    Можно ли как-то в и выравнять все «вторые» элементы по горизонтали: причём и по правой и по левой границе «второго» столбца… https://uploads.disquscdn.com/images/8ecfe4fc7295fb7e3c702cde5790b59d06609feb0370e2be20a12ab45c336912.jpg

    Табуляторы и однострочные двухэлементные таблицы в не прошли… так, как ожидалось…
    Моноширинные же (pre) уже используются в ином контексте и здесь ВЕСЬМА нежелательны.
    Решаем ли такой кейс? Заранее спасибо!

    • Добрый день. Речь идёт о таком выравнивании http://codepen.io/html5book/pen/MJMvaM?

      • Freeman4D

        Иллюстрация слетает при исправлении… https://uploads.disquscdn.com/images/c17563cb9c3e33076c2b3f7f646dd91e53b7b37c1598564a801472dbd7f08742.jpg

        • Вы готовы к тому, что в IE эти теги не работают, то есть details всегда будет открытым. Может вам использовать список определений https://html5book.ru/html-lists/#part3? Он для таких целей больше подходит.
          И ещё просьба — всегда прикладывайте пример в редакторе, мне так проще ориентироваться в коде. Не совсем понятно, что вы имеете под вторым столбцом.

          • Freeman4D

            Сорри, Елена, были проблемы с инетом в эти пару дней! Вот ссылка https://jsfiddle.net/Freeman4J/17u2nu8a/5/#&togetherjs=TMjD8OaDJF Проект оптимизирован для Google Chrome. IE не критичен абсолютно, остальные браузеры вообще не поддерживают смежную платформу Tiki-Toki, поэтому совсем игнорятся! Да, я знаю про списки, но они будут занимать по вертикали много строк, а details только одну. К тому же внутри details второго уровня будут картинки… А ключевое свойств проекта – один экран с минимумом манипуляций по листанию… P. S. Пытаюсь понять – когда я обновляю код в фиддле для Вас, то ссылка меняется обязательно или есть варианты? Спасибо!

          • Freeman4D

            Извиняюсь, Елена, забыл отметить, что под «вторым столбцом» я понимаю саму расшифровку аббревиатур, что идёт в нижнем регистре – например,
            «▸ КМ» – первый столбец;
            «комплементарная медицина» – второй столбец, который можно выравнивать двояко:
            по левому «краю» – по слову |<>|…
            Интересуют оба варианта.
            https://uploads.disquscdn.com/images/c17563cb9c3e33076c2b3f7f646dd91e53b7b37c1598564a801472dbd7f08742.jpg

          • Посмотрите пример ещё раз. В первом случае — оборачиваете аббревиатуру и расшифровку в разные span, для аббревиатуры задаёте ширину. Во втором случае — измеряете ширину summary и для расшифровки устанавливаете обтекание по правому краю.

  • )) Пожалуйста!

    • vlaaaaad111 .

      Здравствуйте Елена, не знаю как задать вопрос здесь поэтому пишу где можно. Итак, подскажите пожалуйста можно ли добавить доп меню чтоб оно было в новой строке под первым меню,и на другом фоне? Пробовал за хедером и в нем но не выходит.
      Как то вышло что вторая строка ложится под первое меню. Добавил паддинг сверху но это же не дело. При увеличении все сдвигается и не красиво. Если можете отписать мне на почту vlaaaaad777@gmail.com то буду ОЧЕНЬ благодарен!!Заранее большое спасибо!!!

      • Здравствуйте. Мне нужен код, сделайте пример в онлайн-редакторе и напишите ссылку.

    • Freeman4D

      Добрый день, Елена!
      Ещё раз благодарю за подсказку…, всё получилось.
      Но возникла непредвиденная проблема – при вставке div’ов…width, обёрнутые ими span’ы расшифровок аббревиатур, неожиданно «упали» на строку ниже!
      (ср. АМ — альтернативная медицина)
      Валидатор в этом месте проблем не находит…
      Можете ли поделиться какими мыслями по этому поводу?!
      jsfiddle.net/Freeman4J/17u2nu8a
      В коде CSS участок POP6…
      Заранее спасибо!

      P. S. Не уверен, что я реализовал именно тот вариант, что Вы имели ввиду накануне, но все другие альтернативные вёрстки не привели к желаемому результату – выравнивание справа есть, а адаптация под ориентацию планшета не получается – столбцы наезжают друг на друга при «портрете». Пришлось применить div’ы.

      https://uploads.disquscdn.com/images/74ad6793f225a5a4d42fe8de68283978702b7e4f133346070e6fba9ff705484f.jpg

      • Намудрили вы с разметкой. Div и span нельзя комбинировать внутри одного элемента, аббревиатуру вы вообще нечем не обернули, зачем поставили абсолютное позиционирование для тире. Непонятно, где по вашей задумке должен быть текст «Определение АМ[1, С. XX]». По середине строки? Под summary?

  • Freeman4D

    Ещё бы, по аналогии с бирюзовой подсветкой новых HTML5-тегов, сделать выделение жёлто-коричневым цветом устаревших тегов из HTML4…, чтобы не париться с каждой проверкой на валидацию чистого HTML5!

    • А разве вы нашли в таблице устаревшие теги?

      • Freeman4D

        Но остался вопрос об «экспериментальных» тегах. Вот их бы хотелось видеть под отдельным цветом…

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

          • Freeman4D

            Это я понял… Вот именно о «поддерживаются в одном-двух», тем более, если речь идёт о WebKit/Blink…

  • Насчёт комбинации — в спецификации на англ. http://www.w3.org/TR/css3-box/#block-level0 пункт 4.2.
    Насчёт какие элементы что и где — как раз занимаюсь переводом и составлением подробной таблицы.
    Ширина для span — если вы обратили внимание, когда для него задаёшь display:inline-block, то он воспринимает ширину. float автоматически делает его display:block.
    Добавила вариант2 в свой пример, посмотрите.

  • Пожалуйста!

    • Freeman4D

      А где можно посмотреть Ваш «пример с вариантом 2»?

      • В том же примере https://codepen.io/html5book/pen/MJMvaM, отделила комментарием «вариант2» разметку и стили.

        • Freeman4D

          Спасибо, Елена!

          Ещё накануне смотрел @media, чтобы определять ширину, но думал, что обойдусь пока… И вот у Вас обнаружил… Очень интересно, но об этом позже, как разберусь с этим фрагментом кода!

          А сейчас только подсветил жёлтым один Ваш details и вот какие «артефакты“ сразу обнаружились! https://codepen.io/Freeman4C/pen/KWpzvr
          1. Разные width, выравнивания в зебре с потерей цвета… в зависимости от чётности строк;
          2. Лишняя белая строка сразу под summary от внедрения .
          Замена p на div эту лишнюю строку убирает.
          Но Вы предупреждали о некомплементарности div с details?!
          Тогда я не нашёл другого способа управлять этой лишней белой строкой тем более с присвоением ей цвета текущего родителя-details;
          3. Из-за п. 2, IMHO, в строке «Определение *** по ВОЗ» теряется наследование цвета от предыдущей строки и возникает странная инверсия жёлтых и зелёных цветов, когда «Определение *** по ВОЗ» приобретает цвет не своего, а нижележащего details;
          4. Манипуляции с разными перестановками этих нижних строк details…/details summary… к нужному результату так и не привели, обнаружив странные зависимости от четности строк их цвета до середины/конца строки//его полного отсутствия и потери позиционирования расшифровок с «отбрасыванием» их к правой границе окна…

          ______________________________________

          .details1 {
          background-color: lime;
          }
          .details2 {
          background-color: yellow;
          }
          .details2 summary {max-width: 500px; width: 100%;}
          .details1 summary {max-width: 500px; width: 100%;}
          ______________________________________

          P. S. В моём же (подсвеченном) оригинальном коде эти правки смотрятся таким вот образом…, причем поправить мне это пока никак не удаётся…
          https://jsfiddle.net/Freeman4J/bx309u81/#&togetherjs=s5wBkBV7Ho

          https://uploads.disquscdn.com/images/969e697174acde3334d2154881fdee1615b39c5b094c13df51daaa8466dfb844.jpg

          • 1) мы ограничили ширину summary, чтобы можно было позиционировать расшифровку недалеко от аббревиатуры, а не по правому краю страницы. Ширину details мы не трогали, поэтому ширина зелёного и жёлтого блоков отличается.
            2) можно задать details p {margin:0} и белых промежутков не будет. И я говорила не про div, а про безумное сочетание анонимного блока с аббревиатурой, строчного и блочного тега одновременно.
            3) знаете, общаясь с вами по этому примеру, вспоминаю случай из школы, когда на диктанте по русскому ко мне за парту посадили двоечника и он списал у меня на 1, а я получила 5 😉 Вы почему-то копируете часть кода, а то что вам непонятно, не спрашиваете и пропускаете, хотя именно от этих строк зависит работоспособность.
            p:after {content:"";display:table;clear:both} — когда вы в блоке задаете обтекание float, высота этого блока становится равной 0. Посмотрите ещё раз мой пример, я добавила две строки разного цвета — все работает отлично.
            Ещё замечание: у вас в примере длиннющая строка текста, которую браузер никак не сможет перенести, поэтому ширина 30% работать не будет. У вас в примере огромная картинка, которая тоже ломает всю разметку.

        • Freeman4D

          Здесь Ваш код, в котором я только подсветил один details https://codepen.io/Freeman4C/pen/KWpzvr

  • Codepen мне нравится больше и мне в нём удобнее работать. Насчёт копирования вы уж простите, но вот так работать на планшете — это какое-то извращение, читать, смотреть фильмы — не более.