HTML Day 2026

こんにちは。荒川零一です。

今日 (2026/08/09) の HTML Day 2026 Tokyo では、忘れられたタグについて想いを馳せようと思いました。

HTML の仕様を調べると、思った以上にいろいろな機能を持つタグが存在することがわかりました。

今日のウェブサイトでは、振る舞いはほとんど CSS や JavaScript、またはウェブ開発のフレームワークによって実現されています。

しかし本来、HTML にはどのようなアイデアがあって、どのような想定がなされていたのだろう・・・?

それを自分の言葉で説明して、その挙動を確かめてみようと思いました。


<details> と <summary>

クリックで開閉する説明をつくることができるタグです。

例えばここをクリックすると…

下のほうに、詳細な説明が開きます。

さらに、入れ子で <details> タグを書くことで…

このあとさらに開く構造をつくることもできます。

ただ、ブラウザの実装に、やる気が感じられませんね。まあ、そこは CSS で頑張れ、ということでしょうか。


<dialog>

モーダルをつくることができるタグです。

<dialog open> と書くと問答無用で表示されるので、先ほどの <details>タグで開閉させるようにしてみます。

はい、これが、<dialog> タグによって表示されたモーダルです。でもなんだか場所が微妙ですね。

よくよく調べてみたところ…

open 属性を直接書くことは、『HTML 仕様で強く禁じられている』らしい。強く禁じられてるなんて言い方、はじめて聞きました。通常のダイアログ操作が予期せぬ形で破損する可能性があるらしいです。JavaScript で show() と close() を呼び出して制御するのが正しいようです。HTML は JavaScript なしでは成り立たないということか。興味深い。

おまけ <dialog> タグで顔をつくりました。

<meter>

ある範囲内の値を示すことができるタグです。

50%

これは私のいまのお腹のすき具合です。2026/08/09 14:36 現在。


<progress>

進捗度合いを示すことができるタグです。伝わる情報は <meter> とほとんど同じなのに、目的が違うということで別のタグになっているのが興味深いです。

上記の <meter> と、同じ値を属性に設定してみました。色と横幅が違いますね。

50%

何も属性を付けずに書くと、読み込み中みたいな表示になりました。


<datalist>

入力フォームにおいて、候補を表示することができるタグです。

こんな機能あったんだなあ。


<output>

入力フォームにおいて、入力に応じた計算結果などを表示できるタグです。

+ = 0

ただし…この結果を更新するためには、JavaScript を書かなければなりません。この専用タグ、要る…?と思ってしまいましたが、まあ、ほとんどみたことがないので、そういうことですね。でもおもしろい。


<fieldset> と <legend>

入力フォームをグループ化したり説明をつけるためのタグです。

<fieldset> で囲んだ中に、<legend>◯◯</legend> を書くと、その説明が最初に表示されます。

あなたのこと(任意)

やっぱ最初に想定されていたウェブサイトって、何かを入力させることが主なユースケースとして想定されていたのかなあ、と思ったりしました。


<abbr>

略語を示すことができるタグです。

わたしたちは あのとき 笑っていた。

カーソルを合わせると、その略語の意味が表示されました。このあたりの表現方法は、ブラウザ側でいろいろ工夫の仕方があるように思いました。


<dfn>

その語が、ここで初めて定義されることを示すタグです。

さみしさとは、だれかが居たことの、形のことだ。

見た感じ、斜体になるだけにみえますが、これもなんだか表現しがいのある機能のような気がしました。


ここで時間切れです。楽しかったです!

<kbd> <samp> <var> <time> <mark> <ins> <del> <wbr> <bdi> <bdo> <data> <q> <address> <hgroup> <search>