この記事はMake IT Advent Calendar 2019の20日目の記事です。
HTML5 完全理解していますか？
HTMLとCSSってナメてかかったら思いのほか難しかったという声をしばしば聞きます。
わたし自身、まだまだ勉強中の分野ですが、驚くことにいまだに新たな発見があったりするので奥が深い。CSS設計とか気を抜くとスパゲティになってしまいますしね🍝
今回はあまり知られていないけれど、知っておくと便利そうなHTML要素をご紹介したいと思います。
W3Cを隅から隅まで読み込んでいる方には「そんなこともう知ってたよ！」なことばかりなので、「まあdivとspanなら完全理解したかな」といった、ある程度コーディングとレイアウトに不自由のなくなった中級者向けに作成しています。
実はHTML5はこんなことができた集
HTML 要素リファレンスをあさってみて、特に興味を引いたもの5選です。
<details>
<details>は詳細折りたたみ要素をHTMLのみで実装できます。
JSなしでさくっと実装できるのはとても嬉しい。ただ、現時点では開閉アニメーションなどの追加はできないようです。
See the Pen details by Y.K (@yu310fu-the-looper) on CodePen.
いままで謎に開閉要素をCSSのみで実装したり、JSで実装したりしていたのは一体何だったのか。「こんなやついた……？」と思ってぐぐったらちゃんといました。
<datalist>
<datalist>はフォームの入力値候補を定義するタグです。
このデータリストを用いることで、オートコンプリート機能をHTMLのみで実装できます。そもそもJSでの実装方法がわからないので、<datalist>にもう足向けて寝られない。
See the Pen datalist by Y.K (@yu310fu-the-looper) on CodePen.
<dialog>
<dialog>はダイアログ要素を表すタグです。
画面の要素に被さるようなダイアログボックスを手軽に実装できます。
ただし、開閉の実装にはJSが必要です。
See the Pen dialog by Y.K (@yu310fu-the-looper) on CodePen.
<input type="color">
<input type="color">はカラーピッカーを実装できます。
試し書きでは、こちらを大いに参考にさせていただきました。
See the Pen colorPicker by Y.K (@yu310fu-the-looper) on CodePen.
<mark>
<mark>は文字列にマーカーを追加することができます。
この存在を知らず<span>のbackground-color: #XXXXXX;で代用していたのはわたしだけではないと信じています。
インライン文字列の意味づけは<mark>以外にも山ほどあります。セマンティックなコーディングを目指す上で知っておいた方が良いものなので、一度一通り目を通しておくとコーディングの能力がワンランクアップするかもしれません。
See the Pen mark by Y.K (@yu310fu-the-looper) on CodePen.
おわりに
マークアップ完全理解者への道程は険しいですね。
これまで雰囲気でHTMLコーディングを行なっていた方は、ぜひ HTML 要素リファレンス に目を通してみてください。きっと新しい発見があるはずです。