Как избежать нарушения семантичности верстки когда параграф не может включать код или списки?

Question

[Deniskin Rediskin]

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

<p>Такой пример: <pre>alert("Привет, мир!")</pre> выводит окно с приветствием</p>

Но в html невозможно разместить элемент уровня блока внутри <p>. Как обойти эту проблему? Делать так нельзя:

<p>Такой пример:</p> <pre>alert("Привет, мир!")</pre> <p>выводит окно с приветствием</p>

так как стили могут определять отступ text-indent для параграфа.
Хочется узнать: как верстальщики обходят эту проблему?

Comments

[WhiteSama]

стиль для pre задавать, не?

[bobrovskyserg]

Чтобы гарантированно избежать нарушения семантичности верстки, когда параграф не может включать код или списки, следует не включать в параграф код или списки.
Вот так.

[Deniskin Rediskin]

Спасибо, самый конструктивный отзыв, жаль нельзя этот комментарий пометить как решение.

Answer 1

[Денис Инешин]

Почему это невозможно? Что мешает?
Вот парочка примеров: jsfiddle.net/IonDen/ur4f5gk2 и никаких проблем.

Comments

[Денис Инешин]

SelenIT2: используйте xhtml, там всё явно. К тому же это уже прошлый век, чтобы не закрывались. Считаю что подобные ситуации можно игнорировать.

[Денис Инешин]

SelenIT2: Ну значит воспользуйтесь примером 3. Там где span имитирует поведение PRE. То что вам нужно ведь.

[Deniskin Rediskin]

Экстремальным решением будет использовать xml с клиентским xslt, мы однажды пробовали такое. Тогда тэг P выводится как

[Deniskin Rediskin]

Вариант со стилем для span замечательный, но он не решает проблему со списками.

[Евгений Петров]

DenVdmj: Все визуальные эффекты можно сделать с любыми элементами. Те же списки легко эмулируются любыми строчными элементами.
А пример в вопросе — типичный говнокод, который вы не поборете, не переписав. Параграф будет разорван элементом pre, и это не исправить.

Answer 2

[Владимир]

< pre > - блочный элемент для достаточно большого объёма текста, а не для 3 слов кода. В вашем примере нужно использовать строчный < code > вместо него. Также, возможно, < cite > - в зависимости от ситуации.

Comments

[Deniskin Rediskin]

Тег pre -- тэг не обязательно для кода, а для любого преформатированного текста, и таких примеров может быть много, например однострочный вывод консольной программы -- это не код, а раз мы говорим о семантичной верстке, то code не подходит, и все другие тэги.
Другой частый вариант, -- это списки ol b ul, они тоже блочные и не могут быть размещены в <p>

Answer 3

[Deniskin Rediskin]

Вариант со стилем для span замечательный, но он не решает проблему со списками.
Мой же пример браузер автоматически приводит к виду:

<p>Такой пример: </p><pre>alert("Привет, мир!")</pre> выводит окно с приветствием

jsfiddle.net/ur4f5gk2/1
Общая проблема в том, что <p> не может содержать блочные элементы.

Конечно можно задавать блочные стили для code, но тогда уж проще использовать вместо <p> тег <div> с классом .p, это решит и другие проблемы с остальными блочными элементами: ul, ol, pre. Но это костыль, и неиспользование родного тега для параграфа не самый лучший выход. Вот только, по всей видимости другого варианта нет.

PS. Обсуждение этой же проблемы на stackoverflow: stackoverflow.com/questions/10601345/ul-element-ca...

Comments

[Евгений Петров]

Проблема — это когда использование декларированных средств не позволяет получить ожидаемый результат.
А вложение блочных элементов в параграф, где ожидается исключительно строчный контент, — просто примитивная ошибка и неграмотное построение структуры.

[Deniskin Rediskin]

Структуру мы имеем готовую -- ровно такую, какую нам предоставил автор текста. И если у автора текста в предложении содержится список, то соответственно это и должно быть отражено в верстке.