html - 视觉用户代理的语义标记的实际好处是什么

Question

在多年创建 HTML 文档并尝试跟上不同的标记模式和使标记最有意义的最佳实践之后，我经常想知道这些语义将如何开始为最终用户带来返回。

让我们将问题介绍为:您有两个文档......

第一个文档使用当代 HTML 中所有最合理的标准化部分来创建一个丰富的文档结构，其中散布着一些 RDFa 和选择的微格式，以作为一个典型的 HTML 表达片段。

第二个文档 与第一个文档的结构相同，只是标签已全部转换为 div 和 span，并且所有类名都是纯粹的样式钩子(Hook):所有语义都已被删除，但页面呈现高效且视觉上与第一个相同。

对于通过桌面或移动浏览器与此 HTML 文档进行交互的有远见的人来说，第一个文档相对于第二个文档的直接好处很感兴趣。您的回答可以发明内容的性质并指向特定的浏览器功能以证明您的观点。

您的答案不应包括:

• 屏幕阅读器(用户视力良好)
• SEO(搜索引擎可见性的间接好处是题外话)
• 语义标记更易于维护(这也是间接的)

Answer 1

(当然，这还不完整。这只是我在打字时想到的。)

这个答案假设:对于没有屏幕阅读器的桌面/移动浏览器的用户；页面仅包含 div 和 span 元素(具有允许的属性)；只有今天相关的内容( not tomorrow , not in 2400 years )。

缺少元数据

• 用户在为页面添加书签时不会看到图标(icon 链接类型；除非您在根目录中放置 ICO img)或标题(title 元素)
• 创建快捷方式时没有图标(apple-touch-icon、msapplication-TileImage、...)
• 当用户在此处发布/引用/共享您的页面时(例如 Open Graph Protocol)，某些 Web 应用程序将无法从您的页面中提取元数据
• 浏览器不会自动检测您的提要(alternate 链接类型)
• prefetch、prerender、dns-prefetch、pingback 等链接类型没有(性能)优势， prev/next, ...

(请注意，部分可以使用 HTTP header 完成。)

缺少默认功能

如果没有 a、input、textarea、button 等，相应的功能将需要 JavaScript。没有 JavaScript 的用户无法点击链接、搜索、上传文件、提交表单……

没有(或有限)JS 支持的原因:

• 用户停用 JS(全局，仅用于站点/主机)
  • 故意，例如与 NoScript
  • 公司/管理员/等要求
• 无法加载 JS 文件(CDN 问题，...)
• 非常旧的浏览器
• …

此外，一些典型的导航机制可能默认不可用(在字段中切换；焦点；按 enter 激活；在链接文本中搜索(例如 Firefox 中的 '))。

缺少浏览器扩展提供的功能

有各种浏览器插件(或小书签等)可以解析标记并“做事”。

• 列出所有链接(Link Gopher，...)
• 创建大纲/目录(h1-h6)(例如 Table of Contents)
• 只显示页面的主要内容(例如 Readability ，...)
• 处理/排序/等。表格(表格)(例如table calculator，……)
• 提取元数据(例如 Dublin Core Viewer，...)
• 微格式(例如 Operator，...)
• RDF (RDFa, …)(例如 RDFa Developer、Semantic Radar、OpenLink Data Explorer、…)
• 知识共享(例如 OpenAttribute , …)
• …

缺少默认的“样式”

如果没有 CSS 支持，仅由 div 和 span 元素组成的页面可能难以阅读，甚至变得难以理解(想想复杂的数据表，例如示例)。

没有(或有限)CSS 支持的原因:

• 文本浏览器(Lynx，w3m，……)
• 非常古老的图形浏览器
• 用户停用 CSS(全局，仅站点，仅页面)
• 用户使用自己的样式表
• 无法加载 CSS 文件(CDN 问题，...)
• …

有限的可重用性

• 复制和粘贴:如果用户复制和粘贴一些内容和/或标记，而您的自定义 CSS 没有被“包含”(可能是许多工具的情况)，则可能很难甚至不可能理解/重用它内容/标记。
• 提取您的内容:其他人更难抓取您的内容(例如 Piggy Bank )和/或转换它(XSLT、XPath)