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>反而增加理解成本。浏览器不在乎你标得多准，但人会在意你是不是在假装专业。
