HTML5语义化标签默认为display:block，无需手动设置；仅旧版IE兼容或样式被覆盖时才需显式声明；误用语义标签强行设block会损害可访问性与SEO。

HTML5 语义化标签（如 article、section、header、nav、aside、footer）在现代浏览器中默认就是 display: block，不需要手动添加该样式。

语义标签天生就是块级行为

这些标签在无 CSS 干预的纯 HTML 环境下，视觉上仍独占一行、撑满父容器宽度，表现与 div 一致。这是因为浏览器内置的默认样式表已为其设定了 display: block。你无需重复写：

• 不推荐：article { display: block; }
• 无需写：它们本来就是块级，加了也不报错，但纯属冗余

什么时候才需要显式设置 display: block

仅在以下两种实际场景中才需主动干预：

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

• 为旧版 IE（如 IE8 及更早）提供兼容支持——这些浏览器不认识语义标签，需用 document.createElement('article') + CSS article { display: block; } 激活渲染
• 重置被其他样式意外覆盖的情况，比如某全局规则写了 * { display: inline !important; }，此时需针对性恢复 article, section { display: block; }

别为了“语义”硬套 display: block

如果内容逻辑本身不构成独立语义单元（例如一段文字里几个词想加背景色），强行用 article 包裹再设 display: block，反而会误导辅助技术与搜索引擎。此时更合适的是：

立即学习“前端免费学习笔记（深入）”；

• 用 span + display: block（需明确控制尺寸/边距时）
• 或直接用 div，语义中立，不引入额外含义
• 关键看结构意图，而不是“让元素变块”这个动作本身

链接（a）等内联元素的特殊情况

语义标签本身不涉及这个问题，但常被连带问到：像 a 这类默认 inline 的元素，若想让它具备块级能力（比如做导航按钮），确实要加 display: block。这不是语义问题，而是功能需求——这时加是合理且必要的。