HTML5 テキストレベルの要素

/ HTML5/CSS3/jQuery / Comment[0]

HTML5で変更が加えられたものと個人的に理解が薄い要素を書いてみます。
http://www.w3.org/TR/html5/text-level-semantics.html#text-level-semantics

a要素

  • カテゴリ:
    • フロー
    • インタラクティブ
    • フレージング
    • パルパブル
  • コンテンツモデル:トランスペアレント
  • 属性
    • グローバル
    • href属性:ハイパーリンク先のURLを指定
    • target属性:ハイパーリンクを開く場合のターゲット
    • media属性:ハイパーリンク先のメディア
    • hreflang属性:ハイパーリンク先の言語
    • type属性:ハイパーリンク先のMIMEタイプ

おなじみのコンテンツを移動するためのハイパーリンクを指定する要素です。HTML5での変更点としては、target="_blank"が非推奨ではなくなったことと、a要素中にdivなどのブロック要素を入れることも可能になりました。

strong要素

  • カテゴリ
    • フロー
    • フレージング
    • パルパブル
  • コンテンツモデル:フレージング
  • 属性:グローバル

以前は見た目上で強調を示すためのタグでしたが、HTML5では意味合い上でも重要という意味を持たせます。
入れ子にすることも可能で、階層が深くなるほど重要度が増していきます。

small要素

  • カテゴリ
    • フロー
    • フレージング
    • パルパブル
  • コンテンツモデル:フレージング
  • 属性:グローバル属性

small要素は注釈、法的規制、著作権、帰属、ライセンス要件などに使用されます。

time要素

  • カテゴリ
    • フロー
    • フレージング
    • パルパブル
  • コンテンツモデル:フレージング
  • 属性:グローバル, datetime属性

time要素は時間を表記する場合に使用します。時間のフォーマットに決まりはありませんが、検索エンジンなどが読み取れるようなフォーマットが望ましいでしょう。
悪い例「<time>○○時ごろ</time>」

em要素

  • カテゴリ
    • フロー
    • フレージング
    • パルパブル
  • コンテンツモデル
  • フレージング
  • 属性:グローバル

em要素はコンテンツを部分的に強調する要素です。入れ子にすることも可能で階層が深くなるほど強調の意味合いが強くなります。
strong:重要 em:強調

cite要素

  • カテゴリ
    • フロー
    • フレージング
    • パルパブル
  • コンテンツモデル:フレージング
  • 属性:グローバル属性

文書中に引用して使用した作品のタイトルを表すために使用します。作者名は使用できません。

q要素

  • カテゴリ
    • フロー
    • フレージング
    • パルパブル
  • コンテンツモデル:フレージング
  • 属性:グローバル, cite属性

q要素は引用テキストをマークアップする場合に使用します。

dfn要素

  • カテゴリ
    • フロー
    • フレージング
    • パルパブル
  • コンテンツモデル:フレージング
  • 属性:グローバル

dfn要素は言葉の定義を指定する場合に使用します。親要素の中に記述します。

abbr要素

  • カテゴリ
    • フロー
    • フレージング
    • パルパブル
  • コンテンツモデル:フレージング
  • 属性:グローバル

abbr要素は略語の頭文字を指定する要素です。title属性で正式名称を指定することでツールチップとして表示されるようになります。

var要素

数式やプログラムで変数や定数を表す識別子、物理量、関数のパラメータ、シンボルなどに使用します。

samp要素

プログラムなどからのサンプル出力を表示する場合に使用します。

i要素

以前はイタリック体で表示するための要素でしたが、HTML5では人の思想や言葉や専門用語、名称などに使用します。

私は生きることをいとう。太陽のもとに起こることは、何もかも私を苦しめる。どれもみな虚しく、風を追うようなことだ。

b要素

HTML5では他と区別したいテキストを表す際に使用します。(emでもstrongでも当てはまらない場合)

u要素

HTML5では明確に伝わらなかったり本来とは異なる表記になるテキストに使用します。

mark要素

ハイライトするだけの要素です。

ruby要素

ルビ=ふりがなを振る際に使用します。HTML5で追加されました。

rt要素

ふりがなの部分をマークアップする要素です。HTML5で追加されました。

<ruby>L<rt>エル</rt>PI<rt>ピッ</rt>C<rt>ク</rt></ruby>

rp要素

ふりがなの部分をマークアップする要素ですが。rtと違う点は()でふりがなを囲みます。

bdi要素

テキストの一部分の表記方向を変える要素です。(英字→アラビア アラビア→英字)

wbr要素

コンテンツ幅が足りなくなった時に折り返す位置を明示的に指定する要素です。HTML5で追加されました。空要素のため閉じタグは不要です。

ins要素

追記であることを示す要素です。

<ins datetime="YYYY-MM-DDThh:mm:ssTZD">追記コンテンツ</ins>

del要素

訂正文書と訂正時刻を示す要素です。

<del datetime="YYYY-MM-DDThh:mm:ssTZD">訂正前の文書</del>

s要素

テキストが正確でないことを示す要素です。

関連記事

コメント

:
:
:
:
:
管理人のみ表示を許可