5
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

HTML5 Tag Tips 強調/引用/連絡先情報

Posted at

HTML5 Tag Tips

XHTML2.0からHTML5になって定義が明確になった要素があったりするので、自分の認識違いゆえ、意図しないマークアップをしませんように・・・

強調編

strong

テキストレベルセマンティック
**「重要性」**のみを表す要素。
strong要素自身を入れ子にして重要性の度合いを示すことができる。機会に対して重要を示すのでSEO向け。
強調の意味はHTML5では消失しているので注意。

em

テキストレベルセマンティック
**「強調」**のみを表す要素。
音声読み上げツールで読み上げられた場合に、大きな声になることを想定。読み手に対して強く言いたいだけなのんでSEO向けには使わない。

i

テキストレベルセマンティック
イタリック体にできるってだけ。原則として利用しない。

b

テキストレベルセマンティック
印刷時に太字になるってだけ。原則として利用しない。

mark

テキストレベルセマンティック
ハイライトされるってだけ。読み手が参照しやすいように目立たせることが目的なのでSEO向けに使わない。HTML5から追加されている。
重要なテキストのマーキングではなく、読み手の操作に関連している箇所に利用する。

引用編

blockquote

グルーピングコンテンツ
別ソースから引用する場合に利用する。
cite属性で参照先URLを指定することが出来る。ただしこのURLは読み手のためのURLではない。
出典情報やfooter情報blockquoteで囲むことが出来る。
出典の場合はマイクロデータの構文を使用して追加することも出来る。

cite

テキストレベルセマンティック
本、新聞、エッセイ、詩、楽譜、歌、脚本、映画、テレビ番組、ゲーム、彫刻、絵画、映画、演劇、オペラ、ミュージカル、展示、訴訟事例報告などのタイトルに対して利用。
記事内のコメントの著者名や、検索結果のURLを表す。

q

テキストレベルセマンティック
文章を引用する場合に利用する。
cite属性で参照先URLを指定することが出来る。
ブラウザのデフォルト機能で引用符がつくが、これを目的に利用してはならない。

連絡先情報編

address

セクション

最も近いarticleまたはbody要素の祖先の連絡先情報を表す。祖先がbody要素である場合、連絡先情報は、文書全体に適用される

問い合わせ先メールアドレスやコピーライト表記などの情報をaddressで囲んで利用することもできる。(その場合はだいたいfooter内に配置される)

small

テキストレベルセマンティック

副次的なコメントを表す。
小さな活字体は通常、免責事項、警告、法的制約、または著作権を取り上げる。小さな活字体はまた、時として帰属に対して、またはライセンス要件を満たすために使用される。

免責・警告・法的規制・著作権・ライセンス要件などの注釈や細目を表す要素。
テキストに対して使用するので、長文に対して全体を <small> ~ </small> で囲むような使い方はしない。

5
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?