HTML 中没有 section_ 标签,下划线非法,浏览器将其视为无语义的自定义元素;应使用标准 section 标签配合 class(如 user_profile)实现语义化与命名自由。

HTML 里没有 section_ 这个标签,它不是标准 HTML 元素,直接写进去浏览器会当作未知标签处理,不带语义、不触发默认样式、无障碍支持也失效。
为什么浏览器不认 section_
HTML 标准定义的分区元素只有 section、article、nav、aside、main、header、footer 等。下划线(_)在标签名中是非法字符,解析器遇到 <section_> 会按“自定义元素未注册”处理——既不会报错,也不会赋予任何结构含义。
- 开发者工具里能看到这个标签,但 DOM 中它的
nodeName是大写的SECTION_,且isConnected为 true,容易误以为“能用” - 屏幕阅读器完全忽略它,无法被
role="region"之类补救,因为没语义基础 - CSS 中写
section_ { }不生效,必须用属性选择器如[section_]或加 class 才能选中
想实现“带下划线命名的分区”,正确做法是用 section + class
语义化优先,命名自由度交给 class 属性。比如你要区分“用户信息分区”“订单列表分区”,直接用语义化标签配合有意义的 class:
<section class="user_profile"> <h2>用户资料</h2> <p>昵称:张三</p> </section> <section class="order_list"> <h2>我的订单</h2> <ul><li>订单 #123</li></ul> </section>
-
class值支持下划线、短横线、数字,无限制,且可被 CSS、JS、自动化测试精准定位 - 保持了
section的语义:独立主题内容块,对 SEO 和辅助技术友好 - 避免用
div替代——div没语义,加再多 class 也换不来section的结构价值
如果真要动态生成带下划线的标签名(如模板引擎场景),别硬造标签
某些模板语法(如 Jinja2、EJS)可能拼出 <{{ tag_name }}>,若 tag_name = "section_",结果就是无效标签。这时候该做的是:
立即学习“前端免费学习笔记(深入)”;
- 检查数据源:确认变量是否本意就是标签名,还是误把 class 名当标签名传进来了
- 服务端/构建时校验:对
tag_name做白名单过滤,只允许["section", "article", "aside"]等合法值 - 前端运行时兜底:用
document.createElement("section")而非字符串插入,再 setAttribute 加 class
真正容易被忽略的是:很多开发者看到 <section_> 在页面上“显示正常”,就以为没问题。但它在打印样式、键盘焦点流、语音导航、Lighthouse 评估里全会掉链子——这些地方不看视觉,只认标准语义。











