html5语义标签无内置样式，必须用css显式定义外观；其核心价值在于提升结构可读性、css可维护性与无障碍支持，需配合变量、选择器优化及兼容性处理。
HTML5语义标签本身不带样式，必须用CSS控制外观
浏览器对 <header></header>、<nav></nav>、<article></article> 等HTML5标签只提供默认的 display 行为（比如 <section></section> 是 block），但**没有预设颜色、间距、边框或字体**。直接写语义标签却没写CSS，页面看起来和一堆 <div> 没区别。<p>关键不是“能不能美”，而是“必须主动用CSS接管所有视觉层”。常见错误是写了 <code><footer></footer> 就以为底部会自动居中+变灰——其实它默认就是普通块级元素，可能紧贴上文、文字黑色、无 padding。
- 所有HTML5语义标签在CSS里都等价于
display: block（除个别如<main></main>无特殊默认） - 想让
<nav></nav>横向排列菜单？得自己写display: flex或float -
<aside></aside>不会自动变窄或加边框，必须用width、border显式定义
用CSS选择器精准匹配语义结构，避免过度依赖class
HTML5语义化的核心价值在于结构可读性与CSS可维护性。与其给每个标签加 class="header-style"，不如利用嵌套关系写更干净的规则：
article h2 {
color: #2c3e50;
border-bottom: 2px solid #3498db;
padding-bottom: 0.5rem;
}
<p>article > p {
line-height: 1.6;
margin-bottom: 1rem;
}</p><p>nav ul {
list-style: none;
padding: 0;
}</p><p>nav li {
display: inline-block;
margin-right: 1.5rem;
}这样写的好处：结构变了（比如把 <p></p> 换成 <section></section>），样式不会意外失效；也减少HTML里一堆重复 class。
立即学习“前端免费学习笔记（深入）”；
- 慎用通配符如
* { margin: 0; }，它会重置<button></button>、<input>的原生间距，反而增加调试成本 - 用
>子选择器比空格后代选择器更安全，防止样式污染深层嵌套内容 - 如果项目需兼容IE8及以下，语义标签需配合
document.createElement脚本或 html5shiv，否则CSS根本选不到这些标签
响应式布局中，HTML5标签让媒体查询更语义清晰
用 <main></main> + <aside></aside> 替代 div#content + div#sidebar，媒体查询能直接表达意图：
@media (max-width: 768px) {
main {
width: 100%;
}
aside {
display: none; /* 移动端隐藏侧栏 */
}
}
<p>@media (min-width: 769px) {
main {
float: left;
width: 70%;
}
aside {
float: right;
width: 25%;
}
}比起用 class 名（如 .col-main）做响应式，语义标签让CSS逻辑和内容角色对齐，后期调整时不容易混淆“哪个div才是主内容”。
-
<main></main>在整个页面中只能出现一次，CSS里可放心用main { ... }全局控制 - 不要把
<section></section>当样式容器滥用——它表示主题独立的内容组，若只为实现某段圆角阴影而套<section></section>，反而破坏语义 - Flexbox/Grid 布局中，
<header></header>、<footer></footer>天然适合作为容器子项，无需额外 wrapper
字体、颜色、动效等细节需统一通过CSS变量管理
HTML5结构越清晰，CSS变量越容易落地。比如定义一套语义色值：
:root {
--color-primary: #3498db;
--color-text: #333;
--color-bg: #f8f9fa;
--spacing-unit: 1rem;
}
<p>header {
background-color: var(--color-primary);
color: white;
padding: var(--spacing-unit);
}</p><p>article h1 {
color: var(--color-text);
margin-bottom: calc(var(--spacing-unit) * 1.5);
}这样改主题色只需调一个变量，所有 <header></header>、<nav></nav>、<button></button> 的主色自动同步。比散落各处的 #3498db 好维护得多。
- CSS变量不支持IE，如需兼容，可用 PostCSS 插件转为静态值
- 避免在变量名里塞具体值，比如
--blue-500不如--color-accent语义明确 - 动画用
transition绑定到语义标签（如nav a:hover { opacity: 0.8; }），比靠 JS 控制更轻量、更可预测
实际项目中最容易被忽略的是：语义标签的无障碍属性（如 role、aria-label）和CSS美化必须协同。比如用 display: none 隐藏 <aside></aside> 时，屏幕阅读器也会跳过——若该侧栏含重要导航，就得改用 visibility: hidden 或 clip-path 并补上 aria-hidden="true"。美化不能以牺牲可访问性为代价。
