HTML5 の <progress> タグ
広義の HTML5 は色々と進化をとげていますが 狭義の HTML5 としてのタグや属性も追加・削除があります。
今回は HTML5 で追加された <progress> タグです。
<progress> は 「進捗」を表すタグです。 対応しているブラウザであれば 以下のようにプログレスバーを表示してくれます。
(Firefox)
(GoogleChrome)
Windows のファイルコピーや ブラウザのロード時に表示される アレですね。
記述は簡単で、次のようになります。
<progress value="0" max="100">0%</progress> <progress value="15" max="100">15%</progress>
「進捗」を表現するためのものなので 温度などの表示には使いません。 （<meter> というタグがあります）
また、 value 属性を定義しないと ブラウザによっては 「ただの進捗中」を表現してくれます。
<progress>(読み込み中)</progress>
(Firefox)
(GoogleChrome)
（矢印は動きのイメージです。実際には表示されません）
これなら進捗率が取得できない場合にも進捗中であることを表現できますね。
これまで「進捗バー」は、画像やスタイルで工夫して表現していました。 しかしそれでデータとして扱うのが大変です。 HTML5なのに、デザイン寄りにも見えるこのタグですが タグとして明確に意図を表現できるようになり 見た目はブラウザ（とスタイル）が整えてくれるようになったわけです。
