Семантическая разметка. Почти каждый разработчик, который понимает эту концепцию, соглашается с ней, так почему же так много людей (включая меня) часто испытывают проблемы с применением принципов?
Хотя, без сомнения, иногда это лень в саду, я знаю, что были времена, когда я хотел принять правильное решение, но в итоге почесал голову. В то время как стандарты HTML проделали довольно приличную работу, имитируя основные формы и структуры, которые мы все понимаем из традиционных книг (то есть страниц, абзацев, заголовков, таблиц и списков), все чаще и чаще я сталкиваюсь с разметкой документ, который не очень хорошо вписывается в эти структуры — например, меню ресторана, сценарии и комиксы. Каждый из них имеет устоявшийся формат, который не обязательно легко переносится в Интернет.
Хотя я не могу сказать, что у меня есть окончательные ответы на все эти вопросы, я думаю, что было бы полезно, по крайней мере, выкинуть вопрос и получить несколько альтернативных мнений — включая меня.
Разметка диалога — это первая загадка, которую мы рассмотрим.
Давайте начнем с классической пьесы — какой самый разумный способ сделать разметку последней страницы из сценария из « Касабланки » для Интернета?
На первый взгляд, это больше, чем стандартная серия абзацев ( <p> ). У него есть юниты в очень специфическом порядке, но это определенно не упорядоченный список ( <ol>) . Структурно это очень похоже на список определений ( <dl>) — список элементов, каждый из которых имеет прикрепленный блок текста. Как цитата ( <q> ) и блочные цитаты ( <q> <blockquote> ) вписываются во все это?
К счастью, в этом случае мы не первые, кто задает этот вопрос, и уже было значительное обсуждение разметки диалогов на форумах Accessify, на которые мы можем опираться. Brothercake, Andrew K, Kev и я обсуждали варианты, и на этом мы остановились.
Самым простым подходом, без сомнения, было бы пометить все это как простую серию параграфов с несколькими добавленными интервалами, чтобы указать говорящего. Хотя это не может быть неоправданным, оно не встраивает много полезной информации в документ.
Другим подходом, предложенным некоторыми, было использование списка определений ( <dl> ). Тем не менее, хотя списки определений очень близки к визуальному соответствию, в данном случае они являются очень четкой семантической нет-нет. Утверждать, что каждый оратор является типом определения ( <dt> ) и что каждый прикрепленный фрагмент текста является «описанием определения» ( <dd> ), трудно выдержать.
Интересно, что в настоящее время существует предложение для <dialog> в HTML5 основываться на текущей структуре <dl> . Я не совсем уверен, что это правильный подход.
Так как в теории каждый блок диалога является цитируемой речью, <blockquote> представляется полезной структурой, в которую вписывается каждый фрагмент диалога. Кроме того, blockquote также позволяет нам встраивать в них как блочные, так и встроенные элементы, что дает нам гибкую базу для работы. Фактически, W3C рекомендует, чтобы текст внутри цитаты всегда содержался с блочным элементом.
Итак, начнем с чего-то вроде:
<blockquote> <p>Louie, I think this is the beginning of a beautiful friendship</p> </blockquote>
Поскольку всегда будет ограниченное количество ораторов, я думаю, что имеет смысл создать класс для каждого оратора и прикрепить этот класс к каждой цитате. Мы не обязаны его использовать, но это дает нам «крючки», чтобы делать более полезные вещи на более позднем этапе — например, выделять, подчеркивать, скрывать или окрашивать диалог определенных символов.
<blockquote class="rick"> <p>Louie, I think this is the beginning of a beautiful friendship</p> </blockquote>
Согласно W3.org, <cite> « содержит ссылку или ссылку на другие источники ». В нашем случае мы приписываем каждый отрывок докладчику, поэтому имеет смысл использовать <cite> чтобы указать, кто говорит. Для ясности я также дал ему класс «спикер», но это было бы очень необязательно.
Итак, теперь у нас есть что-то вроде:
<blockquote class="rick"> <cite class="speaker">Rick</cite> <p>Louie, I think this is the beginning of a beautiful friendship</p> </blockquote>
Наконец, сценические указания — еще один элемент, общий для почти всех сценариев. Поскольку они написаны в более традиционном описательном формате, они идеально подходят для простого старого абзаца. Если вы ожидали, что в одном и том же документе будут присутствовать другие виды абзацев — например, титры, предисловие или другие примечания — вы можете выбрать для указания своих сценических указаний определенный класс для них. Если нет, то достаточно простых тегов абзаца.
<blockquote class="rick"> <cite class="speaker">Rick</cite> <p>Louie, I think this is the beginning of a beautiful friendship</p> </blockquote> <p class="directions">The two walk off together into the night.</p> <p class="directions">FADE OUT.</p> <p class="directions">THE END</p>
Вот визуальное представление той же самой структурной разметки, наложенной поверх исходной страницы.
Итак, каков твой вердикт?
Можете ли вы увидеть лучший подход?
Есть ли другой формат документа, который у вас были проблемы с переводом в Интернете?
PS Не забывайте «экранировать» свой код, если вы публикуете фрагменты HTML-кода (т. Е. <Становится & lt;)