【HTML】知っておくと表現が広がる！特殊・マイナーだけど便利なタグまとめ

HTMLには、普段はあまり使わないけれど、知っていると便利なタグがあります。JavaScriptを使わずに開いたり閉じたりできる欄を作れたり、数値をバーで表したりできます。この記事では、そうしたタグの使い方をまとめます。

details と summary：開いたり閉じたりできる欄

クリックすると中身が開く欄（アコーディオン）を、HTMLだけで作れます。よくある質問や、長い補足をたたんでおきたいときに便利です。

<details>
  <summary>よくある質問：送料はいくらですか？</summary>
  <p>全国一律で500円（税込）となります。5,000円以上のお買い上げで無料になります。</p>
</details>

<details>
  <summary>よくある質問：送料はいくらですか？</summary>
  <p>全国一律で500円（税込）となります。5,000円以上のお買い上げで無料になります。</p>
</details>

左の「▶」のある行をクリックすると、中身が開きます。

• details：開いたり閉じたりする部分全体を囲む。open 属性を付けると、最初から開いた状態になる
• summary：閉じているときも表示される見出し。details の最初に書く

WordPressでは「詳細」ブロックが、この details と summary になります。

datalist：入力欄に候補を出す

入力欄に、選べる候補の一覧を付けられます。

<label for="browser">お使いのブラウザを選択：</label>
<input type="text" id="browser" list="browsers">

<datalist id="browsers">
  <option value="Google Chrome">
  <option value="Mozilla Firefox">
  <option value="Safari">
  <option value="Microsoft Edge">
</datalist>

<label for="browser">お使いのブラウザを選択：</label>
<input type="text" id="browser" list="browsers">

<datalist id="browsers">
  <option value="Google Chrome">
  <option value="Mozilla Firefox">
  <option value="Safari">
  <option value="Microsoft Edge">
</datalist>

input の list 属性と、datalist の id を同じ名前にすると結び付きます。候補から選んでも、自分で自由に入力してもかまいません。候補以外を入力させたくないときは、select（プルダウン）を使います（「フォーム（form）の書き方」）。

progress と meter：数値をバーで表す

どちらもバーで数値を表しますが、意味が違います。

progress：進み具合

<label for="file-progress">ファイルアップロード中：</label>
<progress id="file-progress" max="100" value="70">70%</progress>

<label for="file-progress">ファイルアップロード中：</label>
<progress id="file-progress" max="100" value="70">70%</progress>

タグの中の「70%」は、progress を表示できない環境で代わりに出る文字です。value を書かないと、「進み具合は分からないが処理中」という動き続けるバーになります。

meter：範囲の中の量

<label for="disk-usage">ディスク使用量：</label>
<meter id="disk-usage" min="0" max="100" low="30" high="80" optimum="15" value="25">25%</meter>

<label for="disk-usage">ディスク使用量：</label>
<meter id="disk-usage" min="0" max="100" low="30" high="80" optimum="15" value="25">25%</meter>

この例は「使用量は少ないほどよい」ので、optimum を少ない側（15）にしています。今の値（25）は「少ない」範囲にあるので、ブラウザはよい状態の色（Chromeなら緑）で表示します。使用量が80を超えると、警告の色に変わります。「残り容量」のように多いほどよい値なら、optimum を多い側にします。色はブラウザによって少し違います。

ruby：ふりがなを付ける

読みにくい漢字に、ふりがな（ルビ）を付けられます。

<ruby>
  漢 <rp>(</rp><rt>かん</rt><rp>)</rp>
  字 <rp>(</rp><rt>じ</rt><rp>)</rp>
</ruby>

<ruby>
  漢 <rp>(</rp><rt>かん</rt><rp>)</rp>
  字 <rp>(</rp><rt>じ</rt><rp>)</rp>
</ruby>

• rt：ふりがなの文字
• rp：ルビに対応していない環境でだけ表示されるカッコ。対応していない環境でも「漢(かん)字(じ)」のように読める

blockquote と cite：引用を表す

ほかのサイトや本の文章を引用するときに使います。

<blockquote cite="https://example.com/source">
  <p>ここに引用した文章が入ります。</p>
  <p>引用元：<cite>HTML標準仕様ガイド</cite></p>
</blockquote>

<blockquote cite="https://example.com/source">
  <p>ここに引用した文章が入ります。</p>
  <p>引用元：<cite>HTML標準仕様ガイド</cite></p>
</blockquote>

• blockquote：引用した文章全体を囲む。cite 属性に引用元のURLを書けるが、画面には表示されないので、読者に見せたい引用元は本文にも書く
• cite：本や記事、作品などのタイトルを表す。人の名前には使わない。ブラウザでは斜めの文字で表示されることが多い

ブログでほかの人の文章を引用するときは、自分の文章が主で引用が従になるようにし、引用した部分が分かるように囲んで、引用元を書きます。WordPressでは「引用」ブロックが blockquote になり、下の欄に引用元を入力できます。

まとめ

HTML全体の基本は「HTMLの基本｜タグの書き方とよく使う5つのタグ」で紹介しています。