不是“引言标签”,而是专用于外部长引用的语义标签,必须嵌套等块级元素,且cite属性仅接受有效url;出处需用显式标注。

HTML 没有叫“引言标签”的标准元素。开发者常把 <header></header>、<blockquote></blockquote>、<q></q> 甚至 <aside></aside> 误称为“引言标签”,但它们语义完全不同,混用会直接破坏可访问性与 SEO。
别再用 <header></header> 当“文章开头”容器
<header></header> 是页面或区块的**元信息区**,不是内容引言。它该放标题、徽标、作者信息、发布日期等,而不是第一段正文。
- 错误:把整段导语包进
<header><p>本文探讨……</p></header>—— 这会让读屏器跳过正文,误判为导航/装饰内容 - 正确:用
<header></header>包<h1></h1>+<time></time>+<address></address>,导语仍用<p></p>放在<main></main>内 - 注意:
<header></header>可以嵌套(如<article></article>内也可有<header></header>),但不能替代段落结构
<blockquote></blockquote> 必须带 cite 属性且仅用于独立引用
没 cite 的 <blockquote></blockquote> 是语义残缺——它不是“缩进样式”,而是声明“这段文字来自外部权威来源”。浏览器和爬虫只认 cite 值为有效 URL 时才认可引用关系。
- 错误:
<blockquote>这个方案很激进</blockquote>(无cite)或<blockquote cite="张三《前端杂谈》"></blockquote>(值非 URL) - 正确:
<blockquote cite="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/blockquote"><p>The <blockquote> HTML element indicates that the enclosed text is an extended quotation.</p></blockquote> - 性能影响:SSR 渲染时若
cite是无效 URL,部分无障碍工具会静默降级,但不会报错,隐患难排查
嵌套引用必须控制在单层,<q></q> 不能套 <q></q>
HTML 允许 <blockquote></blockquote> 里嵌 <q></q>(表示转述中的短引),但禁止 <q></q> 套 <q></q> 或多层 <blockquote></blockquote>。语义层级一旦超过一层,读屏器就无法可靠映射引用路径。
- 可行:
<blockquote cite="a"><p>他说:“<q>先写测试</q>”,然后重构。</p></blockquote> - 危险:
<blockquote cite="a"><blockquote cite="b"><q>他说<q>先写测试</q></q></blockquote></blockquote>—— 辅助技术可能丢弃内层来源 - 替代方案:真有多重出处,拆成两个独立
<blockquote></blockquote>,用上下文或<footer></footer>标注层级,比如“据 A 报道……;另据 B 研究指出……”
最易被忽略的点是 cite 属性的强制性——它不是可选装饰,而是引用成立的机器可读凭证。删掉它,等于把 <blockquote></blockquote> 降级为普通 <div>,但还带着误导性的语义外壳。</div>
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!











