HTML の有効なタグ紹介

1. progressタグとmeterタグ
プログレスを表示してくれるタグです。css pseudo classesを利用すると、きれいに見せます。
progressタグとmeterタグの大きい差はmeterタグにはlowとhighの属性があり、ゲージによる、プログレス色の差を表示することができるところです。

```
<label for="file">Downloading progress:</label>
<progress id="file" value="32" max="100"> 32% </progress>
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2516328/2824b3cd-6647-6b7f-934b-fb56b29c671d.png)
[progressを使って見る](https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_progress)

```
<p><label for="anna">Anna's score:</label>
<meter id="anna" min="0" low="40" high="90" max="100" value="95"></meter></p>

<p><label for="peter">Peter's score:</label>
<meter id="peter" min="0" low="40" high="90" max="100" value="65"></meter></p>
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2516328/48a6a9d1-ae24-f6aa-d84d-6be0aa099be6.png)
[meterを使って見る](https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_meter)

2.　よく知られているタグであるdetailsタグはsummaryタグの内容のみを表示して、クリックしたら、detailsタグ内の内容まで表示してくれるものです。detailsをクリックした時のCSSは「#details[open]」です。

```
<details>
  <summary>Epcot Center</summary>
  <p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
</details>

```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2516328/06aedf39-a293-1862-99f8-d39167288b53.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2516328/163ae451-960b-7c3f-c448-73c3097a8cdc.png)
[detailsを使って見る](https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_details)

３．inputタグのtypeに追加された属性はカレンダーの機能や時間、週単位のユーザ選択をやり安くしてくれます。
dateのmin、maxを指定して、欲しい範囲を絞ることも可能です。

３．１．dateタグ

```
<input type="date" id="datemin" name="datemin" min="2000-01-02" max="2022-12-31">
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2516328/5c5020d2-7a2f-1eea-ccd2-c746edc54f6b.png)
[dateを使って見る](https://www.w3schools.com/html/tryit.asp?filename=tryhtml_input_date_max_min)

３．２．monthタグ

```
<input type="month" id="bdaymonth" name="bdaymonth" min="2022-02" max="2022-07">
<input type="week">
<input type="time">
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2516328/4315678a-35b5-c2ba-ef80-b223d132566a.png)
[monthを使って見る](https://www.w3schools.com/html/tryit.asp?filename=tryhtml_input_month)

３．３．weekタグ

```
<input type="week" id="week" name="week">
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2516328/e20edc33-bc12-30e6-842b-980d96b3c866.png)
[weekを使って見る](https://www.w3schools.com/html/tryit.asp?filename=tryhtml_input_week)

３．４．timeタグ

```
<input type="time" id="appt" name="appt">
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2516328/b7575715-ab59-24a4-bf77-ea19a72267ad.png)
[timeを使って見る](https://www.w3schools.com/html/tryit.asp?filename=tryhtml_input_time)

３．５．rangeタグ

```
<input type="range" id="vol" name="vol" min="0" max="50">
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2516328/e52f2cf1-7a27-83f5-7f1e-c7b11b649431.png)
[rangeを使って見る](https://www.w3schools.com/html/tryit.asp?filename=tryhtml_input_range)

４．イメージをユーザデバイスに合わせて表示する時、CSSのみを使うと、該当CSSをすべてダウンロードして、その中から、ユーザに合わせたイメージを表示することになりますが、pictureタグを利用すると、ユーザのデバイスに合わせたイメージのみをダウンロードして、表示します。
ユーザデバイスに関してはmediaに指定できるし、基本イメージ（pictureタグが使えない場合など）はpictureタグ内部のimgタグにて指定できます。

```
<picture>
<source srcset="1.jpeg" media="(min-width:1200px)" />
<source srcset="2.jpeg" media="(min-width:900px)" />
<source srcset="3.jpeg" media="(min-width:500px)" />
<img src="default.jpeg" />
</picture>
```
[pictureを使って見る](https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_picture)

５． auto complate機能はスクリプトを利用して、開発していた内容でしたが、datalistタグにより、簡単にできるようになりました。
最も良いのは先頭文字のみの検索ではないことですね。途中や末尾の文字だとしても、正しく検索してフィルターを掛け、表示してくれます。

```
<label for="movie">What is your favourite movie?</label>
<input type="text" list="autolist" />
<datalist id="autolist">
<option value="A Movie" />
<option value="B Movie" />
<option value="C Movie" />
</datalist>
```
[datalistを使って見る](https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_datalist)


参照元
> https://www.youtube.com/watch?v=EMOlLLTAZMs