開発者が知っておくべき10の必須HTML要素

モダンなHTMLは、基本的な段落や見出しをはるかに超えて進化してきました。ほとんどの開発者は基礎を知っていますが、真の力はマークアップを自己記述的で、アクセシブルで、保守可能にするセマンティックHTML要素にあります。これらの見過ごされがちなHTMLの宝石は、JavaScriptの依存関係を減らし、より意味のあるウェブ体験を生み出します。

構造と意味を定義する要素

<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>タグは、JavaScriptを介して明示的にクローンして挿入するまでレンダリングされないHTMLコンテンツを保持します。動的なコンテンツ生成に最適です:

<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とは異なり、テンプレートコンテンツはアクティブ化されるまでリソースを読み込んだりスクリプトを実行したりしないため、パフォーマンスを重視したウェブデザインに理想的です。

ユーザーインタラクションを強化する要素

<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、または非表示の入力やdata属性なしで表示値とデータ値の両方が必要なあらゆるシナリオに最適です。JavaScriptはvalueプロパティを通じて値にアクセスできます。

<abbr>要素:アクセシブルな略語

テキストを乱雑にすることなく、略語の完全な意味を提供します:

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

スクリーンリーダーは完全な形式をアナウンスでき、ホバー時にツールチップが表示されます。アクセシブルなウェブデザインにとってシンプルですが強力です。

進捗と出力を表示する要素

<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とは、タグを暗記することではありません。コンテンツを自己記述的にする要素を選択することです。マークアップが自己説明的であれば、コードはより保守しやすくなり、サイトはよりアクセシブルになり、開発はより効率的になります。次のプロジェクトでこれらの要素の1つか2つから始めて、セマンティック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.