如您所知，我們熱愛Lingo.dev上不尋常的技術。因此，當我在上一篇文章中評論說他很驚訝沒有看到“對話框”HTML 元素時，我突然想到 - 等等，但有這麼多 HTML5 元素是我們甚至不知道的！

當我們急於採用複雜的框架和函式庫時，我們忽略了 HTML5 中內建的一些最優雅的解決方案。用一個標籤就能實現原本需要幾十行 JavaScript 才能實現的功能，真是太棒了。

最好的程式碼往往是你不必寫的程式碼。您有多少次使用 JavaScript 函式庫來建立模式視窗？或為可折疊部分編寫複雜的 CSS？如果我告訴您 HTML5 已經具有用於這些確切目的的原生元素，您會怎麼想？

這些並不是普通的 HTML 元素 - 它們會讓你覺得「等等，我們可以一直這樣做嗎？」讓我們來探索八個令人驚訝的強大的 HTML 元素，您可能沒有使用它們 - 但絕對應該使用。

1. <dialog>元素：原生模態視窗

想像一下：您正在啟動一個新專案並需要新增一個模式對話框。你的第一直覺是？接觸 React、取得 UI 函式庫或編寫一堆 JavaScript。我明白──我已經做過無數次同樣的事情了。

但 HTML5 有一個專門為此目的而設計的內建元素：

<dialog id="myDialog">
  <h2>This is a Native Dialog</h2>
  <p>No JavaScript frameworks required!</p>
  <button id="closeDialog">Close</button>
</dialog>

<button id="openDialog">Open Dialog</button>

您仍然需要一些 JavaScript 來處理開啟/關閉操作：

const dialog = document.getElementById('myDialog');
document.getElementById('openDialog').addEventListener('click', () => {
  dialog.showModal(); // Makes the dialog appear as a modal
});
document.getElementById('closeDialog').addEventListener('click', () => {
  dialog.close(); // Closes the dialog
});

瀏覽器處理焦點管理、背景渲染和鍵盤可存取性。儘管自 2022 年左右以來所有主流瀏覽器都支援此元素，但與我交談過的大多數開發人員從未使用過此元素。

你可以按照自己想要的方式設計它：

dialog {
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #ddd;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

dialog::backdrop {
  background-color: rgba(0,0,0,0.6);
}

我在生產中已經使用它好幾年了。主要問題是 iOS Safari 支持，直到 2023 年才開始穩定，但現在已經很穩定了。對於具有大量互動元素的複雜模態框，您可能仍然需要一個專用庫，但對於大多數用例來說，原生元素可以完美地工作。

2. <details>和<summary>元素：原生手風琴

手風琴在網路上隨處可見——常見問題、產品詳細資訊、設定面板。大多數開發人員都採用 JavaScript 解決方案，但 HTML5 具有原生元素：

<details>
  <summary>Click to expand</summary>
  <p>This content can be expanded and collapsed without any JavaScript!</p>
</details>

這就是你所需要的。瀏覽器處理切換功能、可存取性屬性和鍵盤導航。

您可以根據自己的設計系統來設計它：

details > summary {
  list-style: none; /* Removes the default triangle */
}

details > summary::before {
  content: '▶';
  display: inline-block;
  margin-right: 0.5em;
  transition: transform 0.2s;
}

details[open] > summary::before {
  transform: rotate(90deg);
}

這些元素對於巢狀導航特別有用。我最近在一個文件網站中使用了它們，我們需要三個等級的可折疊導航：

<details>
  <summary>Programming Languages</summary>
  <details>
    <summary>Frontend</summary>
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
    </ul>
  </details>
  <details>
    <summary>Backend</summary>
    <ul>
      <li>Python</li>
      <li>Java</li>
      <li>Ruby</li>
    </ul>
  </details>
</details>

主要的限制是動畫 - 如果您需要在開啟/關閉時實現流暢的動畫，則需要加入 JavaScript。但對於許多用例來說，預設行為是完全沒問題的。

3. <datalist>元素：原生自動完成

自動完成功能是現代網頁表單的主要功能。大多數開發人員都尋求第三方解決方案，但 HTML5 有一個內建元素可以實現這一點：

<input list="browsers" name="browser" placeholder="Choose a browser">
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Safari">
  <option value="Edge">
</datalist>

這為您提供了一個文字輸入，可在您鍵入時顯示建議，並可從清單中選擇或輸入自訂文字。

一個有趣的用例是建立具有命名顏色的顏色選擇器：

<input type="text" list="colors" placeholder="Choose a color">
<datalist id="colors">
  <option value="#FF0000">Red</option>
  <option value="#00FF00">Green</option>
  <option value="#0000FF">Blue</option>
</datalist>

使用者可以輸入顏色名稱或十六進位程式碼。新增一些 JavaScript 來顯示預覽：

const input = document.querySelector('input');
const preview = document.getElementById('colorPreview');

input.addEventListener('input', () => {
  preview.style.backgroundColor = input.value;
});

<datalist>的主要限制是樣式－您無法輕鬆自訂下拉選項的外觀。如果您需要為建議設定自訂樣式，您可能仍然需要 JavaScript 解決方案。但對於許多用例來說，本機元素已經足夠了。

4. <meter>元素：語意測量顯示

當顯示已知範圍內的值時，大多數開發人員使用帶有背景顏色的 div。但 HTML5 有一個專門的元素用於此：

<meter value="75" min="0" max="100" low="30" high="70" optimum="80"></meter>

瀏覽器根據您設定的閾值來設定其樣式。如果該值處於“低”範圍內，則可能會顯示為黃色。如果處於“高”範圍，它可能會顯示為橙色。如果它接近“最佳”值，則顯示為綠色。

這對於儀表板特別有用：

<!-- Disk usage (lower is better) -->
<meter value="75" min="0" max="100" low="70" high="90" optimum="0">75%</meter>

<!-- Battery level (higher is better) -->
<meter value="35" min="0" max="100" low="20" high="60" optimum="100">35%</meter>

<!-- CPU usage (lower is better) -->
<meter value="82" min="0" max="100" low="60" high="80" optimum="0">82%</meter>

optimum屬性表示值越高越好還是值越低越好，這會影響顏色。

瀏覽器支援很好，但樣式選項有限。如果您需要高度客製化的外觀，您可能仍然需要客製化解決方案。但對於儀表板和監控 UI，本機元素運作良好並將語義含義傳達給螢幕閱讀器。

5. <output>元素：動態計算結果

在建立計算器或互動式表單時，大多數開發人員使用 div 來顯示結果。但 HTML5 有一個專門的元素用於此：

<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屬性在輸入和輸出之間建立了明確的關係，這有助於螢幕閱讀器理解輸出是這些特定輸入的結果。

去年我在一個副專案中用到了它，做了一個抵押貸款計算器：

<form id="mortgageCalc">
  <div>
    <label for="principal">Loan Amount: $</label>
    <input type="number" id="principal" value="200000">
  </div>
  <div>
    <label for="rate">Interest Rate: %</label>
    <input type="number" id="rate" value="3.5" step="0.1">
  </div>
  <div>
    <label for="term">Loan Term (years):</label>
    <input type="number" id="term" value="30">
  </div>
  <div>
    <button type="button" id="calculate">Calculate</button>
  </div>
  <div>
    <p>Monthly Payment: $<output id="payment">954.83</output></p>
    <p>Total Interest: $<output id="totalInterest">143,739.01</output></p>
  </div>
</form>

主要優點是語意意義－螢幕閱讀器可以宣布該值是計算結果。它也是一個表單元素，因此如果需要的話可以將其包含在表單提交中。

6. <mark>元素：語意突顯

當突出顯示文字時，大多數開發人員使用具有背景顏色的跨度。但 HTML5 有一個專門的元素用於此：

<p>The <mark>quick brown fox</mark> jumps over the lazy dog.</p>

預設情況下，瀏覽器採用黃色背景，但您可以自訂它：

mark {
  background-color: #fff9c4;
  padding: 2px 4px;
  border-radius: 3px;
}

這對於搜尋結果特別有用：

const searchTerm = "HTML";
const content = "HTML elements are the building blocks of HTML pages.";

const highlighted = content.replace(
  new RegExp(searchTerm, 'gi'),
  match => `<mark>${match}</mark>`
);

其優點在於語意意義——螢幕閱讀器可以宣布文字被突出顯示，讓使用者更能理解為什麼某些文字會脫穎而出。

我發現這在文件網站和知識庫中特別有用，突出顯示搜尋字詞可以幫助使用者快速找到他們正在尋找的內容。

7. <time>元素：語意日期和時間

大多數開發人員使用常規文字元素顯示日期和時間，但 HTML5 有一個專門的元素用於此：

<p>The article was published on <time datetime="2025-05-20">May 20, 2025</time>.</p>

datetime屬性可讓您以機器可以理解的標準化格式（ISO 8601）指定日期，同時向使用者顯示人性化的格式。

這對於可以提取準確日期的搜尋引擎以及可能想要提供諸如向日曆加入事件等功能的瀏覽器或擴充功能來說非常有用。

您可以將其用於各種日期和時間格式：

<!-- Just a date -->
<time datetime="2025-05-20">May 20, 2025</time>

<!-- Date and time -->
<time datetime="2025-05-20T14:30:00">2:30 PM on May 20, 2025</time>

<!-- Just a time -->
<time datetime="14:30:00">2:30 PM</time>

<!-- A duration -->
<time datetime="PT2H30M">2 hours and 30 minutes</time>

一個實際應用是相對時間：

<p>Posted <time datetime="2025-05-18T14:30:00" class="relative-time">2 days ago</time></p>

使用 JavaScript，您可以定期更新這些內容：

function updateRelativeTimes() {
  document.querySelectorAll('.relative-time').forEach(el => {
    const date = new Date(el.getAttribute('datetime'));
    el.textContent = getRelativeTimeString(date);
  });
}

// Update every minute
setInterval(updateRelativeTimes, 60000);

此元素對於部落格、新聞網站和社交媒體平台尤其有價值，因為準確的日期和時間資訊非常重要。

8. <figure>和<figcaption>元素：語意圖像標題

大多數開發人員使用 div 和段落來實現圖像標題，但 HTML5 有專門的元素來實現這一點：

<figure>
  <img src="chart.jpg" alt="Sales chart for Q2 2025">
  <figcaption>Fig.1 - Company sales increased by 25% in Q2 2025.</figcaption>
</figure>

<figure>元素不僅僅用於圖像 - 它可以用於作為單一單元引用的任何內容：

<!-- Code snippet with caption -->
<figure>
  <pre><code>
function greet(name) {
  return `Hello, ${name}!`;
}
  </code></pre>
  <figcaption>A simple JavaScript greeting function using template literals.</figcaption>
</figure>

<!-- Quote with attribution -->
<figure>
  <blockquote>
    <p>The best way to predict the future is to invent it.</p>
  </blockquote>
  <figcaption>— Alan Kay</figcaption>
</figure>

這些元素對於內容管理系統和部落格特別有用，編輯者需要為圖像和其他媒體加入標題。

簡單的 CSS 設定可以建立一個美觀的圖庫：

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
}

figure {
  margin: 0;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  transition: transform 0.3s;
}

figure:hover {
  transform: translateY(-5px);
}

figure img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}

figcaption {
  padding: 10px;
  background-color: #f5f5f5;
  font-style: italic;
}

主要優點是語義含義——螢幕閱讀器可以宣布文字是相關內容的標題，從而提高可存取性。

結論？

擁抱原生 HTML 的力量。

我們探索了八個 HTML5 元素，它們為常見的 Web 開發挑戰提供了優雅的內建解決方案：

1. <dialog>用於本機模態視窗

2. <details>和<summary>用於可折疊內容

3. <datalist>用於本機自動完成

4. <meter>用於語意測量顯示

5. <output>表示動態計算結果

6. <mark>用於語意突出顯示

7. <time>用於語意日期和時間

8. <figure>和<figcaption>用於語意圖像標題

這些元素減少了對 JavaScript 的依賴，提高了可存取性，並使您的 HTML 更具語義和意義。

它們並不適用於所有用例 - 建置Lingo.dev通常需要比它們所能提供的更多的定製或瀏覽器支援。但在尋求第三方解決方案之前，它們值得考慮。

您發現哪些其他 HTML 元素在您的專案中有用？請在評論中告訴我！

有用的連結：

• Lingo.dev 在 Twitter/X 上- 開發 + 樂趣；

• GitHub repo - 給它一顆星 :)

• Discord - 使用者告訴我們需要 Discord，所以我們建立了一個 👀

原文出處：https://dev.to/maxprilutskiy/html5-elements-you-didnt-know-you-need-gan