如何在HTML5中创建副标题？校园项目技术咨询

1. 语义化标题层级法 #

主标题用 <h1>，副标题直接使用 <h2> 至 <h6> 中对应层级的标签，这是最规范的做法，能让浏览器、搜索引擎准确识别内容结构：

<h1>旅行摄影指南</h1>
<h2>用手机拍出专业级风景照</h2>

2. 自定义样式辅助法 #

如果不需要严格的标题层级，仅需视觉上的副标题效果，可以用 <p> 标签配合内联CSS或外部样式表调整外观：

<h1>2024年度书单</h1>
<p style="font-size:1.3em; color:#555; margin-top:-10px;">值得反复阅读的10本非虚构作品</p>

3. 同行副标题法 #

如果希望副标题和主标题在同一行展示，可使用 <small> 标签，它默认会呈现小号字体，也可通过CSS修改样式：

<h1>咖啡品鉴入门 <small>从豆子到杯子的完整指南</small></h1>

4. 结构化容器法 #

将主副标题包裹在 <header> 标签内，强化页面的语义结构，提升无障碍访问性：

<header>
  <h1>个人技术博客</h1>
  <h2>分享前端开发的实战技巧与踩坑记录</h2>
</header>

内容的提问来源于stack exchange，提问作者Nathan Cullifer