僕は，HTMLタグを知らない

HTML

ReactでProgressコンポネートを開発した際，レビューにてチームのフロントエンジニアにprogressタグなるものがあることを教えてもらった．複雑なUIを作成しない時，HTMLタグで代替できるものは開発コストを下げるために知っておいた方が良いと考えた．いい機会だと思い，MDNを見て気になったタグと使いそうな属性をまとめてみた．

各タグの詳細は，リンクをクリックするとMDNのページに遷移するので自分の手で動かしてみるとよいだろう．

progressタグ

progressタグは，タスクの進捗状況を表示するHTMLタグだ．

例

<progress value=20 max=100 ></progress>

属性

max

値は，正数でタスクの総作業量を表す．既定値は１

value

タスクの進捗状況を表す

videoタグ

videoタグは，映像再生に対応するメディアプレイヤーを埋め込む．

例

<video controls src="movie_url" loop autoplay ></video>

属性

controls

動画の下部に表示されるユーザーインターフェイスの表示を行う

src

videoリソースの場所

autoplay

ブラウザをロードした時に，自動で再生する

loop

動画が終わった後に，先頭に戻る

イベント

多くのイベントがある．再生の始まりを示すplayと動画が終了したことを知らせるendedは，Googleアナリティクスで解析することに利用できそうだ．

sourceタグ

sourceタグは，picture，audio，videoが複数のリソースを持つ時に，利用する．

例

<video controls>
  <source src="foo.webm" type="video/webm">
  <source src="foo.ogg" type="video/ogg"> 
  <source src="foo.mov" type="video/quicktime">
  I'm sorry; your browser doesn't support HTML5 video.
</video>

属性

src

リソースの場所

type

リソースのMIMEタイプ

detailsタグ

detailsタグは，HTMLの詳細折りたたみ要素だ．折りたたむラベルをsummary要素で指定することができる．

例

オススメのTwitterアカウント https://twitter.com/imaharuTech 

<details>
    <summary>オススメのTwitterアカウント</summary>
    https://twitter.com/imaharuTech
</details>

属性

open

最初から開いた状態で表示する．この属性をJavaScriptで操作することで開閉が可能

templateタグ

templateタグは，読む込む時には，表示されずJavaScriptを利用してコンテンツを作成する．

JavaScirptでまるまる生成した要素を最初から作成することで，保守性が上がるなどの効果がある．

例

<template id="template">
  <p>テンプレート</p>
</template>

属性

なし

codeタグ

codeタグは，markdownのコード挿入を表現するタグだ．コンピューターコードの短い断片の文字列であると識別できるような外見のコンテンツを表示する．

例

code 

<code>
  code
</code>

属性

なし

preタグ

preタグは，整形済みテキストを表す．タグの中に記述されたホワイトスペース文字がそのまま表示されるのが特徴だ．

例

<pre>
     white       space
</pre>

属性

全て非推奨

まとめ

  • HTMLタグについて調査した
  • 使いたいタグは，ブラウザーの対応を確認する必要がある
  • divとCSSで頑張る前に，HTMLタグを確認する癖をつける