Парадоксы разметки

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

И тут приходят сомнения…

К примеру, нужно вам сверстать вводную часть книги, где речь идёт о принятых условных обозначениях:

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

Наша задача состоит в том, чтобы продемонстрировать на соответствующих словах примеры подобного выделения. Как же сходу разметит подобную информацию любитель правильной вёрстки? Примерно вот так:

В основном тексте книги для удобства будут встречаться следующие
обозначения: особенно важные моменты мы будем обозначать
<strong>полужирным</strong> выделением, цитаты будут обозначены
<cite>курсивом</cite>, фрагменты кода <code>моноширинным</code>
шрифтом, а текст из предыдущих изданий
будет выводиться <del>перечёркнутым</del>.

А теперь давайте подумаем. Разметка документа при помощи семантических элементов предполагает выбор элемента в соответствии с его содержимым. И о чём же говорят нам эти слова: полужирный, курсив, моноширинный, перечёркнутый? Ну уж никак не о важности, цитировании, коде и версионности. Очевидно, что только о представлении, демонстрируя, как должны выглядеть соответствующие фрагменты текста. Давайте будем честны, текст стоит разметить вот так:

В основном тексте книги для удобства будут встречаться следующие
обозначения: особенно важные моменты мы будем обозначать
<b>полужирным</b> выделением, цитаты будут обозначены
<i>курсивом</i>, фрагменты кода <tt>моноширинным</tt>
шрифтом, а текст из предыдущих изданий
будет выводиться <s>перечёркнутым</s>.

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

А как думаете вы?

Комментарии

31

Я бы сделал с span (при этом скорее всего встретив непонимание) или пересмотрел бы текст в вводной части книги.

"фрагметы" - некрасиво (продолжаю писать дефисы вместо тире в комментариях) :)

«Фрагметы» исправил, спасибо. Про спаны — как одна и версий, но чуть сомнительная из-за того, что мы можем использовать презентационные элементы для презентационных целей.

Предложенный текст, я верстал бы, так же как в примере № 1. Поскольку, есть смутная надежда, что сверстанный текст, когда нибудь–будут читать голосовые браузеры (а вроде как Опера это умеет применительно к английскому языку, хотя утверждать с полной уверенностью не могу).

А теги из примера № 2, отвечают только лишь за визуальное выделение.

Знаю одно — сомневаться полезно, это пробуждает мысль от сна слепой уверенности.
:) красивая фраза.

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

Мне кажется бездумно портировать оформление книги из форматов не предусматривающи семантики (напр, LaTeX'a) в html и css -- это неправильно.
Если вы хотите сделать ее семантически верной, то книгу все равно придется редактировать. На этом этапе и можно избавится от вмешательства автора в оформление книги -- верстка это не его забота.
Ну а если книга должна остаться неизменной не вижу другого пути, кроме как распространение в соответствующем формате (dpf или еще что-то).

ksen, спасибо за интересное мнение. Но всё же можно придумать подобный пример и без ситуации портирования книг в HTML, когда нам просто нужно показать пример визуального выделения. Хотя, безусловно, лучшим выходом было бы не выделять слово «моноширинный» моноширинным шрифтом, а привести тут же сам фрагмент кода.

Про span'ы поясню мотивацию, так как
"Emphasis tags, such as <b>, are presentational, so should be omitted; the same applies to <br>" (POSH)

И, разумеется, согласен с точкой зрения [b]ksen[/b]

Забавный парадокс мышления)
Согласен с Михаилом Валенцевым, я использовал бы span с идентификатором

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

Мне кажется этого-то как раз делать и не нужно. Почему нужно перечеркивать слово “перечёркнутым” и делать моношинным шрифтом словосочетание “моноширинным шрифтом”? Разве это что-то поясняет читателю?

Я вообще не считаю, что читателю нужно демонстрировать или как-либо пояснять такие вещи. Ведь если книга/сайт/что_угодно_другое хорошо сверстаны, то человек способен будет воспринять эти вещи автоматически. Никому почему-то не приходит в голову пояснять, что заголовок будет большой жирный и гарнитурой Tahoma, а абзацы разделены отступом и набраны гарнитурой Arial...

Резюмирую: Думаю, наиболее красиво было выкинуть эту часть текста. Потому как вижу в первоначальной его версии не информативный текст, выкинув который не перестанет быть понятно, где цитата, а где код.
Но если все же по не зависящим от нас причинам текст изменять и урезать нельзя, я бы… завис…

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

Спасибо за мнение.

Данный абзац показывает, как во всей книге будут показываться соответсвующие семантические элементы. То есть имеется логическая привязка оформительских техник и логических элементов, им соответствующих. И здесь вполне разумно использовать одноименные теги. Если впоследствии автор решит, что
В основном тексте книги для удобства будут встречаться следующие
обозначения: особенно важные моменты мы будем обозначать
<strong>курсивным</strong> выделением, цитаты будут обозначены
<cite>моноширинным шрифтом</cite>, фрагменты кода <code>курсивным</code>
начертанием, а текст из предыдущих изданий будет выводиться <del>перечёркнутым</del>,
то нам не придётся переделывать разметку этого абзаца в случае использования семантической разметки, а вот в случае презентационной — очень даже потребуется.

Хороший пост. Действительно первый способ не является, строго говоря, семантичным. Я бы тоже сделал спанами.

По моему все просто. Если уж никак нельзя поступиться религиозными принципами, то делаем так:
Во вступлении пишем:

В основном тексте книги для удобства будут встречаться следующие обозначения: особенно важные моменты мы будем обозначать <span class="strong-example">полужирным</span> выделением, цитаты будут обозначены <span class="cite-example">курсивом</span> ...

А в CSS, соответственно:

strong, .strong-example { .........}
cite, .cite-example { .........}
...

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

P.S. Люди, отвечающие за сайт, где тег code? Без него очень неудобно.

miripiruni, по сути, прав. Делать полужирным слово «полужирным» не следует. Наверное, вместо этого я бы предложил набирать указанный абзац сплошным текстом, а рядом/ниже привел бы четкие и ясные примеры, не подлежащие разночтениям… возможно, из текста книги. И в этих примерах семантичная разметка тегами типа cite и strong будет, на мой взгляд, полностью уместна.

Вот Михаил правильно уловил нить. Во всей головоломке ключевую роль играет фраза:
для удобства будут встречаться следующие обозначения:. Это удобно автору, это удобно издательству, это, предположительно, удобно читателю.

Это первое. Второе. Объект (книга) переносится из одной системы измерений (подразумевается физическая среда) в другу систему (виртуальная среда), превращаясь из книги в гипертекстовый файл. При этом в новой среде мы пытаемся лишить его причитающегося свойства - множественности представлений. Все равно что с листа перенести картину в реальныйй мир и лишить её 3го и 4го измерения (объем и время).

А раз у нас в новой среде появилось новое свойство (способ представления) и это свойство позволяет добиться того же эффекта что и в предыдущей среде (использование начертаний), то почему мы должны наступать себе на горло?

По поводу голосового браузера. Раз мы все это дело слушаем, то нам становится абсолютно по барабану как этот текст выглядит. Во вступлении мы услышим какими интонациями выделяется каждая вставка и постараемся их запомнить. В первом варианте велика надежда, что интонации а) будут, б) звучать адекватно.

Голосую за вариант №1.

По-моему, strong, cite, code и del семантически не имеют *никакого* отношения к поставленным автором в соответствие способам сугубо *визуального* выделения. Если в визуальных агентах элемент strong выглядит как полужирный текст, то это вовсе не означает, что полужирное начертание в какой бы то ни было мере семантически описывается элементом strong.

И если абстрагироваться от целесообразности (которая сильно сомнительна) «иллюстративного» выделения, приведённого автором в пример, и редкости подобных случаев как таковых, и учесть, что элементы представления в HTML не рекомендуются, остаются span+классы, без вариантов.

вовсе не означает, что полужирное начертание в какой бы то ни было мере семантически описывается элементом strong

В изначальной легенде сказано, что «особо важные моменты» должны выделяться полужирным, а в соответствии с ролью strong'а вполне логично хочется использовать в тексте для этих целей именно его. Полужирность — это совпадение ;)

А для чего в данной верстке использованы теги cite и tt? Не логичнее было бы использовать em для курсива и pre для фрагментов кода?

Согласен с Михаилом. Всё что мы видим в примере и понимаем - это то, что определённый визуальный ключ передаёт определённую смысловую нагрузку. Народ же, почему-то, цепляется именно за визуальную часть и пытается сопоставить. Ведь семантика - она должна быть прежде всего в разметке, потому как, если она будет в разметке, то отображение навешать - это раз плюнуть. Вообще, про латех прокомментирую ниже, но людям стоило бы им попользоваться - увидеть, что есть хорошо составленный и структурированный документ (если, конечно, такой найдётся). Я не жалею, что на последнем курсе сходил на скучный, казалось бы, спецкурс - издательское дело. Зато теперь знаю, что такое латех, и как выглядит нормальная, хорошо свёрстанная статья или книга - неважно, где информация выделена в блоки по смыслу, а вовсе не по оформлению.

Всё-таки так и подмывает выкинуть слово семантика и назвать всё это «вёрсткой по смыслу», «осмысленной вёрсткой», «вёрсткой со смыслом» или «смысловой вёрсткой». Чтобы всё было понятно и со смыслом.

Мне кажется бездумно портировать оформление книги из форматов не предусматривающи семантики (напр, LaTeX'a) в html и css -- это неправильно.
Ой-ой. В LaTeX нет семантики? А кто тогда есть такие /part, /chapter, /footnote хотя бы? Или мы разговариваем о разных семантиках? Лично я вот о семантике именно в коде, как это будет выглядеть - это дело семьдесят седьмое.

Попробую сформулировать метафору:
Отделяя зёрна от плевел, я кладу зёрна в банку, а плевелы в мусорное ведро. Это обусловлено прежде всего смыслом (он возник из намерения их разделить), а вовсе не банкой или мусорным ведром.

В данном контексте слова «полужирный», «курсив», «моноширинный» являются терминами, поэтому здесь следует использовать тэг dfn. Если для каждого из терминов необходимо своё визуальное представление, то следует использовать соответствующие стили. Например:
полужирный

цитаты будут обозначены <cite>курсивом</cite>
Не совсем по теме, но тем не менее... Говоря о семантике, разве для инлайновых цитат используется тэг cite? Я всегда считал, что cite - это цитируемый объект/субъект, а q - это цитата: <cite>Bill Gates</cite> said, <q>640K ought to be enough for everyone</q>

Vladimir, вы правы, <cite> — это указание на источник цитаты, однако мне хотелось в примере показать элемент, который изначально оформляется браузером как курсивный, поэтому я позволил себе такое допущение.

По-моему, парадокс надуманный. Ведь если бы в тексте
"Что сделал слон, когда пришёл на поле он"
вам нужно было бы "слона" пометить серым, а "поле" зелёным, вы не стали бы сокрушаться, что элементы <слон /> и <поле /> в XHTML даже не депрекэйтед, а просто задали бы им strong с соответствующим классом. Вот и здесь strong или code больше всего подходят.

История показала, что Вы, во многом, оказались правы.

В стандарте HTML5 теги <b> и <i> обрели семантику, и обозначают жирность и курсив именно как технический прием.