こんなのあったんだ！意外と知らないHTMLの要素をご紹介します

ライダー

2018.09.06

こんにちは、フロントエンドエンジニアのライダーです。

空いた時間に、みんな大好き MDN を見ることがありました。そこで僕の知らなかったHTML要素をいくつか見かけたので、今回はそれらをまとめてご紹介したいと思います！

こんな要素あったんだ！
おわりに

こんな要素あったんだ！

<dfn>

https://developer.mozilla.org/ja/docs/Web/HTML/Element/dfn

おそらく「define」の略称でしょう。

ひとつの文章（パラグラフ）のなかで、「strong」や「em」で重要度や、文脈を強調したりしているパターンはよく見られます。「dfn」もその並びにあると考えられ、ただの平たい文章に意味を持たせるために使う要素のようです。

株式会社LIG(リグ)は東京都上野を中心に「Life is Good」掲げて活動する社長がイケメンな事で有名な会社です。

上記は、「株式会社LIGの説明」の文章と考えられます。つまりこれを「dfn」要素でマークアップするとこうなります。

<p><dfn>株式会社LIG(リグ)</dfn>は東京都上野を中心に「Life is Good」掲げて活動する<em>社長がイケメンな事で有名な</em>会社です。</p>

「em」で文脈を少し変えてみました。これはすぐにでも使っていけそうですね！

<menu>

https://developer.mozilla.org/ja/docs/HTML/Element/menu

<div class="menu">

上記のようなものは、これまでに腐るほど書いた記憶がありますが、`<menu>` という要素が存在していました。

これは、いわゆる「グローバルメニュー」や「ヘッダーメニュー」などよりも、

上記のようなアクションボタンがあるエリアに適しているようです。

ただし、これを実装しているブラウザはまだない（2018年8月）そうなので、いますぐに使うことはなさそうですね。

参考：https://caniuse.com/#feat=menu

<dialog>

https://developer.mozilla.org/ja/docs/Web/HTML/Element/dialog

いわゆる「モーダルウィンドウ」などをマークアップする際に用いるタグです。こちらはMDNのサンプルコードが非常にわかりやすかったのでご覧ください（見られないという方は、「Update details」をクリックしてみてくださいね）。

https://developer.mozilla.org/ja/docs/Web/HTML/Element/dialog#Examples

先ほど紹介した <menu> とあわせて使用されていますね。

<details>, <summary>

https://developer.mozilla.org/ja/docs/Web/HTML/Element/details
https://developer.mozilla.org/ja/docs/Web/HTML/Element/summary

こちらは、「ドロワー」などと呼ばれるパーツと同じような挙動をする要素です。これらの要素はインタラクションが可能で、「shadow-dom」として「▼」が描画されるので、それによって開閉が可能になります。

なんか命名がしっくりこないなあと思いつつも、使い方によってはとても便利なものでした。ただし、「details」「summary」を利用すればそのスクリプトを書かなくていいかというと……、ちょっとデザインの自由度的に厳しい部分もあるかもしれません。

しかしこれは、GitHub の「Readme.md」をはじめとした、ビジュアルのデザインをあまり必要としない場所で大きな効力を発揮するように思いました。それほど大きくないライブラリや普段のプロジェクトでは、リポジトリの「Readme.md」にその使い方なり注意点なりを記載しますが、ついつい必要ないことも書いてしまい、全体として長ったらしくなることがありますよね。そういう長ったらしい説明にこれらのタグを適用してあげると、必要な人は開いて読むことができるし、必要ない人は読まずに必要な情報に真っ先にアクセスすることができます。

たとえば上記の説明文も、以下のようにすれば便利です。スッキリしますね(「▼」をクリック・タップしてみてください)！

Details, Summary要素は Readme で活躍する

しかしこれは、GitHub の Readme.md をはじめとしたビジュアルのデザインをあまり必要としない場所で大きな効力を発揮するように思いました。大きくないライブラリや普段のプロジェクトではリポジトリの Readme.md にその使い方なり注意点なりを記載しますが、ついついいらないことも書いてしまい、全体として長ったらしくなることがありますよね。そういう長ったらしい説明にこれらのタグを適用してあげると、必要な人は開いて読むことができるし、必要ない人は読まずに必要な情報に真っ先にアクセスすることができます。