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

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

ライダー

ライダー

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

空いた時間に、みんな大好き 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 に その使い方なり注意点なりを記載しますが、ついついいらないことも書いてしまい、全体として長ったらしくなることがありますよね。そういう長ったらしい説明にこれらのタグを適用してあげると、必要な人は開いて読むことができるし、必要ない人は読まずに必要な情報に真っ先にアクセスすることができます。


おわりに

いかがでしたか? 全部「div」でマークアープしても見た目は担保できてしまうHTMLですが、「知れば知るほど奥が深くて参っちゃうなあ」というのが本音です。

機械にも人間にも優しいマークアップを心がけて頑張っていきたいと思います。それではまた。

LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。

Webサイト制作の実績・料金を見る

この記事のシェア数

ライダー
ライダー フロントエンドエンジニア / 松本 和馬

初めまして、ライダーです。フロントエンドエンジニアです。じっくりひとつの技術極めることが得意ではない一方、サービスの案を考えたり作ったりすることが好きで得意です。

このメンバーの記事をもっと読む
それいけ!フロントエンド | 213 articles
デザイン力×グローバルな開発体制でDXをトータル支援
お問い合わせ 会社概要DL