При определении содержания и представления просмотрите ваш 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 и height в теге <img>, представляющем значок размером 16x16, имеет смысловой смысл, поскольку важно понимать значение тега <img> (значок может иметь различные представления в зависимости от размера это отображается в). Использование тех же атрибутов в теге <img>, представляющем эскиз большого изображения, не позволяет.
Иногда вам нужно будет добавить несемантические элементы, чтобы получить желаемую презентацию, но обычно этого можно избежать.
Нет неправильных элементов. Неправильное использование определенных элементов. <b> не следует использовать при добавлении акцента. <small> следует использовать для легального подтекста, а не для уменьшения размера текста (см. HTML5 - раздел 4.6.4 , почему) и т. Д. ... Все элементы имеют определенный сценарий использования и все они представляют данные (минус презентационные элементы, но в некоторых случаях они действительно используются). Ни один элемент не должен быть отложен.
Атрибуты - это другое. Большинство атрибутов носят презентационный характер. Такие атрибуты, как <img border> и <body fgcolor> редко имеют значение в данных, которые вы представляете, поэтому вам не следует их использовать (за исключением тех редких случаев).
Поисковые системы являются хорошим примером того, почему семантические документы так важны. Микроформаты - это предопределенный набор элементов и классов, которые вы можете использовать для представления данных, которые поисковые системы будут понимать определенным образом. Информация о цене продукта в Google Searches является примером семантики в действии.
Использование предопределенных правил в установленных стандартах для хранения информации в вашем документе позволяет сторонним программам понимать то, что кажется стенкой текста, без использования эвристических алгоритмов, которые могут быть подвержены сбоям. Это также помогает программам чтения с экрана и другим приложениям для обеспечения доступности более легко понять контекст, в котором представлена информация. Это также значительно облегчает поддержку вашей разметки, так как все связано с определением набора.