SuperAPI AI 工具集

html5-semantic-elements

前端与建站

查看项目

更新于 10-16 08:48

技能介绍

用途:该规则用于在代码审查时检查模板、渲染后的 HTML 以及共享组件,确认浏览器最终面向用户的标记是否采用了恰当的语义化 HTML5 元素,而不是一律使用 div。语义元素可帮助屏幕阅读器用户直接跳转到 main 内容或 nav,也帮助搜索引擎理解内容层级。

主要能力:检查时可指出具体违反规则的元素、属性与路由;修复时将描述内容结构与用途的泛用 div 替换为对应语义元素;解释时说明语义 HTML 如何通过提供有意义的结构改善可访问性、SEO 和代码可维护性。

参考要点:页面结构使用 header、main、footer;独立内容用 article,分组内容用 section;导航用 nav,相关内容或侧栏用 aside。每页只允许一个 main,但可有多个 header、footer 或 nav。

使用方式:在审查模板、服务端渲染 HTML、共享组件输出的标记时应用该规则,检查最终浏览器可见的 HTML,而不仅是源模板。完整实现细节、代码示例和框架相关指南见 references/rule.md,规则页为 https://frontendchecklist.io/rules/html/html5-semantic-elements。

限制:资料未提供具体的安装命令、版本要求、收费方式或框架专项步骤,这些信息暂未提供。