每个开发者都应该了解的 10 个必备 HTML 元素

现代 HTML 已经远远超越了基本的段落和标题。虽然大多数开发者都了解基础知识,但真正的力量在于语义化 HTML 元素,它们使你的标记具有自描述性、可访问性和可维护性。这些常被忽视的 HTML 瑰宝减少了对 JavaScript 的依赖,并创造了更有意义的 Web 体验。

定义结构和含义的元素

<dialog> 元素:无需繁琐的原生模态框

忘掉复杂的 JavaScript 模态框库吧。<dialog> 元素提供了原生模态框功能,并内置了可访问性特性:

<dialog id="confirmDialog">
  <p>Are you sure you want to proceed?</p>
  <form method="dialog">
    <button value="cancel">Cancel</button>
    <button value="confirm">Confirm</button>
  </form>
</dialog>

<script>
  const dialog = document.getElementById('confirmDialog');
  // Show modal: dialog.showModal()
  // Show non-modal: dialog.show()
  // Close: dialog.close()
</script>

这个语义化 HTML 元素自动处理焦点管理、Escape 键关闭和背景渲染。它消除了整个 JavaScript 依赖,同时提供了更好的可访问性。

<template> 元素:正确实现客户端模板

<template> 标签保存 HTML 内容,直到你通过 JavaScript 显式克隆并插入它才会渲染。非常适合动态内容生成:

<template id="card-template">
  <article class="card">
    <h3></h3>
    <time></time>
    <p></p>
  </article>
</template>

<script>
  const template = document.getElementById('card-template');
  const clone = template.content.cloneNode(true);
  // Populate clone and append to DOM
</script>

与隐藏的 div 不同,template 内容在激活之前不会加载资源或运行脚本,这使其成为注重性能的 Web 设计的理想选择。

增强用户交互的元素

<details> 和 <summary> 组合:无需 JavaScript 的可折叠内容

这些元素无需任何 JavaScript 即可创建可展开/折叠的部分:

<details>
  <summary>System Requirements</summary>
  <ul>
    <li>8GB RAM minimum</li>
    <li>50GB available storage</li>
    <li>Modern browser support</li>
  </ul>
</details>

屏幕阅读器会自动宣布展开状态,键盘导航开箱即用。open 属性控制初始状态,你可以使用 CSS 样式化展开三角形。

<meter> 元素:具有语义的视觉指示器

显示仪表、评分或容量指示器,并带有语义上下文:

<meter value="7" min="0" max="10" optimum="8" low="3" high="7">
  7 out of 10
</meter>

浏览器理解这不仅仅是一个视觉元素——它是一个具有定义边界、阈值和最佳范围的测量值。根据值是否落在低、中或高范围内,会自动显示不同的颜色。

提供丰富上下文的元素

<time> 元素:机器可读的日期

使日期和时间对人类和机器都可理解:

<time datetime="2024-12-15T09:00">December 15 at 9:00 AM</time>

搜索引擎和辅助技术可以解析 datetime 属性,而用户看到的是你偏好的格式。这个现代 HTML 元素架起了人类可读性和机器处理之间的桥梁。

<data> 元素:链接人类和机器值

将人类可读的内容与机器可读的值关联起来:

<data value="978-0-123456-78-9">JavaScript: The Good Parts</data>

非常适合产品代码、ISBN 或任何需要显示值和数据值的场景,无需隐藏输入或数据属性。JavaScript 可以通过 value 属性访问该值。

<abbr> 元素:可访问的缩写

为缩写提供完整含义,而不会使文本混乱:

<abbr title="Application Programming Interface">API</abbr>

屏幕阅读器可以宣布完整形式,悬停时会显示工具提示——简单但强大,适用于可访问的 Web 设计。

显示进度和输出的元素

<progress> 元素:确定的加载状态

显示实际进度而不是无限旋转器:

<progress value="32" max="100">32%</progress>

与通用加载动画不同,此元素传达有关完成状态的真实信息。省略 value 属性可显示不确定的进度条。

<output> 元素:计算结果

以语义化方式显示计算或用户交互的结果:

<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
  <input type="number" id="a" value="0"> +
  <input type="number" id="b" value="0"> =
  <output name="result" for="a b">0</output>
</form>

for 属性明确地将输出链接到其源输入,在标记中创建清晰的关系。屏幕阅读器理解这是一个计算结果,而不仅仅是静态文本。

<picture> 元素:具有艺术指导的响应式图像

根据视口大小或设备能力提供不同的图像:

<picture>
  <source media="(min-width: 800px)" srcset="wide.jpg">
  <source media="(min-width: 400px)" srcset="medium.jpg">
  <img src="narrow.jpg" alt="Responsive image">
</picture>

这超越了简单的响应式图像——它是 HTML 中的艺术指导,让你可以为不同的上下文裁剪或完全更改图像。浏览器选择第一个匹配的 source 或回退到 img 元素。

结论

这些 HTML 元素代表了我们思考标记方式的转变。我们不再使用只有人类才能理解的带有类名的 div,而是使用描述自身目的的元素。<dialog>、<details> 和 <template> 元素消除了对 JavaScript 的依赖。<time>、<data> 和 <abbr> 元素使内容机器可读。<meter>、<progress> 和 <output> 元素为动态值提供语义含义。

好的 HTML 不是关于记忆标签——而是关于选择使内容自描述的元素。当你的标记能够解释自己时,你的代码变得更易维护,你的网站更易访问,你的开发更高效。在下一个项目中从这些元素中的一两个开始,体验语义化 HTML 带来的不同。

常见问题

Complete picture for complete understanding

Capture every clue your frontend is leaving so you can instantly get to the root cause of any issue with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data.

Check our GitHub repo and join the thousands of developers in our community.