提高网页可读性的HTML文档结构编写习惯-html教程-PHP中文网

语义化HTML不是追求“更现代”，而是防止维护失控的底线；应使用语义标签而非仅靠class，确保屏幕阅读器可读、SEO有效、结构清晰、协作高效。

提高网页可读性的html文档结构编写习惯

用

代替

这类写法

这不是“更现代”的选择，而是避免后续维护失控的底线。屏幕阅读器不会读出class="nav"，搜索引擎也不会给<div id="main-content">加权——它只认语义标签本身。<p>常见错误现象：用一堆嵌套<code><div class="wrapper"><div class="inner"><div class="content">包裹正文，调试时根本看不出哪层该管导航、哪层该管主体。<ul> <li> <code><header></header>只用于页面或区块顶部，含标题、logo、搜索框等，不是所有“上面的部分”都叫header

<nav></nav>必须包裹一组导航链接，<ul></ul>是合理子元素；纯按钮或单个链接别硬套

<main></main>全页只能出现一次，且必须包裹真正核心内容（比如文章正文、产品列表），不能包广告位或侧边栏

<section></section>要有明确主题，建议紧随一个<h2></h2>或更高级别标题；一段普通说明文字，没到独立章节程度，就别强行用

标题层级必须严格递进，跳级会破坏阅读流

把<h2></h2>当加大号<p></p>用，表面看不出问题，但屏幕阅读器用户按快捷键跳小节时直接漏掉整块内容，SEO 也会丢失结构信号。

使用场景：一篇博客页，<h1></h1>是文章标题，每个小节用<h2></h2>，小节内再分点用<h3></h3>；如果某处需要视觉强调但不构成新层级，用<strong></strong>或CSS控制字号，别动标题标签。

立即学习“前端免费学习笔记（深入）”；

绝对禁止<h1></h1>后直接接<h4></h4>，中间断层会让辅助设备构建错误的大纲树
<article></article>内部可有自己的<h1></h1>，但整个页面仍需一个全局<h1></h1>作为主标题
移动端小屏下<h6></h6>可能太小，但别因此跳级——改CSS，不动结构

段落与间距不是靠

<br>

堆出来的

连续写三个

<br>

制造空行，或用text-indent硬推首行缩进，看似省事，实则在响应式断点下崩得最彻底：小屏缩进过大、列表项错位、引用块边界撕裂。

真正可控的段落节奏来自<p></p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/skill4293" title="Doc To HTML"><img src="https://img.php.cn/upload/skill/000/000/081/178998486916110.jpg" alt="Doc To HTML" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/skill4293" title="Doc To HTML">Doc To HTML</a> <p>使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。</p> </div> <a href="/xiazai/skill4293" title="Doc To HTML" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>结构本身 + margin + line-height + 标题层级四者联动，不是单靠某个CSS属性撑起来的。

PC端正文可用text-indent: 2em，但必须配margin-left: 0防继承干扰
移动端建议取消缩进，改用margin-top: 1.2em强化段首识别
避免text-align: justify，中文字体间隙不可控，易出难看的“河流”空白
每个<p></p>应代表一个逻辑完整的信息块，不是换行工具；连续多个<p></p>之间自然有margin-bottom分隔