Jit*_*yas 6 html css xhtml accessibility semantic-markup
分离内容和演示文稿的实际含义是什么？
它是否意味着避免内联css？
这是否意味着设计应该能够在不改变HTML的情况下进行操作？
我们真的可以从CSS中改变设计吗？
我们应该避免使用哪个X/HTML标记来保持内容和表示的分离？
内容和演示文稿的分离是否对辅助功能/屏幕阅读器用户有帮助？......还是程序员/开发人员/设计师？
And*_*ore 12
定义内容和演示文稿时,请将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属性添加©没有任何意义您的页脚中的符号,因为它在您的数据中有一个值.
同样适用于属性.在表示大小为16x16的图标的标记上使用widthand height属性具有<img>语义意义,因为理解<img>标记的含义很重要(图标可以根据其显示的大小而具有不同的表示).在<img>表示较大图像的缩略图的标签上使用相同的属性则不会.
有时您需要添加非语义元素才能实现您想要的演示文稿,但通常这些元素是可以避免的.
没有错误的元素.特定元素的使用有误.<b>添加重点时不应使用.<small>应该用于合法的子文本,而不是使文本更小(参见HTML5 - 第4.6.4节为什么)等等...所有元素都有一个特定的使用场景,它们都代表数据(减去表示元素,但它们确实如此)在某些情况下有用).不应该留下任何要素.
属性是另一回事.大多数属性都是表现性的.属性,如<img border>和<body fgcolor>很少有意义的数据您代表因此请不要使用它们(除了那些极少数情况下).
搜索引擎是一个很好的例子,说明为什么语义文档如此重要.微格式是一组预定义的元素和类,您可以使用它们来表示搜索引擎将以某种方式理解的数据.Google搜索中的产品价格信息是工作中语义的一个示例.
通过使用设定标准中的预定义规则将信息存储在文档中,允许第三方程序在不使用可能容易出现故障的启发式算法的情况下理解看似文本的墙.它还有助于屏幕阅读器和其他辅助功能应用程序更容易理解信息的呈现环境.它还极大地帮助了标记的可维护性,因为所有内容都与设置定义相关联.
最好的例子可能是CSS Zen Garden.
该网站的目标是展示仅基于CSS的设计可能实现的内容,并严格将内容与设计分离.由各种图形设计师贡献的样式表用于改变单个HTML文件的可视化表示,产生数百种不同的设计.HTML标记本身永远不会在不同的设计之间发生变化.
在每个设计页面上,您都有一个链接来查看该设计的CSS文件.