嵌套 article 标签时如何避免层级混乱
嵌套使用 article 标签时，内层元素应作为外层内容的子部分，且必须包含独立的标题。
识别嵌套关系与独立标题
当页面中包含多个独立内容块时，外层 article 代表主文章，内层 article 代表其中的子部分。例如在影评页面中，外层 article 是整篇影评，内层 article 是用户评论。内层 article 必须包含自己的标题，如 h2 或 h3，以明确其独立身份。如果内层没有标题，浏览器会将其视为普通文本流，破坏了语义结构。
检查时，先找到外层 article 的开始标签，确认其包含的子元素。随后查看内层 article 是否紧跟在父级元素内部，且内部是否有 h1-h6 标签。如果内层 article 位于父级 article 外部，或者内部没有标题，则说明层级关系错误，需要调整 HTML 结构。正确的嵌套应确保内层 article 紧贴父级 article 的结束标签之前，且内部包含完整的标题信息。
避免在 address 元素中嵌套 article
HTML 规范规定，article 元素不能作为 address 元素的子元素。address 元素用于包含文章作者的联系信息，而 article 代表独立的内容块。如果将 article 放在 address 内部，会违反语义规则，导致浏览器无法正确识别结构。例如，在文章底部列出作者信息时，应将 address 放在 article 内部，而不是反过来。
排查时，使用浏览器开发者工具检查页面结构。搜索 address 标签，查看其子元素中是否存在 article。如果发现 article 是 address 的子元素，应立即将其移出。正确的做法是将 address 放在 article 内部，作为文章的一部分。这样可以确保作者信息与文章内容紧密关联，同时保持语义的准确性。
使用 ARIA 角色辅助结构验证
虽然 article 标签本身会隐式设置 ARIA 角色为 article，但在复杂嵌套结构中，手动检查 ARIA 属性有助于确认结构是否正确。浏览器会根据 HTML 语义自动应用这些角色，开发者可以通过检查元素属性来验证嵌套是否符合预期。例如，内层 article 应该继承父级 article 的上下文，但保持自身的独立性。
验证方法是在开发者工具中选中内层 article 元素，查看其 computed style 或 attributes 中是否包含 role 属性。如果 role 为 article，说明结构正确。如果 role 被覆盖或缺失，可能意味着嵌套关系不明确。此外，还可以使用无障碍测试工具检查页面结构，确保嵌套的 article 标签不会导致屏幕阅读器误读内容层级。
检查父级元素是否接受 flow content
article 标签属于 flow content（流内容）类别，因此它可以被任何接受流内容的父元素包裹。常见的父元素包括 body、section、div 等。然而，某些元素如 script 或 style 不接受流内容，不能作为 article 的父元素。如果将 article 放在这些元素内部，会导致 HTML 结构无效，浏览器可能无法正确渲染。
检查时，确认 article 的父级元素是否属于允许的类别。例如，检查 article 是否被包裹在 div 或 section 中，而不是 script 或 style 中。如果父级元素不合法，应将其替换为允许的元素。此外，还可以使用 HTML 验证工具扫描页面，确保所有 article 标签的嵌套关系符合规范，避免因父级元素不合法导致的结构错误。
资料与延伸阅读
你可以通过以下原始资料核对文中概念，并继续深入阅读。