В чем собственно смысл разделения содержания и представления?
каков фактический смысл разделения содержания и представления?
это просто означает, чтобы избежать встроенного css?
означает ли это, что дизайн должен иметь возможность манипулировать без изменения HTML?
можем ли мы действительно внести какие-либо изменения в дизайн только из CSS?
- если мы хотим изменить размер изображения, то мы должны будем пойти в HTML код
- если мы хотим добавить еще один разрыв строки пункт потом опять нужно зайти в HTML код
- если мы хотим добавить еще один разделитель в каком-то месте мы снова будем иметь перейти в HTML код
какой тег X / HTML мы должны избегать использовать для разделения контента и презентации?
разделение контента и презентации также полезно для пользователей доступности/чтения с экрана? ... а для программиста / разработчика / дизайнера?
4 ответов
при определении содержимого и презентации см. HTML-документ в качестве контейнера данных. Затем спросите себя следующее о каждом элементе и атрибуте:
представляет ли атрибут / элемент значимую сущность в моих данных?
Например, являются ли слова между<b>тег выделен жирным шрифтом просто для целей отображения или я хочу добавить акцент на эти данные?я использую правильный атрибут / элемент для свойства представляют тип данных, которые я хочу представить?
Поскольку я хочу добавить акцент на этот конкретный раздел, я должен использовать<em>(это не означает курсив, это означает акцент и может быть выделено жирным шрифтом) или<strong>в зависимости от уровня акцента.использую ли я атрибут / элемент только для отображения? Если да, можно ли удалить элемент и стилизовать родительский элемент с помощью CSS?
Иногда презентационный тег может быть просто заменен правилами CSS для родительского элемента. В этом случае презентационный тег должен быть удален.
задав себе эти три простых вопроса, Вы обычно можете принять довольно обоснованное решение. Пример:
Исходный Код:
<label for="name"><b>Name:</b></label>проверка
<b>тег...тут атрибут / элемент представляют значимую сущность в моих данных?
Нет, тег не представляет узел данных. Он существует исключительно для презентации.я использую правильный атрибут / элемент для свойства, представляющего тип данных, которые я хочу представить?
<b>используется для представления смелые элементы.использую ли я атрибут / элемент только для отображения? Если да, можно ли удалить элемент и родительский элемент, стилизованный с помощью CSS?
С<b>является презентационным, и я использую его для презентации, да. И с тех пор<b>элемент влияет на всю<label>, его можно удалить и применить стиль к<label>.
цель семантического HTML-кода-не упростить дизайн и редизайн или избежать встроенного стиля, а помочь синтаксическому анализатору понять, что представляет этот конкретный тег в вашем документе. таким образом, приложения могут быть создано (т. е. поисковая система), чтобы разумно решить, что ваш контент обозначать и классифицировать соответствующим образом.
поэтому имеет смысл использовать свойство CSS content: чтобы добавить кавычки вокруг текста, расположенного в <q> тег (он не имеет значения для данных, содержащихся в вашем документе, кроме этой презентации), но нет смысла использовать то же свойство CSS для добавления символа © в нижний колонтитул, поскольку он имеет значение в ваших данных.
то же самое относится и к атрибутам. С помощью width и на <img> тег, представляющий значок размером 16x16, имеет смысл, поскольку важно понять значение <img> тег (значок может иметь разные представления в зависимости от размера, на котором он отображается). Использование тех же атрибутов на <img> тег, представляющий миниатюру большего изображения, не делает.
иногда вам нужно будет добавить не-семантические элементы, чтобы иметь возможность достичь желаемой презентации, но обычно этого можно избежать.
нет неправильных элементов. Есть неправильное использование отдельных элементов. <b> Не следует использовать при добавлении акцент. <small> следует использовать для юридического подтекста, а не для уменьшения текста (см. в HTML5 - раздел 4.6.4 почему) и т. д... Все элементы имеют определенный сценарий использования, и все они представляют данные (минус презентационные элементы, но в некоторых случаях они используются). Никакие элементы не должны быть установлены в сторону.
атрибуты-это другое дело. Большинство атрибутов носят презентационный характер. Такие атрибуты, как <img border> и <body fgcolor> редко имеют значение в данных поэтому, вы не должны их использовать (за исключением тех редких случаев).
поисковые системы являются хорошими примерами того, почему семантические документы так важны. микроформаты - это предопределенный набор элементов и классов, которые можно использовать для представления данных, которые поисковые системы будут понимать определенным образом. информация о цене продукта в Google Searches является примером семантики в работе.
использование предопределенных правил в стандартах set для хранения информации в документе позволяет сторонним программам понимать, что кажется стеной текста без использования эвристических алгоритмов, которые могут быть подвержены сбоям. Это также помогает читателям экрана и другим приложениям доступности более легко понимать контекст, в котором представлена информация. Это также очень помогает ремонтопригодности вашей разметки, так как все связано с определением набора.
лучшим примером, вероятно, является CSS Zen Garden.
цель этого сайта-продемонстрировать, что возможно только с дизайном на основе CSS, со строгим отделением контента от дизайна. Таблицы стилей, внесенные различными графическими дизайнерами, используются для изменения визуальной презентации одного HTML-файла, производящ сотни различных дизайнов. Сама разметка HTML никогда не меняется между различными конструкциями.
по каждому страницы Дизайн, вы бы ссылку на CSS-файл из проекта.
каков фактический смысл разделения содержания и представления?
Это скорее философия чем-то конкретным. В общем, это означает, что вы должны сохранить семантику контента, думать о своем контенте как о части структурированной информации. И это также означает, что вы должны держать все эстетические детали подальше от этой структурированной информации.
это просто означает, чтобы избежать inline css?
Как уже отмечалось выше, встроенные стили не имеют ничего общего с семантикой вашего контента и их следует избегать любой ценой. Но это не так!--11-->просто что.
это просто означает, если после написания html в соответствии с дизайном, то если тогда, если мы хотим сделать какие-либо изменения в дизайне, то это должно быть только с 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". Всегда старайтесь добавить смысл по содержанию, а не по стилю. Балансирование-само по себе искусство. :)