文章页HTML结构必须语义正确：仅一个包裹全部主内容，用划分逻辑块并配小标题，标题层级严格递进，段落表达独立观点，非核心内容不得塞入。
文章页的 HTML 结构不是“能显示就行”，而是直接影响可读性、SEO 和辅助技术体验——核心问题在于语义错位和层级失控，比如把整篇文章塞进一个 <div class="content">，或滥用 <code><section></section> 包裹单个段落。
怎么用对 <article></article> 和 <section></section>
这两个标签常被混用，但职责完全不同：<article></article> 必须是独立、可复用、可分发的内容单元（如一篇博客、一条新闻），它自带隐式 heading 级别；<section></section> 只是主题分组，不能脱离上下文独立存在。
- 一篇文章只有一个
<article></article>，且应直接包裹标题、导语、正文、作者信息等全部主内容 -
<section></section>适合在<article></article>内部划分逻辑块，比如“背景”“方法”“结论”——但前提是每个块有明确小标题（<h2></h2>或<h3></h3>） - 避免嵌套：不要在
<article></article>外再套一层<section></section>，也不要把广告、推荐栏塞进<article></article>里
标题层级怎么不崩掉
文章页的标题结构不是装饰，是内容骨架。浏览器、爬虫、屏幕阅读器都靠它理解主次关系。
-
<h1></h1>必须且只能出现一次，对应文章主标题，通常放在<article></article>开头 - 后续使用
<h2></h2>表示一级子章节，<h3></h3>表示二级子章节——禁止跳级（如<h1></h1>后直接<h3></h3>） - 如果导语或作者信息需要强调，用
<p class="lead"></p>或<aside></aside>，别硬塞<h4></h4> - 所有标题必须真实反映内容逻辑，而不是为了视觉大小选标签
<p></p> 标签怎么用才不算滥用
<p></p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill6712" title="Wechat HTML Publisher"><img
src="https://img.php.cn/upload/skill/000/000/081/179109368394970.jpg" alt="Wechat HTML Publisher" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill6712" title="Wechat HTML Publisher">Wechat HTML Publisher</a>
<p>直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。</p>
</div>
<a href="/xiazai/skill6712" title="Wechat HTML Publisher" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div> 不是换行工具，也不是样式容器。它的语义是“一个完整、自洽的文本段落”，错误用法会破坏可访问性和 SEO。
立即学习“前端免费学习笔记（深入）”；
- 每段文字表达一个独立观点或事实，长度建议控制在 2–4 句，避免超长段落
- 不要用多个
<p></p>实现缩进或空行效果——那是 CSS 的事，用text-indent或margin - 列表、引用、代码块、强调文本，该用
<ul></ul>、<blockquote></blockquote>、<pre class="brush:php;toolbar:false;"></code>、<code><strong></code> 就用，别全塞进 <code><p></code></li> <li>段落之间靠 CSS 的 <code>margin-bottom</code> 分隔，而非空 <code><p></code> 或 <pre class="brush:php;toolbar:false;"><br></pre>
为什么 <main></main> 不能少，也不能多
<main></main> 是页面唯一的核心内容容器，对文章页尤其关键——它告诉浏览器“这里才是用户真正要读的东西”，其他都是附属。
- 整个文章页的
<article></article>必须包裹在<main></main>内，且<main></main>在整个文档中只能出现一次 -
<main></main>不能嵌套在<header></header>、<footer></footer>、<aside></aside>或另一个<section></section>里 - 侧边栏、相关推荐、广告位这些非核心内容，一律放
<aside></aside>或普通<div role="complementary">，别往 <code><main></main>里塞 - 如果页面有多个文章（如列表页），每个
<article></article>仍需独立语义，但<main></main>只包整体列表容器，内部再用<article></article>分隔
最容易被忽略的其实是标题与段落之间的节奏感：一个 <h2></h2> 后跟三段 <p></p> 比跟一段 20 行的“大段落”更利于扫描和理解。结构优化不是删代码，而是让每个标签都承担它该承担的语义责任。
