跨度的语义值

Question

span元素看起来与div完全相同,但是在内联级别而不是在块级别.但是,我似乎无法想到span元素可以提供的任何有益的逻辑划分.

单句或单词(如果不包含在句子中)似乎是最小的逻辑部分.忽略CSS,因为CSS仅用于布局而不用于语义含义,跨度何时通过切断一个句子或一串单词来提供额外的语义值？

似乎在所有情况下,其他元素更适合添加语义值,使span成为纯粹的布局元素.这是真的？

Answer 1

Span可用于添加超出HTML范围的语义含义.这可以通过使用标识某些属性的类来完成.例如,如果您正在编写一部科幻小说,您可以使用span来识别构成的单词,因为您可能希望以不同的方式格式化,或者因为您可能希望拼写检查器忽略它们:

然后向导调用了<span class ="wizardword"> gravenwist </ span>并吩咐它攻击即将到来的军队.<span class ="wizardword"> gavenwist </ span>遭到拒绝,但向导的<span class ="wizardword"> wistwand </ span>过于强大.

这可以呈现为

然后巫师召唤了扫墓者并吩咐它攻击即将到来的军队.该gavenwist抵制,但精灵的wistwand是太强大了.

这种事情的另一个很好的例子是微格式,它允许在HTML中创建任意结构:

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

span与div的优势在于跨度几乎可以在任何地方出现,因为它们是内联内容,而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来设置名字的格式或使用某种脚本语言提取它们),那么您可以使用跨度.