使用语义化标签能提升网页结构清晰度、可访问性和SEO效果。1. 用<header>、<nav>、<main>等块级标签划分页面区域；2. 正确使用<h1>到<h6>构建逻辑标题层级，避免跳级；3. 使用、、<time>等内联标签增强内容含义；4. 选用<ol>、<ul>、<dl>和<table>等标签规范列表与数据展示。示例代码体现整体结构，坚持语义化有助于维护与扩展。
在HTML中实现良好的内容排版，关键在于使用语义化标签合理组织结构。语义化不仅让代码更清晰，还能提升网页的可访问性、SEO效果和维护效率。下面介绍几种常用的语义化排版方法。
1. 使用语义化块级标签划分页面结构
避免通篇使用 div 标签，应根据内容含义选择合适标签：
- <header>：页面或区块的头部，常包含标题、导航等
- <nav>：主导航区域，如顶部菜单、侧边栏链接
- <main>：页面主体内容，每个页面应只有一个 main
- <article>：独立内容单元，如博客文章、新闻条目
- <section>：内容区块，用于分组相关元素（如章节）
- <aside>：侧边栏或附加信息，如广告、相关链接
- <footer>：页脚，常含版权信息、联系方式
示例：
<header><h1>网站标题</h1>
<nav>导航菜单</nav>
</header>
<main>
<article>
<h2>文章标题</h2>
<p>文章内容...</p>
</article>
</main>
<aside>侧边推荐</aside>
<footer>© 2025 公司名称</footer>
2. 正确使用标题层级（h1-h6）
标题标签应体现内容的逻辑结构，不可仅用于样式表现：
立即学习“前端免费学习笔记（深入）”；
- 每个页面只用一个 <h1>，代表主标题
- 后续使用 h2 表示章节，h3 表示子章节，依此类推
- 保持层级连续，避免跳级（如 h1 直接到 h4）
错误示例：
<h1>主标题</h1>
<h4>本应是二级标题</h4>
正确做法：
<h1>主标题</h1>
<h2>章节标题</h2>
<h3>小节标题</h3>
3. 内联语义化标签增强可读性
在段落或句子中，使用内联标签明确内容含义：
- <strong>：强调重要内容（加粗显示）
- <em>：强调语气（斜体显示）
- <time>：表示时间或日期，如 <time datetime="2025-04-05">今天</time>
- <mark>：高亮文本
- <code>：显示代码片段
- <q> 或 <blockquote>：引用内容
4. 列表与表格的语义化使用
不同类型的内容应选用合适的结构标签：
- 有序列表 <ol>：有顺序要求的内容，如步骤、排名
- 无序列表 <ul>：并列项，如菜单、功能点
- 定义列表 <dl>：术语与解释配对，如词汇表
- 表格 <table>：展示数据关系，配合 <thead>、<tbody>、<th> 使用
基本上就这些。坚持使用语义化标签，能让HTML结构清晰、易于理解，也为后续样式控制和功能扩展打下良好基础。不复杂但容易忽略。
