Каков фактический смысл разделения контента и презентации?

StackOverflow https://stackoverflow.com/questions/2260391

Вопрос

Каков фактический смысл разделения контента и презентации?

Это просто означает избегать встроенного css?

Означает ли это, что дизайном должна быть возможность манипулировать без изменения HTML?

Можем ли мы действительно внести какие-либо изменения в дизайн только с помощью CSS?

  • Если мы хотим изменить размер изображений, то нам придется перейти в HTML-код
  • Если мы wan'T, чтобы добавить еще одну строку в абзаце потом опять придется идти в HTML код
  • Если мы захотим добавить еще один разделитель в каком-то месте, то нам снова придется перейти к HTML-коду

Какой тег X / HTML нам следует избегать использования, чтобы сохранить разделение контента и презентации?

Полезно ли разделение контента и презентации также для пользователей специальных возможностей / программ чтения с экрана?...а для программиста/разработчика/дизайнера?

Это было полезно?

Решение

Определяя, что такое контент и презентация, рассматривайте свой HTML-документ как контейнер данных.Затем задайте себе следующие вопросы по каждому элементу и атрибуту:

  • Представляет ли атрибут / элемент значимую сущность в моих данных?
    Например, находятся ли слова между <b> тег выделен жирным шрифтом просто для отображения, или я хотел сделать акцент на этих данных?

  • Использую ли я соответствующий атрибут / элемент для представления свойства типа данных, которые я хочу представить?
    Поскольку я хочу сделать акцент на этом конкретном разделе, я должен использовать <em> (это не означает курсив, это означает выделение и может быть выделено жирным шрифтом) или <strong> в зависимости от желаемого уровня акцента.

  • Использую ли я атрибут / элемент только для отображения?Если да, можно ли удалить элемент и оформить родительский элемент с помощью CSS?
    Иногда презентационный тег может быть просто заменен правилами CSS для родительского элемента.В этом случае презентационный тег необходимо удалить.

Задав себе эти три простых вопроса, вы обычно способны принять довольно обоснованное решение.Пример:

Исходный код: <label for="name"><b>Name:</b></label>

Проверка <b> бирка...

Представляет ли атрибут / элемент значимую сущность в моих данных?
Нет, тег не представляет узел данных.Это сделано исключительно для презентации.

Использую ли я соответствующий атрибут / элемент для представления свойства типа данных, которые я хочу представить?
<b> используется для выделения элементов жирным шрифтом.

Использую ли я атрибут / элемент только для отображения?Если да, можно ли удалить элемент и оформить родительский элемент с помощью CSS?
С тех пор как <b> является презентационным, и я использую его для презентации, да.И с тех пор, как <b> элемент влияет на весь <label>, его можно удалить и применить стиль к <label>.

Цель Semantic HTML - не упростить дизайн и редизайн или избежать встроенного стиля, а помочь анализатору понять, что этот конкретный тег представляет в вашем документе. Таким образом, приложения могут быть созданы (т.е.:поисковая система), чтобы разумно решить, что означает ваш контент, и соответствующим образом классифицировать его.

Поэтому имеет смысл использовать свойство CSS content: чтобы добавить кавычки вокруг текста, расположенного в <q> тег (он не имеет значения для данных, содержащихся в вашем документе, кроме этой презентации), но нет смысла использовать то же свойство CSS для добавления символа © в ваш нижний колонтитул, поскольку он имеет значение в ваших данных.

То же самое относится и к атрибутам.Используя width и height атрибут на <img> тег, представляющий значок размером 16x16, имеет семантический смысл, поскольку важно понимать значение <img> тег (значок может иметь различное представление в зависимости от размера, в котором он отображается).Используя те же атрибуты в <img> тег, представляющий миниатюру увеличенного изображения, этого не делает.

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

Здесь нет неправильных элементов.Некоторые элементы используются неправильно. <b> не следует использовать при добавлении акцента. <small> следует использовать для юридического подтекста, а не для уменьшения размера текста (см. HTML5 - Раздел 4.6.4 для чего) и т.д...Все элементы имеют определенный сценарий использования, и все они представляют данные (за вычетом презентационных элементов, но в некоторых случаях они действительно используются).Никакие элементы не должны быть отложены в сторону.

Атрибуты - это совсем другое дело.Большинство атрибутов носят презентационный характер.Такие атрибуты , как <img border> и <body fgcolor> данные, которые вы представляете, редко имеют значение, поэтому вам не следует их использовать (за исключением тех редких случаев).

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

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

Другие советы

Лучшим примером, вероятно, является CSS Дзен- Сад.

Цель этого сайта - продемонстрировать, что возможно только с дизайном на основе CSS, со строгим отделением контента от дизайна.Таблицы стилей, созданные различными графическими дизайнерами, используются для изменения визуального представления из одного HTML-файла, производящий сотни различных дизайнов.Сама HTML-разметка никогда не меняется в зависимости от различных дизайнов.

На каждой странице дизайна у вас будет ссылка для просмотра CSS-файла этого дизайна.

Каков фактический смысл разделения контента и презентации?

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

это просто означает избегать встроенного css?

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

это просто означает, что если после написания html в соответствии с дизайном, то if тогда, если мы хотим внести какие-либо изменения в дизайн, то это должно быть только с помощью css, нет необходимости в html

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

Какой тег X / HTML нам следует избегать использования, чтобы сохранить разделение контента и презентации?

Ищите устаревшие теги в Ссылка на W3C HTML 4.01 / XHTML 1.0

Полезно ли разделение контента и презентации также для пользователей специальных возможностей / программ чтения с экрана?

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

Полезно ли разделение контента и презентации также для программиста / разработчика / дизайнера?

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

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

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

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

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

В идеале ваш (X) HTML состоит только из значимой семантической разметки и вашего CSS стилей, использующих эту разметку для своих селекторов.В реальном мире вы часто будете смешивать классы и идентификаторы в своей разметке, которые не добавляют никакого дополнительного смысла, потому что вам нужны эти дополнительные "крючки", чтобы стилизовать все так, как вы хотите.Но даже здесь есть разница между class="blue right-aligned" и class="contact-info secondary".Всегда старайтесь добавлять значение к содержанию, а не к стилю.Уравновешивать это само по себе целое искусство.:)

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top