個人的に珍しい？と思うHTMLタグを観察してみた #初心者

はじめに

HTML5になってから大分時が経ちましたよね。
最近のwebブラウザでもHTML5が標準になっています。
私が最初にHTMLに触れたのはXHTMLでしたが、HTML5をメインに勉強してきました。

が、

これいつ使うんだ...と思うタグ(個人的に)が多々あり疑問に思っていたので、
今更一部ではありますが、個人的に気になっていたタグを書いてみようかなと思います。
2012年時点で100~を超えるタグが存在しているみたいです(多いなぁ..)。

今回作ったデモ

書いてみた！

progress

...進捗状況を表すらしい。
現時点の状況をvalueに数値指定する。js等を使ってvalueをとってくれば面白いことできそう。

index.html

<p>TRUNK CAMP<progress value="50" max="100">50%</progress></p>

details,summary

...detailsで開閉式のウェジットを作成。
summaryはdetailsの要素や説明文を表す。
素直に感動した。

index.html

<details open>
 <summary>TRUNK</summary>
  <details>
   <summary>TRUNK CAMP</summary>
   <ul>
    <li>TRUNK CAMP</li>
    <li>TRUNK CAMP</li>
    <li>TRUNK CAMP</li>
    <li>TRUNK CAMP</li>
    <li>TRUNK CAMP</li>
   </ul>
  </details>
  <details>
   <summary>TRUNK CAMP2</summary>
   <ul>
    <li>TRUNK CAM2P</li>
    <li>TRUNK CAMP2</li>
    <li>TRUNK CAMP2</li>
    <li>TRUNK CAMP2</li>
    <li>TRUNK CAMP2</li>
   </ul>
 </details>
</details>

dialog

...閲覧者が操作可能なダイアログを表すらしい。
jsなどのアラートでええやんはここではNG

index.html

<dialog id="log">
 <p>TRUNK CAMP</p>
 <button type="button" onclick="document.getElementById('log').close();">閉じるし閉じるし</button>
 </dialog>
 <button type="button" onclick="document.getElementById('log').show();">開くし開くし</button>

dfn

...定義語を表すタグ。
abbrで定式名称
dl,dt,ddなどと組み合わせて使ったりできそう。
abbr(略称を表すタグ)と組み合わせることもできるらしい。
むずかすぃ..

index.html

<p>
 <dfn title="HyperText Markup Language">HTML</dfn>
</p>

fieldset,legend

...フォームなどの入力コントロールをまとめたりするタグ
fieldsetで内容をまとめてlegendで内容の見出しを付けるらしい。
名前カッコ良い

index.html

<fieldset>
 <legend>TRUNK CAMP</legend>
 <label for="name">お名前</label><input type="text" name="name" id="name" value="">
 <label for="name">住所</label><input type="text" name="address" id="address" value="">
</fieldset>

cite

...書籍や楽曲などの作品タイトルを表すタグ。
qタグと併用して使ったりもできるらしい。

index.html

<p><cite>TRUNK CAMP</cite>TRUNK</p>

まとめ

上記の他にもまだまだあるHTMLのタグ
なんだこのタグはぁ...と思うことが多々ありました。
正直覚えられる気がしないし他のタグで組むこともできるけど、知って損はないですよね。
奥が深いHTMLをこれからも追求していきたいと思います。

今回参考にした本できるポケット HTML5&CSS3/2.1全事典

次はCSS3のプロパティもやってみようかなと思います。