HTML5の「おまえそんなことできたの？」5選

この記事は[Make IT Advent Calendar 2019](https://qiita.com/advent-calendar/2019/make_it)の20日目の記事です。
# HTML5 完全理解していますか？
HTMLとCSSって**ナメてかかったら思いのほか難しかった**という声をしばしば聞きます。
わたし自身、まだまだ勉強中の分野ですが、驚くことにいまだに新たな発見があったりするので奥が深い。CSS設計とか気を抜くとスパゲティになってしまいますしね🍝

今回はあまり知られていないけれど、知っておくと便利そうなHTML要素をご紹介したいと思います。
[W3C](https://www.w3.org/)を隅から隅まで読み込んでいる方には「そんなこともう知ってたよ！」なことばかりなので、「**まあdivとspanなら完全理解したかな**」といった、ある程度コーディングとレイアウトに不自由のなくなった中級者向けに作成しています。

# 実はHTML5はこんなことができた集
[HTML 要素リファレンス](https://developer.mozilla.org/ja/docs/Web/HTML/Element)をあさってみて、特に興味を引いたもの5選です。

## `<details>`
`<details>`は**詳細折りたたみ要素**をHTMLのみで実装できます。
JSなしでさくっと実装できるのはとても嬉しい。ただ、現時点では開閉アニメーションなどの追加はできないようです。
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="css,result" data-user="yu310fu-the-looper" data-slug-hash="OJPWKWM" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="details"><span>See the Pen <a href="https://codepen.io/yu310fu-the-looper/pen/OJPWKWM">details</a> by Y.K (<a href="https://codepen.io/yu310fu-the-looper">@yu310fu-the-looper</a>) on <a href="https://codepen.io">CodePen</a>.</span></p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

いままで謎に開閉要素をCSSのみで実装したり、JSで実装したりしていたのは一体何だったのか。「こんなやついた……？」と思ってぐぐったら**ちゃんといました。**

![夢だけど夢じゃなかった](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/310111/136fd969-1406-0dcc-63dc-8a439348cc06.png)

## `<datalist>`
`<datalist>`は**フォームの入力値候補**を定義するタグです。
このデータリストを用いることで、オートコンプリート機能をHTMLのみで実装できます。そもそもJSでの実装方法がわからないので、`<datalist>`にもう足向けて寝られない。

<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="html,result" data-user="yu310fu-the-looper" data-slug-hash="KKwajEg" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="datalist">
  <span>See the Pen <a href="https://codepen.io/yu310fu-the-looper/pen/KKwajEg">
  datalist</a> by Y.K (<a href="https://codepen.io/yu310fu-the-looper">@yu310fu-the-looper</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

## `<dialog>`
`<dialog>`はダイアログ要素を表すタグです。
画面の要素に被さるようなダイアログボックスを手軽に実装できます。
ただし、開閉の実装にはJSが必要です。

<p class="codepen" data-height="265" data-theme-id="dark" data-default-tab="js,result" data-user="yu310fu-the-looper" data-slug-hash="GRgrVVr" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="dialog">
  <span>See the Pen <a href="https://codepen.io/yu310fu-the-looper/pen/GRgrVVr">
  dialog</a> by Y.K (<a href="https://codepen.io/yu310fu-the-looper">@yu310fu-the-looper</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

## `<input type="color">`
`<input type="color">`はカラーピッカーを実装できます。
試し書きでは、[こちら](https://developer.mozilla.org/ja/docs/Web/HTML/Element/input/color)を大いに参考にさせていただきました。

<p class="codepen" data-height="265" data-theme-id="dark" data-default-tab="js,result" data-user="yu310fu-the-looper" data-slug-hash="VwYpZWm" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="colorPicker">
  <span>See the Pen <a href="https://codepen.io/yu310fu-the-looper/pen/VwYpZWm">
  colorPicker</a> by Y.K (<a href="https://codepen.io/yu310fu-the-looper">@yu310fu-the-looper</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

## `<mark>`
`<mark>`は文字列にマーカーを追加することができます。
この存在を知らず`<span>`の`background-color: #XXXXXX;`で代用していたのはわたしだけではないと信じています。
インライン文字列の意味づけは`<mark>`以外にも山ほどあります。セマンティックなコーディングを目指す上で知っておいた方が良いものなので、一度一通り目を通しておくとコーディングの能力がワンランクアップするかもしれません。

<p class="codepen" data-height="265" data-theme-id="dark" data-default-tab="html,result" data-user="yu310fu-the-looper" data-slug-hash="dyPvbgW" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="mark">
  <span>See the Pen <a href="https://codepen.io/yu310fu-the-looper/pen/dyPvbgW">
  mark</a> by Y.K (<a href="https://codepen.io/yu310fu-the-looper">@yu310fu-the-looper</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

# おわりに
マークアップ完全理解者への道程は険しいですね。
これまで雰囲気でHTMLコーディングを行なっていた方は、ぜひ [HTML 要素リファレンス](https://developer.mozilla.org/ja/docs/Web/HTML/Element) に目を通してみてください。きっと新しい発見があるはずです。