HTML5の10の新機能 あなたは知ってますか？

# はじめに
本記事は[Tapas Adhikary](https://dev.to/atapas)さんより許可を得て、『10 useful HTML5 features, you may not be using』をやっすんが日本語にまとめたものです。

完全訳ではないので、ご興味をもたれた方は、ぜひオリジナルもご確認していただければと思います。
[10 useful HTML5 features, you may not be using](https://dev.to/atapas/10-useful-html5-features-you-may-not-be-using-2bk0)


動画も用意しているので、動画でさらっとみたい方はこちらをどうぞ！

[【YouTube動画】 あなたの知らない HTML5 10の機能](https://youtu.be/bck5yHuuMHE)
[![HTML5の10の機能](https://img.youtube.com/vi/bck5yHuuMHE/0.jpg)](https://www.youtube.com/watch?v=bck5yHuuMHE)


# Detailタグ
では早速やっていきます！
Detailsタグを使うと、文字の折りたたみができます！

<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="html,result" data-user="yassun-youtube" data-slug-hash="YzWNOMz" 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="Detail Tag">
  <span>See the Pen <a href="https://codepen.io/yassun-youtube/pen/YzWNOMz">
  Detail Tag</a> by yassun-youtube (<a href="https://codepen.io/yassun-youtube">@yassun-youtube</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

<br>

実はQiitaでも使えます。
以下のように、クリックすると折りたたんだ文章を展開できます！

<details>
<summary>クリックしてみると...</summary>
<div>
Hello World
# Hello World

```ruby
hello world!!!
```
</div>
</details>

こんな感じで書いてます。

```html
<detail>
<summary>クリックしてみると...</summary>

<div>
<!-- 
表示したい内容
マークダウンも使えます
-->
</div>
</detail>
```

# Content Editable
属性に``contenteditable="true"``を追加すると、コンテンツの編集が可能になります。

<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="html,result" data-user="yassun-youtube" data-slug-hash="XWKpPQP" 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="Content Editable">
  <span>See the Pen <a href="https://codepen.io/yassun-youtube/pen/XWKpPQP">
  Content Editable</a> by yassun-youtube (<a href="https://codepen.io/yassun-youtube">@yassun-youtube</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>



# Map
(このタグはHTML4から使えた気がしますが、細かいことは忘れましょう！)

mapタグを設定して、coordsでリンク場所を指定することができます。
codepenで再現すると、戻れなくなるので、本家からお試しください！
https://dev.to/atapas/10-useful-html5-features-you-may-not-be-using-2bk0#map

```html
<div>
  <img src="https://html5-tips.netlify.app/map/circus.jpg" width="500" height="500" alt="Circus" usemap="#circusmap">
  <map name="circusmap">
    <area shape="rect" coords="67,114,207,254" href="https://html5-tips.netlify.app/map/elephant.htm">
    <area shape="rect" coords="222,141,318, 256" href="https://html5-tips.netlify.app/map/lion.htm">
    <area shape="rect" coords="343,111,455, 267" href="https://html5-tips.netlify.app/map/horse.htm">
    <area shape="rect" coords="35,328,143,500" href="https://html5-tips.netlify.app/map/clown.htm">
    <area shape="circle" coords="426,409,100" href="https://html5-tips.netlify.app/map/clown.htm">
  </map>
 </div>
```



# Mark
markタグを使うと、文字の背景にハイライトをつけることができます。

<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="html,result" data-user="yassun-youtube" data-slug-hash="WNxRgqO" 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/yassun-youtube/pen/WNxRgqO">
  Mark</a> by yassun-youtube (<a href="https://codepen.io/yassun-youtube">@yassun-youtube</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>



# data-* attribute
任意に設定した値にJS側でアクセスできるようになります。

<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="html,result" data-user="yassun-youtube" data-slug-hash="wvWgEVJ" 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="data-* attribute">
  <span>See the Pen <a href="https://codepen.io/yassun-youtube/pen/wvWgEVJ">
  data-* attribute</a> by yassun-youtube (<a href="https://codepen.io/yassun-youtube">@yassun-youtube</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>



# Output
data-* attributeで入力値をJS側で計算して出力しなくても、HTMLだけで完結できます。

<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="html,result" data-user="yassun-youtube" data-slug-hash="MWeJqNG" 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="Output Tag">
  <span>See the Pen <a href="https://codepen.io/yassun-youtube/pen/MWeJqNG">
  Output Tag</a> by yassun-youtube (<a href="https://codepen.io/yassun-youtube">@yassun-youtube</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

oninputの部分を以下のように、textContentにすれば、outputタグ以外でも同じような使い方ができます。

```
oninput="x.textContent=parseInt(a.value) * parseInt(b.value)"
```

<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="html,result" data-user="yassun-youtube" data-slug-hash="ZEOMZrE" 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="ZEOMZrE">
  <span>See the Pen <a href="https://codepen.io/yassun-youtube/pen/ZEOMZrE">
  ZEOMZrE</a> by yassun-youtube (<a href="https://codepen.io/yassun-youtube">@yassun-youtube</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>


# Datalist
datalistとoptionを組み合わせることで、データを選ぶことができます。
また、存在しない単語を入力すると、その単語が追加されます。

codepenで実行すると、警告画面がでますが、右下のRerunで元の画面に戻ります。
戻ると、先ほど入力した値が入っているのが確認できますね。

<p class="codepen" data-height="336" data-theme-id="light" data-default-tab="html,result" data-user="yassun-youtube" data-slug-hash="LYZxJwK" style="height: 336px; 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/yassun-youtube/pen/LYZxJwK">
  Datalist</a> by yassun-youtube (<a href="https://codepen.io/yassun-youtube">@yassun-youtube</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>


# Range
HTMLだけでRangeバーが作れます。

<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="html,result" data-user="yassun-youtube" data-slug-hash="MWeJPgG" 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="Range">
  <span>See the Pen <a href="https://codepen.io/yassun-youtube/pen/MWeJPgG">
  Range</a> by yassun-youtube (<a href="https://codepen.io/yassun-youtube">@yassun-youtube</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>




# Meter
今何%入力が終わりました... みたいな使い方ができます。

<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="html,result" data-user="yassun-youtube" data-slug-hash="PozWyoG" 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="Meter(Progress)">
  <span>See the Pen <a href="https://codepen.io/yassun-youtube/pen/PozWyoG">
  Meter(Progress)</a> by yassun-youtube (<a href="https://codepen.io/yassun-youtube">@yassun-youtube</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>


# Pattern
pattern属性で正規表現を設定すると、HTMLだけでバリデーション付きの入力フォームを作成できます。

<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="html,result" data-user="yassun-youtube" data-slug-hash="jOryeOa" 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="Inputs">
  <span>See the Pen <a href="https://codepen.io/yassun-youtube/pen/jOryeOa">
  Inputs</a> by yassun-youtube (<a href="https://codepen.io/yassun-youtube">@yassun-youtube</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>



# color picker
``input type='color'``で、カラーピッカーも使えます！

<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="html,result" data-user="yassun-youtube" data-slug-hash="eYzgPYL" 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="Color Picker">
  <span>See the Pen <a href="https://codepen.io/yassun-youtube/pen/eYzgPYL">
  Color Picker</a> by yassun-youtube (<a href="https://codepen.io/yassun-youtube">@yassun-youtube</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>


# まとめ
知っている、使ったことがあるHTMLの機能はいくつありましたか？

実際のプロダクトで使うのは難しそうですが、簡単なサイトで使えると楽しいですね。

興味をもった方はぜひ、本家もご確認ください！
[10 useful HTML5 features, you may not be using](https://dev.to/atapas/10-useful-html5-features-you-may-not-be-using-2bk0)