html标签怎么分类_html常见标签类型划分【解析】

html标签应按语义功能分为结构级、内容级、交互级和嵌入级四类，而非简单按块级/行内划分；语义正确性直接影响可访问性、seo与协作效率。

HTML 标签按语义功能分四类，别按“块级/行内”硬套

浏览器不关心你写的是 <div> 还是 <code><span></span>，它只认渲染规则和默认样式；但人要维护代码，得靠语义分类。实际开发中真正影响协作、SEO 和可访问性的，是标签的语义角色，不是“能不能换行”这种表层表现。

常见错误是把 <div> 当万能筐，或为“语义化”硬套 <code><article></article> 却不管上下文。语义错位比样式错位更难调试——屏幕阅读器会读，搜索引擎会索引，但读错、索错。

• <header></header>、<nav></nav>、<main></main>、<footer></footer>：页面结构级，每个页面最多一个 <main></main>，嵌套层级别超过 2 层
• <h1></h1>–<h6></h6>、<p></p>、<blockquote></blockquote>：文本内容级，<h1></h1> 全局唯一，子标题必须严格嵌套（<h2></h2> 下不能直接跟 <h4></h4>）
• <button></button>、<a></a>、<input>：交互级，<a></a> 必须带 href 才算链接，空 href="#" 会滚顶且破坏可访问性
• <img alt="html标签怎么分类_html常见标签类型划分【解析】" >、<video></video>、<canvas></canvas>：嵌入级，<img alt="html标签怎么分类_html常见标签类型划分【解析】" > 必须有 alt，空字符串 alt="" 表示装饰图，非空字符串才参与语义描述

哪些标签浏览器默认 display 是 block？别猜，查 devtools

“<div> 是块级，<code><span></span> 是行内”这种说法早过时了。display 是 CSS 属性，不是 HTML 固有属性。所有标签初始 display 值由用户代理样式表（UA stylesheet）定义，不同浏览器可能略有差异，比如 <details></details> 在 safari 和 chrome 中的默认折叠行为就不完全一致。

真正该关注的是：哪些标签自带不可忽略的默认样式？这些样式会影响布局，且容易被开发者误删。

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

• <ul></ul>、<ol></ol>：默认有 margin-top 和 margin-bottom，还有 padding-left（数值各浏览器不同）
• <h1></h1>–<h6></h6>：不仅有 margin，字体大小、粗细、行高都预设，重置时建议用 all: unset 再手动设，别只清 margin
• <button></button>：默认有边框、背景色、内边距、字体继承，appearance: none 可归零，但会同时干掉原生焦点样式，需手动补 :focus
• <textarea></textarea>：默认 resize: both，很多表单场景要锁死为 resize: none，否则用户拖拽破坏布局

自定义标签名（Web Components）和原生标签混用要注意什么

用 customElements.define() 注册的标签，比如 <my-button></my-button>，本质是 HTMLElement 子类，但浏览器不会给它任何默认样式或语义含义。它不像 <button></button> 那样自动获得键盘焦点、空格/回车触发、或被屏幕阅读器识别为可操作控件。

常见错误是把 <my-button></my-button> 当成 <button></button> 用，结果键盘用户无法操作，自动化测试脚本也点不到。

• 必须手动加 tabindex="0" 才能进 tab 顺序
• 必须监听 keydown 并判断 Enter 和 Space 键，模拟原生行为
• 必须设置 role="button"，并配 aria-pressed（如果是开关型）
• 避免在 Shadow dom 外直接用 querySelector('button') 匹配它——它不是 button 元素

html5 新增语义标签的兼容性底线在哪

<section></section>、<article></article>、<aside></aside> 这些标签 IE8 及以下完全不认识，但它们不是“不支持就崩”，而是降级为未知元素，表现为 display: inline 且无样式。问题出在旧版 IE 的 document.createElement 机制缺失，导致无法被 CSS 选中或 js 操作。

如果项目还要支持 IE8，别用 document.createElement('article')，改用 html5shiv —— 它本质是提前创建这些标签并注入 DOM，让 IE 知道“这是合法元素”。但注意：html5shiv 不修复语义，只解决解析和样式问题。

• html5shiv 必须放在 最顶部，且在任何 CSS/JS 之前执行
• Vue/React 项目里不用 html5shiv，因为虚拟 DOM 渲染不依赖浏览器原生解析，但 SSR 输出的 HTML 若要兼容旧 IE，仍需服务端注入 shiv
• <dialog></dialog> 是例外：即使现代浏览器支持，也得手动调 showModal()，不能靠标签存在就弹窗；IE/edge Legacy 完全不支持，polyfill 成本高，建议用 <div role="dialog"> 替代 <p>语义标签不是越多越好，关键在是否真有对应的内容结构。一个只有标题和段落的页面，硬塞 <code><article></article> 和 <section></section> 反而增加理解成本。浏览器不在乎你标得多准，但人会在意你是不是在假装专业。