HTML5 の基本を学び直す(2)

セクション

section タグで基本はセクションを指定できいるが、h1-h6 のタグを使うと、暗黙的にセクションが切られる。

セクションのルート要素になっている物を セクショニングルート といい、親のアウトラインから独立して階層構造を持てる。
セクショニングルート要素は blockquote, body, details, fieldset, fiquire, td が該当。

使ったことないタグを片っ端から調べてみる

abbr : 略称を表示するタグ

    <abbr title="Zoning and Emotional Range Ommited System">ZERO</abbr> は俺に何も教えてはくれない…教えてくれ

address : 連絡先・問合せ先を表す。直近の先祖 article があると、article要素の内容の作者への連絡先情報を表す

    <footer><address><a href="http://white-azalea.hatenablog.jp/">謎言語使いの徒然</a></address></footer>

area : map で指定することで、画像の特定区画をリンクに設定する。

 <img src="images/fire.jpg" usemap="#fire" alt="ファイア" width="384" height="128">
    <map name="fire">
      <area href="burning.htm" shape="rect" alt="燃え尽きろぉぉぉ" coords="15,19,126,104">
    </map>

article : 内容が単体で完結するセクションであることを示す際に使用する。ブログのコメントとか。

    <article><h3>これは…</h3><p>結構使いどころに悩みますよね</p></article>

aside : その部分がウェブページ内における余談・補足情報のセクションであることを示す。

    <p>この空白の最も好きなことは、自分が絶対的有利にあると 思っているやつに『no』と断ってやることだ</p>
    <aside><h1>元ネタ</h1><p>この文章はJOJO第5部、岸辺露伴の台詞である</p></aside>

audio : 音声などを再生する。オプションでコントロールを表示したり、即座に再生したりループしたりできる。

    <audio src="sample/sample.ogg" controls>

b : 他と区別したいテキストを表す際に使用。適当なタグがない時の最終手段にすべき。

    <p><b>危険ドラッグ</b>は法律の改正を繰り返しているものの、イタチごっこの様相を呈している</p>

bdi/bdo : テキストを左、右お好きな方向で表示するためのタグ。

    <bdi dir="左右向き">～内容～</bdi>

canvas : 言わずと知れた…サンプルは別にいいでしょ？

cite : 引用元タイトル情報

    <blockquote><cite>ノーゲーム・ノーライフ</cite>はゲーマー兄弟、『　　』(くうはく)の異世界征服物語である</blockquote>

code : ソースコードを示す

 <script type="text/javascript">
    function jsMsg(){
        alert("Hello World"); 
    }
    </script>

datalist : 入力補完リスト（入力されそうなパターンを予め記載しておく）

    <p>ゲーム会社</p><input type="text" name="com" list="coms" />
    <datalist id="coms">
      <option value="SEGA" label="セガ・エンタープライズ"></option>
      <option value="NINTENDO" label="任天堂"></option>
      <option value="SONY" label="ソニー・コンピューター・エンターテイメント"></option>
    </datalist>

del/ins : 取り消し（削除された文章）/訂正文

    怒首領蜂-大復活- <del cite="http://www.example.com/dummy/page" datetime="2014-12-29T16:00:00+09:00">ついに攻略されたと某所で報じられた</del><ins datetime="2014-12-29T16:00:00+09:00">は現時点で完全攻略の情報はありません。</ins>

fieldset : 複数の入力フィールドをひとまとめにして見やすくする

    <fieldset>
      お名前：<input type="text" name="spamleName" size="20"><br>
      ご住所：<input type="text" name="spamleName" size="60">
    </fieldset>

figure : 図などによる説明

 <figure>
    <figcaption>自身の周期表</figcaption>
    <img src="../images/sample.gif">
    </figure>

footer : 「著作者情報」「連絡先」「関連リンク」などのフッター情報。サンプルなし。

hgroup : HTML5.1 (次期規格)で削除。見出しのグループ化。

kdb : キーボード。キーボード入力を説明するのに使用。

     <p>何かあったらとりあえず<kbd><kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>Delete</kbd></kbd>してしまえばいい</p>