よりセマンティックになった イタリック(i)などのhtml5 タグ 

2011年6月27日

HTML5では、タグ自体がセマンティックな意味を持つことになり、装飾関係は全てCSSで行うことになります。
分かりやすいように下記にまとめてみます。
元がW3Cの英文を自分なりに訳してみました。
HTML5では利用する時の用途が新たに定義されました。
i要素は、他の文章から区別する為に表記はイタリック体のテキストです。
ただし、強調や重要といった事に使いません。
使用例は、分類の名称、技術的な専門用語、他言語の慣用的フレーズ、思考、船の名などに使用します。

参考
http://dev.w3.org/html5/markup/i.html

<i>
i要素を使うときには同時にclass属性を使うことが推奨されます。
一般的には下記の様に定義しています。
i {
font-style: italic; }
http://dev.w3.org/html5/markup/i.html

<b>
b要素は、重要だという事を伝えるのでなく、ただ文章内で意図的に区別するために使います。
例えば、文章内にあるキーワードやレビュー記事などに記述されている商品名です。
一般的には下記の様に定義しています。
b {
font-weight: bolder; }

参考
http://dev.w3.org/html5/markup/b.html

<em>
em要素は、そのテキスト全体の強調を表します。
一般的には下記の様に定義しています。
em {
font-style: italic; }

参考
http://dev.w3.org/html5/markup/em.html

<strong>
strong要素は、その文言や文章を強い重要性を表します。
ネストする事により、さらに強く重要性をしめすことも出来ます。

参考
http://dev.w3.org/html5/markup/strong.html

ちなみに、bigはHTML5から廃止されました。

Related Posts

Vimeoのレスポンシブ動画埋め込み対応ができない時

Vimeoのレスポンシブ動画埋め込み対応ができない時

Vimeoは色々カスタマイズもできてホームページに動画を埋め込みたい時は便利なサービスです。 ただ、最近ではレスポンシブデザインのサイトが多くなっているので固定サイズのまま埋め込むとおかしなことになってしまいます。 Vimeoの埋め込みコード発行はレスポンシブにも対応しているのですが、オプションのカスタマイズ設定をしないと対応できないので注意が必要です。 オプションのカスタマイズ設定が見当たらない場合...

重要 総額表示義務化に伴うホームページ修正キャンペーン

2021年4月より総額表示が義務化されます。 今まで経過措置として10000円(税別)の記載でホームページ上OKだったものも11000円(税込)等に修正する必要があります。 主な対象としてはBtoC(不特定への一般消費者向け価格表示)であり、 具体的には接骨院、歯医者、眼科、皮膚科等のクリニックやサービス業、ECサービス等幅広く対象とされています。 まだご自身のホームページを修正されていない場合はお早めにご対応下さい。 なお、弊社では初めてのクライアント様は特別料金(無料~)で対応させて頂いています。...

Youtube活用

ウェブサイトで文字だらけのページを見るといくら内容が充実していても読んでみようという気持ちのハードルが上がってしまいます。