语义结构

HTML的本质

HTML的创始人是想要一种标准手段来共享粒子物理文档的科学家他们几乎没有兴趣的视觉形式的文档出现在电脑屏幕上实际上,HTML最初旨在强制实现内容结构和图形设计的清晰分离的目的是创建一个万维网页面将显示在每一个系统和浏览器可用,包括“读”的浏览器网页文本视力受损的用户,可以准确地解释自动搜索和分析引擎。

网络的发明者没有意识到网络的图形和显示潜力,因此,HTML的设计并未考虑显示因素他们非常担心web文档machine-friendly他们制作文件,只有机器(或粒子物理学家)想要读在专注于文档的结构逻辑时,他们忽略了对图形设计和排版的视觉逻辑的需求缺乏对网络的视觉强调是导致网页设计师在尝试让网页看起来像他们希望看起来的方式时所面临的压力的原因这种压力导致浏览器软件公司开始忽视正确的HTML标准,并允许其他视觉和布局功能或HTML扩展在其浏览器中工作。

例如,大多数图形设计者避免在HTML中使用标准的标题元素(<标题><H2>,等等)因为它们缺乏细微之处:在大多数网络浏览器中,这些元素使得标题看起来非常大(<标题><H2>)或小得可笑(<H4><H5><H6>)但是header元素在HTML中没有创建图形设计它们的唯一目的是指定标题重要性的层次结构,以便人类读者和自动搜索引擎都可以查看文档并轻松确定其信息结构只是偶然地,浏览器设计者通过为每个标题元素分配不同的类型大小和粗体级别来为HTML标题创建可视层次结构,尽管这些类型大小在HTML语言中往往有些限制。

幸运的是,CSS允许作者改变元素的视觉呈现,以满足他们的设计和视觉偏好,同时保持潜在的语义(“语义”字面意思是“意义”)与网络的初衷一样,屏幕阅读器和其他辅助技术在很大程度上忽略了视觉样式,主要关注语义和结构。

使用标题内容结构

当遇到冗长的网页时,有视力的用户经常快速滚动页面并查找大而粗的文本(标题)以了解页面的结构和内容屏幕阅读器和其他辅助技术用户还能够浏览网页的标题结构,假设使用真正的标题(而不是文本风格是大的和/或粗体显示)这意味着用户可以查看页面上所有标题的列表,或者可以按标题读取或跳转,甚至可以直接导航到顶级标题(<标题>),一级标题(<H2>),三级标题(<H3>),等等。

例子

查看您的某个网页的内容结构在文本框中输入网页URL,按按钮,然后选择侧栏中的“大纲”选项卡。

页面应以分层方式构建,通常具有一个1度标题(<标题>)是最重要的(通常是页面标题或主要内容标题),然后是第二度标题(<H2>- 通常是主要的章节标题),低至3度标题(分段)<H2>), 等等Technically, lower degree headings should be contained within headings of the next highest degree (i.e., one should not skip heading levels, such as from an<H2>到一个<H4>,文档)以下大纲显示web页面可能包含的层次结构实际上,它表示此页面的主要内容部分的层次结构,具有不同程度的标题以表示更高或更低级别的内容层次结构您可以单击任何标题项以跳转到此页面中的该部分。

正确使用标题

Do not use text formatting, such as font size or bold to give the visual appearance of headings - use actual heading (<标题>-<H6>所有内容的标题。辅助技术和其他浏览器依赖页面的文字标记来确定结构粗体或显示的条目在一个更大的字体不解释结构元素。

同样,不要使用标题来仅获得视觉效果。例如,如果您想要突出显示或强调内容中不是标题的元素(例如我使用上一个句子),请不要使用标题元素来实现您想要的视觉效果相反,使用字体大小、粗体或斜体实际上,您应该使用样式来实现视觉效果如果你想强调一些东西,你在技术上应该使用<强>元素而不是<大胆><EM>元素而不是<I>粗体和斜体(<I>)都意味着视觉重点,而强劲,强调(<EM>)表明语义强调在视觉上,<b><强>,和<EM><I>看起来完全一样,不幸的是,屏幕阅读器通常会对它们进行相同的处理(如果有所区别),但开发人员应该使用更合适的HTML元素。

正确使用列表

HTML列表 -<UL>< ol >,和<DL>- 还传达分层内容结构这些规则对他们的使用当没有顺序或重要性顺序时,应使用无序列表有序列表显示进展或序列应明确使用定义列表来呈现定义结构与标题一样,列表应正确使用并用于正确的目的无序和有序列表应始终包含列表项定义列表必须始终具有定义说明空列表是不正确的HTML列表不应仅用于缩进或其他布局目的嵌套列表应该正确编码。