刚接触网页编写的人，在动手写HTML语句时往往只关心“能不能显示出来”，而忽略了文档结构的合理性与规范性。浏览器确实有足够的容错能力把乱写的标签渲染成勉强能看的页面，但这并不代表结构本身是正确的。理解并避开那些高频出现的写法误区，是写出可维护前端代码的第一步。
误区一：用div代替语义化标签搭建整体骨架
最常见的错误就是无论什么区域都用<div>包裹，再通过class名称区分。比如页面顶部写<div class="header">，导航写<div class="nav">，正文写<div class="content">。这种做法在视觉上没问题，但文档结构对浏览器、屏幕阅读器和搜索引擎来说毫无语义。
HTML5提供了header、nav、main、article、section、aside、footer等语义化标签。它们不仅能清晰表达区块用途，还能自动参与文档大纲生成。下面是一段对比代码，左侧是误区写法，右侧是推荐写法。
<!-- 误区：全部用div -->
<div class="header">网站标题</div>
<div class="nav">
<div>首页</div>
<div>文章</div>
</div>
<div class="content">正文</div>
<!-- 推荐：语义化结构 -->
<header>网站标题</header>
<nav>
<ul>
<li>首页</li>
<li>文章</li>
</ul>
</nav>
<main>正文</main>
使用语义化标签后，辅助技术可以跳过导航直接读取main中的内容，搜索引擎也能更准确地判断页面重点。虽然多记几个标签名增加了初学成本，但长期看大幅降低了后期重构和协作沟通的负担。
误区二：混淆块级元素与行内元素的嵌套规则
另一个容易踩坑的地方是嵌套关系。按照规范，行内元素（如<span>、<a>）内部不应直接放置块级元素（如<div>、<p>）。新手常写出类似<a href="#"><div>点击区块</div></a>的代码，在部分浏览器中虽能渲染，但严格来说违反了内容模型定义。
如果希望整块区域可点击，应当把<a>设为块级显示，而不是把块级标签塞进行内标签。以下示例展示了正确思路：
<!-- 误区：行内包块级 --> <a href="https://ipipp.com"> <div>整个卡片可点</div> </a> <!-- 推荐：a变块级 --> <a href="https://ipipp.com" style="display:block;"> <span>整个卡片可点</span> </a>
理解内容模型不仅能减少浏览器怪异解析，也方便使用CSS进行布局。当结构符合规范时，Flexbox与Grid往往能更直观地生效，不必额外写大量清除浮动或定位补丁。
误区三：列表与表格结构不完整
不少人在写无序列表时直接把文字放在<ul>下，忘记用<li>包裹。还有写表格时从头到尾只有<tr>和<td>，缺少<thead>、<tbody>甚至<th>。这类写法会让解析器自动补全标签，但补全逻辑未必符合预期，也可能导致样式选择器失效。
完整的表格结构有助于屏幕阅读器按行列朗读，也方便用CSS分别控制表头与表身。示例如下：
<!-- 误区：表格无结构 -->
<table>
<tr>
<td>姓名</td>
<td>年龄</td>
</tr>
<tr>
<td>张三</td>
<td>20</td>
</tr>
</table>
<!-- 推荐：带thead/tbody -->
<table>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>20</td>
</tr>
</tbody>
</table>
列表同理，所有项必须置于<li>中，否则在严格校验工具里会报结构错误。养成写全标签的习惯，可以避免后期因数据动态渲染而出现的错行、错位问题。
误区四：表单控件缺少关联与结构
表单是交互核心，但新手常把<input>直接散落在<form>里，不写<label>，或者用placeholder代替可见文字说明。这样一来，点击文字无法聚焦输入框，视障用户也难以获知字段含义。
通过for与id关联label，或用label包裹input，都能提升可用性。示例：
<!-- 误区：无label关联 --> <form> <input type="text" id="name" placeholder="姓名" /> </form> <!-- 推荐：label关联 --> <form> <label for="name">姓名</label> <input type="text" id="name" /> </form>
此外，fieldset与legend可用于分组相关字段，让长表单更有逻辑层次。这些细节不会立刻影响页面外观，却决定了代码是否专业、是否真正可用。
如何系统规避这些结构误区
写完后使用W3C Validator或编辑器内的HTML校验插件跑一遍，能直观看到标签嵌套与遗漏警告。同时，在练习时有意先画文档结构草图，再填标签，而不是边写边想。这样能逐步形成“语义优先”的肌肉记忆。
总的来看，HTML语句本身不难，难的是用规范的方式表达清晰的结构。避开上述四类常见误区，页面会更健壮、更易维护，也为后续CSS与JavaScript工作打下干净的基础。