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

使ったことなさげなタグを列挙（２）

前回

HTML5 の基本を学び直す(2) - 謎言語使いの徒然

mark : 注目させたい箇所をハイライト表示。特別な意味論は持ってない。

    <p>人を始末しようって事は、<mark>逆に始末されるかもしれない</mark>ってことを理解してる人ですよね？</p>

math : 数式を作成するためのタグ

  <math>
    <mrow>
      <mrow>
        <msup>
          <mi>a</mi>
          <mn>2</mn>
        </msup>
        <mo>+</mo>
        <msup>
          <mi>b</mi>
          <mn>2</mn>
        </msup>
      </mrow>
      <mo>=</mo>
      <msup>
        <mi>c</mi>
        <mn>2</mn>
      </msup>
    </mrow>
  </math>

menu : そのままの意味

　　<menu label="File">
　　　<button type="button">New</button>
　　　<button type="button">Open</button>
　　　<button type="button">Save</button>
　　　<button type="button">Save as</button>
　　</menu>

meter : メーター。

    <meter value="80" min="0" max="100" low="30 high="70" optimum="60">80% </meter>

nav : ナビゲーション

 <nav>
    <ul> 
    <li><a href="#top">画面TOPに戻る</a>
    <li><a href="/test/users">利用者一覧</a>
    </ul> 
    </nav>

output : フォームの計算結果を埋め込む

 <form oninput="document.getElementById('opt2').value =
      parseInt(document.getElementById('a2').value, 10) * 
      parseInt(document.getElementById('b2').value, 10)">
    <input type="number" id="a2" value="0" size="10"> ＋ 
    <input type="number" id="b2" value="0" size="10"> ＝ 
    <output id="opt2" for="a2 b2">計算結果</output>
    </form>

progress : プログレスバー。meter とは、途中でバーの色が変色するかどうかが違う？

    <progress value="50" max="100">50% </progress>

q : 短い引用

    <p>哲学的に考えるんだ。</p><q cite="http://matome.naver.jp/odai/2131814797339078901">生きるべきか死ぬべきか。それが疑問だ。</q>

s : 関連性の亡くなったコンテンツ(取り消し線)

    諸君、私は<s>初音ミク</s>結月ゆかりが大好きだ！

samp : 出力結果サンプルを格納

    処理が終了すると<samp>あぼーん</samp>と画面に表示されます。

sub : 下線文字。サンプル要らないっしょ？

sup : 上つき文字。サンプル書かない

svg : SVG 画像をそこに定義して貼り付ける

 <svg id="bbb" viewBox="0 0 300 400">
        <path d="M 0 0 L 100 250 L 200 0" stroke-width="20" stroke="blue" fill="none"/>
        <rect x="50" y="200" width="250" height="50" stroke-width="5" stroke="red" fill="pink"/>
        <circle cx="25" cy="150" r="80" stroke-width="10" stroke="green" fill="yellow"/>
    </svg>

time : 時刻を表す(そういう意味というだけ？)

    <time datetime="2014-12-30T12:00">平成26年12月30日 正午</time>

var : 変数を表す

    <p>離散フーリエ変換はある時系列のデータ集合<var>N</var>を周波数を軸としたデータ集合<var>N｀</var>に変換することです</p>

video : 動画

 <video src="test.mp4" autoplay controls width="300" height="250" poster="sumbnail.jpg"></video>

wbr : ここが改行可能であると指定するタグ。<br /> と違い勝手に改行はしない。

dfn : definition 用語を定義する

    <p><dfn title="NO GAME NO LIFE">ノゲノラ</dfn>は、ライトノベル、ノーゲーム・ノーライフのこと。</p>

em : 強調（斜体）。サンプルなし

i : italic 斜体

u : 下線文字

details : 詳細表示。サンプルは W3C wiki より

 <details open="open">
      <summary><label for="fn">Name & Extension:</label></summary>
      <p><input type="text" id="fn" name="fn" value="Pillar Magazine.pdf" /></p>
      <p><label><input type="checkbox" name="ext" checked="checked" /> Hide extension</label></p>
    </details>