Разрешает ли W3C отображение элементов ‹h#› display:inline;?

Во-первых, цитируемый раздел действительно взят из спецификации HTML 4.01 14-летней давности. Я не помню, чтобы когда-либо читал что-то подобное в спецификациях HTML5. Я лично думаю, что в то время это было сочтено хорошим замечанием, но с тех пор оно устарело благодаря опыту. Не забывайте, что HTML4 был тем, кто правильно разделил HTML и CSS, и поэтому содержит «ошибки», такие как цитируемое замечание, которые позже были «исправлены».

По сути, между вашей семантической разметкой и вашим стилем не должно быть неявно заблокированных отношений. Как и элементы hX, элемент div также является элементом блочного уровня, но только из-за того, как он взаимодействует с другими элементами, в частности, с теми элементами, которые он может содержать — встроенный элемент не должен содержать блочный элемент, в то время как блочный элемент может содержать оба элемента. встроенные и блочные элементы, за исключением явно определенных отношений, таких как ul > li и table > tr > td. По сути, разделение семантики и представления должно быть настолько строгим, чтобы в спецификациях языка разметки HTML даже не упоминалось о существовании концепции таблиц стилей — таблицы стилей можно применять к чему угодно, а не только к HTML, а HTML поддерживает множество других технологий. чем просто браузеры.

С точки зрения веб-разработчика вы абсолютно правы. блочный характер элемента h4 просто подразумевает его связь с потенциальными дочерними элементами и его представление по умолчанию в таблице стилей браузера по умолчанию. То, что разработчик CSS затем хочет сделать со своей таблицей стилей, является его собственным выбором - вам все равно, он применяет к ней правило display:table-cell, если это правильно соответствует его дизайну.

TL;DR: нет никакой двусмысленности, и вы всегда должны писать свой CSS в соответствии с тем, как вы хотите отображать свой HTML, а не адаптировать свой HTML к требованиям CSS. Использование span вместо h4 просто неправильно с точки зрения семантики (и SEO).

Спецификации W3C допускают использование display: inline в элементах заголовков. В общем, спецификации HTML не ограничивают возможности CSS, и наоборот.

Процитированный вами раздел Блочные и встроенные элементы содержит рекомендацию («не рекомендуется»). Это утверждение «не следует», а не «не следует», то есть не критерий соответствия. Мотивация для рекомендации не указана, но, как правило, такие идеи основаны на том факте, что HTML-документы могут обрабатываться программным обеспечением, которое игнорирует таблицы стилей, или может иметь переопределенные авторские таблицы стилей, или иным образом отдает предпочтение определенным значениям элементов, а не чем их стиль CSS.

Несмотря на то, что возможность сделать заголовок встроенным элементом (в смысле установки display: inline) здесь не упоминается, это является частью одного из способов создания «встраиваемых заголовков» (заголовков, которые появляются в начале абзаца). , а не на отдельной строке). В настоящее время лучшим способом добиться этого является display: run-in, как показано в основном CSS. коробочная модель WD. Основная идея остается прежней: можно изменить элемент заголовка с display: block по умолчанию на встроенное представление.

Что касается представленного конкретного случая, я не совсем понимаю, зачем нужен встроенный элемент. Следующий элемент — ul, что по умолчанию вызывает разрыв строки (и интервал по вертикали). И если рендеринг ul изменен на встроенный с помощью CSS, трудно понять, почему вы не можете сделать то же самое с элементом, который логически является заголовком для списка.

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

Например, я видел учебники с несколькими столбцами, каждый с заголовком, и можно было добиться такого эффекта, используя display: inline для тега h4.

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

Подумайте, как ваша страница будет отображаться в текстовом браузере, который не поддерживает CSS. Будет ли иметь смысл необработанный порядок текста? Если это так, то ваш выбор HTML, вероятно, верен.

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

Позвольте семантике диктовать теги, которые вы используете, и используйте CSS, чтобы получить нужный вам визуальный макет.