富有表现力的 HTML5 标签

在网站设计方面，有意义的元素是指具有内在含义的元素，能够有效地向浏览器和开发人员传达该含义。HTML5 引入了富有表现力的标签，使您能够确定网站上元素的用途。例如， 导航 元素定义导航链接，而 主要的 元素标识网页的主要内容（通常称为“页面”）。另一方面， 股利 元素缺乏内在含义，因此 Div 块不被视为有意义的元素。

利用 Webflow 您可以将那些标签合并到您的网站设计中以增强其可访问性和组织性。

通过本教程，您将发现：

1. 表达性标签的使用说明
2. 使用表达性标签的优势

利用表达性标签的技巧

在 Webflow 中，您可以通过以下方式为元素分配各种富有表现力的 HTML5 标签： 元素设置控制板。对于任何具有特定用途和固有含义的元素（例如，页眉、页脚、导航等），使用表达标签是明智的。

‍最重要的建议： 通过适当地使用每个表现元素来实现其预期目的，浏览器可以自动完成大部分工作，以增强该元素的可访问性！

Webflow 中可用的富有表现力的 HTML5 标签包括：

• 标头 — 为 document 或通常位于页面顶部的部分建立标题，提供介绍功能，可能包含标题元素、徽标、搜索表单等。
• 页脚 — 指定 document 或某个部分的页脚，其中可能包含作者信息、相关页面的链接等。
• 导航 — 表示 document 中的一组导航链接。常用于菜单、目录和索引
• 主要的 — 定义 document 的主要内容。 主要的 元素不应包含重复内容，例如导航链接、网站徽标、搜索表单等。
• 部分 — 划定 document 的一部分，将具有相似主题的内容分组在一起。Webflow 的 部分 元素配备了 部分 默认为 HTML5 标签。
• 文章 — 描述页面上独立的内容，例如论坛帖子、报纸文章或博客文章
• 在旁边 — 指定除主页内容之外的内容，例如侧边栏或标注
• 地址 — 指定 document 或文章的作者/所有者的联系信息‍
• 数字 — 区分独立内容（例如插图、图表、照片、代码块等）

要将表达标签集成到您网站的元素中：

1. 选择 Webflow 画布上的元素
2. 访问 元素设置面板
3. 从中选择适合所选元素的 HTML5 标签 标签落下

基本的： 某些元素（例如导航栏）具有预定义的 HTML5 标签，而 H1-H6 元素和列表等元素具有预先分配的语义含义，因此您无法为它们定义 HTML5 标签。

表达性标签的优点 

富有表现力的标签专门用于表达目的，不会影响您网站的视觉设计。但它们为设计师、开发人员和网站访问者提供了许多重要的好处。 

对于设计师和开发人员

富有表现力的 HTML5 标签可将有意义的元素与仅用于设计的元素区分开来，从而提高代码的可读性和可维护性。它们可帮助设计人员和开发人员以逻辑方式构建网站内容和标题层次结构。此外，HTML5 标签有助于提高网站性能和 SEO，因为与非语义代码相比，语义 HTML 通常可减轻文件大小。搜索引擎会优先考虑语义元素中的关键字，而不是 Div 元素等非语义元素中的关键字。

为了可访问性 

虽然视力正常的用户可以根据视觉设计直观地识别各种网页组件，但视障用户或网络爬虫在视觉上识别和理解网站组件方面面临挑战。通过使用富有表现力的 HTML5 标签对元素进行语义定义，我们可以告知网络爬虫和辅助技术（例如屏幕阅读器）网站的不同部分，从而更准确地呈现元素并将其传达给网站访问者。

了解更多：

• HTML5 语义元素和 Webflow：基本指南
• HTML：可访问性的良好基础
• 语义 HTML5 元素详解