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>

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>

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>

detailsを使って見る

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

３．１．dateタグ

<input type="date" id="datemin" name="datemin" min="2000-01-02" max="2022-12-31">

dateを使って見る

３．２．monthタグ

<input type="month" id="bdaymonth" name="bdaymonth" min="2022-02" max="2022-07">
<input type="week">
<input type="time">

monthを使って見る

３．３．weekタグ

<input type="week" id="week" name="week">

weekを使って見る

３．４．timeタグ

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

timeを使って見る

３．５．rangeタグ

<input type="range" id="vol" name="vol" min="0" max="50">

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を使って見る

５． 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.youtube.com/watch?v=EMOlLLTAZMs