HTML-теги: презентация против структурных - PullRequest
Новая
       23

HTML-теги: презентация против структурных

5 голосов
/ 14 февраля 2010

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

Например: в спецификации HTML 5 они не считают <small> презентационным.

В этом списке тегов - которые все поддерживают HTML 5 - какой тег является презентационным, а какой нет? 

<abbr>

<address>

<area>

<b>

<bdo>

<blockquote>

<br>

<button>

<cite>

<dd>

<del>

<dfn>

<dl>

<dt>

<em>

<hr>

<i>

<ins>

<kbd>

<map>

<menu>

<pre>

<q>

<samp>

<small>

<span>

<strong>

<sub>

<sup>

<var>

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

Если тег действителен в соответствии с W3C в принятых типах документов, то каковы преимущества того, чтобы не использовать тег xhtml с какой-либо точки зрения?

с точки зрения пользователя / удобства использования / доступности

если мы будем использовать больше тегов HTML, тогда страницы без CSS будут лучше.

с точки зрения разработчика

если мы используем больше доступных тегов в HTML, чем нам не нужно использовать <span class=className">

на это требуется больше времени, и он использует больше места для размещения, чем теги в HTML и CSS.

Например:

вместо использования: 

<span class="boldtext">Some text<span>

.boldtext {font-weight:700}

Мы можем использовать: 

<b>Some text<b>

b  {font-weight:700}

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

Мы также можем сделать это: 

<b class="important">Some text<b>

b.important  {font-weight:700}

и всякий раз, когда мы хотим изменить вес шрифта, мы можем изменить css только в обоих примерах.

Если w3c признает допустимым тег в своих распознанных типах документов, то в чем преимущества того, что вы не используете какие-либо теги представления X / HTML, которые не распознаются непосредственно W3C или спецификациями HTML?

Можем ли мы изменить какие-либо параметры дизайна, не меняя ничего в HTML? Это вписывается в мем разделения содержания и представления?

Если какой-либо тег HTML нарушает правило разделения, то не нарушается ли свойство css Content?

см. статью .

Почему разрешены атрибуты HEIGHT и WIDTH для элемента IMG ?. не нарушает ли это правило разделения? Хорошие дебаты по этому вопросу можно найти здесь .

Ответы [ 3 ]

7 голосов
/ 14 февраля 2010

W3C определяет семантику тегов. В технических документах HTML5 указаны условия использования различных тегов.

* HTML5 1005 *

Для продолжения вашего примера нет ничего плохого в использовании <b> для полужирного начертания текста, если:

  • Текст, выделенный жирным шрифтом, представляет собой единое целое, уже представленное тегом:

    Неправильно:
    <label for="name"><b>Name:</b></label>

    Правильно: (используйте CSS для стилизации элемента)
    label { font-weight: bold; }
    <label for="name">Name:</label>

  • Текст выделен жирным шрифтом, чтобы придать дополнительный акцент и вес разделу или словам блока текста.

    Некорректное:
    <p>HTML has been created to <b>semantically</b> represent documents.</p>

    Правильно: (Использовать <strong>)
    <p>HTML has been created to <strong>semantically</strong> represent documents.</p>

Ниже приведен пример правильного использования тега <b>:

Правильно:
<p>You may <b>logout</b> at any time.</p>

Я понимаю, что, кажется, нет большой разницы между приведенным выше примером и примером, использующим <strong> в качестве правильного примера. Чтобы просто объяснить это, слово семантически играет важную роль в предложении, и его акцент усиливается жирным шрифтом, а выход из системы просто выделен жирным шрифтом для целей презентации.

Следующее использование будет неправильным.

Неправильно:
<p><b>Warning:</b> Following the procedure described below may irreparably damage your equipment.</p>

Правильно: (Используется для добавления сильного акцента, поэтому используйте <strong>)
<p><strong>Warning:</strong> Following the procedure described below may irreparably damage your equipment.</p>

Использование <span class="bold"> является запахом разметки и просто не должно допускаться. Элемент <span> используется для применения стиля к встроенным элементам, когда универсальный тег представления (т. Е .: <b> не применяется) Например, чтобы сделать текст зеленым:

Неправильно:
<p>You will also be happy to know <span class="bold">ACME Corp</span> is a <span class="eco-green">certified green</span> company.</p>

Правильно: (пояснение ниже)
<p>You will also be happy to know <b>ACME Corp</b> is a <em class="eco-green">certified green</em> company.</p>

Причина, по которой вы хотели бы использовать <em> вместо слова <span> для слова зеленый, заключается в том, что здесь зеленый цвет используется для добавления выделения к факту, что ACME Corp является сертифицированная зеленая компания.

Ниже приведен хороший пример использования тега <span>:

Правильно:
<p>You may press <kbd>CTRL+G</hbd> at any time to change your pen color to <span class="pen-green">green</span>.</p>

В этом примере слово зеленый стилизовано в зеленом цвете просто для отражения цвета, а не для добавления какого-либо акцента (<em>) или сильного акцента (<strong>).

7 голосов
/ 14 февраля 2010

Полное различие между элементами «презентация» и «структура», на мой взгляд, является вопросом здравого смысла, а не определенным W3C или кем-то еще. : -Р

Элемент, который описывает каково его содержимое (в отличие от как должно выглядеть), является элементом структуры. Все остальное, по определению, не является структурным, и поэтому является элементом представления.

Теперь я отвечу на вторую часть вашего поста. Я понимаю, что это спорная тема, но я все равно выскажусь.

Хорошо сделанный HTML не должен заботиться о том, как он должен выглядеть. Это работа таблицы стилей. Причина, по которой он должен оставить это для таблицы стилей, заключается в том, что вы можете поставить одну таблицу стилей для настольных компьютеров, другую для нетбуков, смартфонов, «гантелей» (из-за отсутствия лучшего термина), Kindles и (если вы заботитесь о доступности, и вам следует) программы чтения с экрана.

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

Чтобы использовать ваш пример, вместо использования <b>, вы должны спросить себя , что должна выразить смелость. Если вы пытаетесь выразить заголовок раздела, используйте один из тегов заголовка (от <h1> до <h6>). Если вы пытаетесь выразить сильный акцент, используйте <strong>. Вы поняли идею. Выразите что , а не как ; оставьте инструкции дизайнерам таблиц стилей.

0 голосов
/ 14 февраля 2010

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

Пример использования <b> не является семантическим, потому что <b> не имеет смысла. <span class="boldtext"> также не является семантическим. Таким образом, их использование сводит представление в структуру.

...