Семантическая ценность span

Question

Элемент span выглядит точно так же, как div, но на уровне строк, а не на уровне блоков. Однако я не могу думать ни о каких выгодных логических делениях, которые может обеспечить элемент span.

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

Похоже, что во всех случаях другие элементы лучше подходят для добавления семантического значения, что делает span просто элементом макета. Это правда?

Answer 1

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

Затем волшебник вызвал могилу и приказал атаковать приближающуюся армию. gavenwist сопротивлялся, но волшебника wistwand был слишком мощным.

Может отображаться как

Тогда волшебник вызвал могилу и приказал атаковать приближающуюся армию. gavenwist сопротивлялся, но wistwand волшебника был слишком силен.

Другим хорошим примером такого рода вещей являются микроформаты , которые позволяют создавать произвольную структуру в HTML:

<span class="tel">
 <span class="type">home</span>:
 <span class="value">+1.415.555.1212</span>
</span>

Преимущество span по сравнению с div состоит в том, что span могут появляться почти везде, потому что они являются встроенным содержимым, а div являются блочными элементами, поэтому они могут появляться только внутри некоторых других элементов.

Answer 2

Очень полезным преимуществом было бы отмечать изменения в языке. Например.

<p>Welcome to Audi UK, <span lang="de">Vorsprung durch Technik</span>.</p>

Программы чтения с экрана с несколькими языковыми возможностями могут использовать это.

Так что они не презентационные, просто общие. Фактически, интервалы редко являются презентационными, при условии, что используется семантически значимое имя класса, например, «орфографическая ошибка», а не «жирный красный текст».

Answer 3

<div class="name">
  <span class="firstname">John</span>
  <span class="lastname">Doe</span>
</div>

Это полностью зависит от того, что вы хотите выразить. Если разметка имени имеет для вас семантическую ценность (будь то просто ловушка для CSS для форматирования имен или извлечения их с использованием некоторого языка сценариев), тогда вы можете использовать span.

Answer 4

Я часто использую SPAN, когда хочу, чтобы JavaScript анализировал элемент и вставлял какое-то значение в тег, например:

<span datafield="firstname"></span>

Будет добавлено значение позже, так что в этом случае оно имеет значение, хотя только значение, которое я решу дать ему. В этом случае идеальным является тот факт, что диапазон не влияет на макет.

Answer 5

Игнорирование CSS, так как это даст семантическое значение, когда охватывает обеспечить дополнительную семантическую ценность нарезать предложение или строку слова?

Игнорирование CSS (и другой разметки, отличной от HTML), никогда. Единственная цель в жизни <<code>span> - переносить разметку, которую вы не можете выразить в HTML. Разметка, такая как <<code>span style="dropCap">, которая не имеет эквивалента в HTML, но существовала в печатных изданиях в течение сотен лет и которая всегда применяется только к одному символу - первой букве элемента (статьи, что угодно) , не вызывая разрыв слова (или любой больший разрыв).

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

Да и нет. Единственное реальное значение <<code>span> в том, что оно семантически нейтрально. То есть, в отличие, например, от <<code>p>, он не делает ничего, что вы могли бы захотеть, чтобы он не делал, когда вы используете его для переноса другой разметки. И бывают случаи, как <<code>span style="dropCap"> выше, когда вам не нужны другие эффекты.

Answer 6

Для тегов

span нужен атрибут class или id, чтобы придать им значение.

например. 0123 456789

Answer 7

span s может фактически быть носителями семантической информации в форме class атрибутов. Используется микроформатами.

Answer 8

Элементы SPAN (и DIV) сами по себе обычно считаются семантически нейтральными. Хороший подход состоит в том, чтобы использовать семантическую разметку настолько, насколько это возможно, но иногда вы сталкиваетесь с ситуациями, когда существующие HTML-элементы, которые обеспечивают семантическое значение (EM, STRONG, ABBR, ACRONYM и т. Д., И т. Д.), Не подходят семантически. для вашего контента. Поэтому следующим шагом является использование семантически нейтрального SPAN или DIV с семантически значимым идентификатором или классом.

Answer 9

Если вы хотите применить правила форматирования к части содержимого (например, отдельному слову или предложению) тега. Вы можете использовать тег span. Иногда это называется форматированием без тегов.

В конвертере EBNF -> XHTML я использую интервалы для применения другого формата к литералам и токенам.

Answer 10

Значение SPAN: «это (общий) диапазон (например, текстового) контента». Сравните с DIV, что означает «это логическое разделение (то есть общий раздел документа)».

SPAN - это, в основном, крючок для подвешивания стилей (можно использовать <span style='color:blue'> вместо <font color='blue'>).

С Спецификация :

Элементы DIV и SPAN в сочетании с атрибутами id и class предлагают общий механизм для добавления структуры в документы. Эти элементы определяют контент как встроенный (SPAN) или блочный (DIV), но не навязывают контент другим формам представления. Таким образом, авторы могут использовать эти элементы в сочетании с таблицами стилей, атрибутом lang и т. Д., Чтобы адаптировать HTML к своим собственным потребностям и вкусам.

Предположим, например, что мы хотели сгенерировать HTML-документ на основе базы данных клиентской информации. Поскольку HTML не содержит элементов, которые идентифицируют такие объекты, как «клиент», «номер телефона», «адрес электронной почты» и т. Д., Мы используем DIV и SPAN для достижения желаемых структурных и презентационных эффектов. Мы можем использовать элемент TABLE следующим образом для структурирования информации:

<!-- Example of data from the client database: -->
<!-- Name: Stephane Boyera, Tel: (212) 555-1212, Email: sb@foo.org -->

<DIV id="client-boyera" class="client">
<P><SPAN class="client-title">Client information:</SPAN>
<TABLE class="client-data">
<TR><TH>Last name:<TD>Boyera</TR>
<TR><TH>First name:<TD>Stephane</TR>
<TR><TH>Tel:<TD>(212) 555-1212</TR>
<TR><TH>Email:<TD>sb@foo.org</TR>
</TABLE>
</DIV>

<DIV id="client-lafon" class="client">
<P><SPAN class="client-title">Client information:</SPAN>
<TABLE class="client-data">
<TR><TH>Last name:<TD>Lafon</TR>
<TR><TH>First name:<TD>Yves</TR>
<TR><TH>Tel:<TD>(617) 555-1212</TR>
<TR><TH>Email:<TD>yves@coucou.com</TR>
</TABLE>
</DIV>