HTML Tags Cheat Sheet

Practical Snippet

Key points: (1) interactive elements must not nest — choose anchor or button, since nesting breaks keyboard and screen-reader behaviour; (2) one h1 per page with no skipped levels, and solve sizing in CSS, because heading structure drives both SEO and screen-reader navigation; (3) real data tables need th with scope, and a table used for layout needs role="presentation" (or none) — but prefer Grid/Flexbox; (4) every image needs alt, with an empty alt for decorative ones rather than omitting the attribute; (5) prefer semantic containers such as article, section, header and footer, since div with classes carries no semantics.

<!-- ① 跳转用 a，动作用的 button —— 二选一，不要嵌套 -->
<a href="/orders/42">查看订单</a>
<button type="button" @click="submit">提交</button>
<!-- ❌ <a href="/x"><button>去</button></a> -->

<!-- ② 一个页面一个 h1，层级不跳级 -->
<h1>订单详情</h1>
  <h2>基本信息</h2>
  <h3>收货地址</h3>      <!-- ✅ h3 跟在 h2 后 -->
  <!-- <h4>...</h4> 直接跟在 h2 后是错的 -->
<!-- 字号需求用 CSS，不要靠换标签 -->
<style>
  h1 { font-size: 1.5rem; }
  .minor-heading { font-size: .875rem; font-weight: 600; }
</style>

<!-- ③ 真数据表：th + scope + caption -->
<table>
  <caption>近 7 日订单量</caption>
  <thead>
    <tr><th scope="col">日期</th><th scope="col">订单数</th></tr>
  </thead>
  <tbody>
    <tr><th scope="row">10-01</th><td>128</td></tr>
  </tbody>
</table>

<!-- ④ table 做布局时声明 presentation（现代浏览器用 none） -->
<table role="presentation">
  <tr><td>侧栏</td><td>主内容</td></tr>
</table>
<!-- ✅ 更推荐：Grid / Flexbox -->
<div class="layout"><aside>侧栏</aside><main>主内容</main></div>
<style>.layout { display: grid; grid-template-columns: 240px 1fr; gap: 16px; }</style>

<!-- ⑤ 图片必须有 alt；装饰图用空 alt -->
<img src="chart.png" alt="近 7 日订单量折线图" width="640" height="320">
<img src="divider.svg" alt="" width="8" height="8">   <!-- 装饰性：空 alt -->

<!-- ⑥ 语义化容器优于 div 套类名 -->
<article>
  <header><h2>标题</h2><time datetime="2024-06-01">6 月 1 日</time></header>
  <section><h3>小节</h3><p>正文</p></section>
  <footer>…</footer>
</article>
<!-- <div class="card"><div class="hd">… —— 全无语义价值 -->