React中可直接使用<header>等HTML5语义标签，因其编译为React.createElement()且浏览器原生支持；需注意大小写区分（<header>是标签，<Header>是组件）、自闭合标签斜杠、IE兼容性及用Fragment替代无意义div包装。
React中直接写<header>等HTML5标签完全合法
JSX本质是语法糖，最终编译为React.createElement()调用，只要浏览器支持的原生HTML标签，React都允许直接使用。不需要额外引入、不需要加react-前缀，也不需要包裹在<div>里“降级兼容”。
常见误区是以为必须用<div className="header">代替<header>——这反而丢失了语义和SEO价值。
-
<main>、<nav>、<aside>、<section>、<article>、<footer>全部可直接书写 - 注意：所有自闭合标签（如
<img />）必须带斜杠，<img>会报错 - 属性名沿用HTML规范，比如
aria-label、role、tabIndex（不是tabindex）
JSX里<header>不能当组件名用，但可以当HTML标签用
React区分大小写：<Header>（首字母大写）会被当作自定义组件，而<header>（全小写）始终被识别为原生HTML元素。
如果写了<Header>但没定义这个组件，控制台会报Element type is invalid错误；如果本意就是HTML语义标签，却写成大写，就会意外触发组件查找逻辑。
立即学习“前端免费学习笔记（深入）”；
- 想用语义化结构标签 → 写
<header>、<nav>、<main> - 想封装可复用的页头组件 → 定义
function Header() { ... }，再用<Header> - 混用场景：比如
<header><Nav /></header>，外层是原生标签，内层是自定义组件
IE11及更老浏览器需要document.createElement补丁
HTML5结构标签在IE8–IE10中不被识别为块级元素，会导致样式失效（比如<section>默认显示为行内元素）。React本身不处理这个兼容问题，需手动修复。
现代项目基本已放弃IE支持，但如果必须兼容，有两种方式：
- 全局执行
document.createElement('header')等语句（通常放在index.html的<script>里） - 引入
html5shiv脚本（仅对传统HTML有效，对React动态渲染的节点作用有限） - 更稳妥的做法：在CSS中显式声明
header, nav, main, section, article, aside, footer { display: block; }
用React.Fragment替代无意义的<div>包装
很多人为了满足JSX单根节点要求，习惯性用<div>包裹<header>和<main>，但这会污染DOM结构、干扰CSS选择器（如body > div）和屏幕阅读器导航。
正确做法是用React.Fragment（或简写<></>）作为容器：
function Layout() {
return (
<>
<header>网站标题</header>
<main>主要内容</main>
<footer>版权信息</footer>
</>
);
}
Fragment不会出现在最终DOM中，既满足JSX语法约束，又保持HTML5结构纯净。注意：带key属性时必须用完整写法<React.Fragment key="xxx">，不能用简写。
真正容易被忽略的是：当组件返回多个并列的HTML5标签时，开发者第一反应仍是套一层<div>，而不是想到Fragment——这会让语义结构悄悄退化成一堆<div class="wrapper">。
