必须唯一且为直接子元素，因其是页面唯一语义锚点；嵌套或重复会导致辅助技术误判、seo降权及lighthouse报错。

HTML语义化标签本身没有“绝对优劣”，只有“用对”或“用错”——误用比不用更伤 SEO、可访问性和团队协作。

为什么

只能出现一次，且不能嵌套在

里

浏览器和屏幕阅读器把 <main></main> 当作全页唯一内容焦点。嵌套在 <header></header> 或 <nav></nav> 中，等于告诉辅助工具“导航栏里藏着主内容”，逻辑冲突；重复出现会让解析器无法判断哪块是真正核心。

• <main></main> 必须是 的直接子元素（或仅嵌套在 <article></article> 内）
• 服务端模板或 CMS 渲染时容易因条件分支漏判，导致多个 <main></main> 同时输出
• DevTools 的 Accessibility 面板会直接标红提示 “Multiple main landmarks”

<section></section> 和 <article></article> 的核心区别不是内容长短

区分关键在“独立分发能力”：是否能脱离当前页面单独存在、被 RSS 抓取、被搜索引擎作为独立条目索引。

html-ppt-to-pdf

将使用 `

` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。

下载

• <article></article>：博客正文、新闻稿、用户评论——带完整元信息（作者、时间、标题），可复用
• <section></section>：文章里的“背景介绍”“技术原理”“总结”——主题明确但依赖上下文，无独立语义
• 常见错误：把整页产品列表包进一个 <section></section>，其实每条商品都该是独立的 <article></article>

标题跳级（<h1></h1> → <h4></h4>）不是样式问题，是结构断裂

辅助技术和 SEO 爬虫靠 heading 层级建立内容树。跳级会让 <h4></h4> 被识别为新章节起点，上层内容被跳过或归类错误。

• 动态渲染场景最危险：JS 插入的标题没校验已有层级，比如从 CMS 拿到的 <h3></h3> 直接塞进 <main></main>，而页面已有 <h1></h1>
• 用 remark-lint-heading-increment 在构建时拦截 Markdown 渲染出的跳级 HTML
• 别用 CSS 把 <h2></h2> 改成小字号假装是 <h4></h4>——语义和视觉必须一致

alt 和 <label></label> 缺失不是“体验不好”，是功能不可用

当图片不加载、屏幕阅读器启用、或 JS 失效时，<img alt=""> 没 alt 就等于空白，<input> 没 <label for="id"></label> 就等于无法聚焦——这不是降级，是缺失。

• alt="" 仅适用于纯装饰图（如分隔线），功能性图片必须描述作用或内容
• 表单控件优先用显式 <label for="id"></label>，避免隐式包裹（<label><input></label> 在部分旧浏览器中不兼容）
• CI 流程里加 HTML validator 检查，比如使用 html-validate 或 Lighthouse 的 Accessibility audit

最容易被忽略的是：语义化不是写完再补的“加分项”，而是从第一行 开始就要决策的结构前提。一旦 DOM 树生成，错误的语义就已固化在可访问性树和爬虫索引路径里，后期修复成本远高于初始设计投入。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！