強調したいテキストを表す<em>（エンファシス）タグ、重要なテキストを表す<strong>（ストロング）タグ、他と区別したいテキストを表す<b>（ビー）タグ、通常とは異なるテキストを表す<i>（アイ）タグの使用方法の掲載
HTML5
対応ブラウザ
カテゴリー・コンテンツモデル
| 要素 | カテゴリー | コンテンツモデル |
|---|---|---|
| em | ・フローコンテンツ ・フレージングコンテンツ ・パルパブルコンテンツ |
フレージングコンテンツ |
| strong | ||
| b | ||
| i |
グローバル属性
em要素、strong要素、b要素、i要素共通
グローバル属性は、すべての要素に指定できる共通の属性のことです。
accesskey（アクセスキー）
要素にアクセスキーを割り当てます。いわゆるショートカットキーになります。
autocapitallze
入力／編集されたとき、入力文字列の先頭大文字化が自動的に行われるかどうかなどを指定します
| 値 | 内容 |
|---|---|
| offまたはnone | 自動的な大文字化は指定しない |
| onまたはsentences | 最初の文字を大文字化する |
| words | 各語の最初の文字を大文字化する |
| characters | すべての文字を大文字化する |
class（クラス）
要素に分類上の名前を指定します。CSSのセレクタで、特定の要素を選択できるようになります。
contenteditable（コンテント・エディタブル）
要素の内容が閲覧者による編集可能かどうか指定します。
| 値 | 内容 |
|---|---|
| trueまたは、空 | 閲覧者による編集可能。 |
| false | 閲覧者による編集不可。 |
data-
カスタムデータ属性、JavaScriptで使用するための独自の属性を指定します。「data-*****=””」のような形式で開発者が自由に指定できます。JavaScriptを利用してデータ処理したり、独自のデータを入力したりするために使用します。
dir（ディレクショナリティ）
要素の内容の書字方向（文字を書き進める方向）を指定します。
| 値 | 内容 |
|---|---|
| ltr | テキストを左から右へ書き進める。「Left to Righ」の略 |
| rtl | 要素は編集不可。「Right to Left」の略 |
| auto | ユーザーエージェントによって自動的に書字方向を決める |
draggable
Drag and Drop APIを使用して要素をドラッグすることができるか指定します。
| 値 | 内容 |
|---|---|
| テキストを左から右へ書き進める。「Left to Righ」の略 | |
| auto | ユーザーエージェントによって自動的に書字方向を決める |
hidden（ヒドゥン）
要素がその時点でのページの内容に関連がないことを表し、指定された要素は表示されません。用途としては、ページ内に表示したくないデータの値などをセットしておき、POSTなどで値を送信する場合などに使用したりします。（商品IDやユーザーID）
id（アイディー）
要素にユニークな識別IDを指定します。文章内で一意である必要があり、同じ値を複数のidに設定することはできません。CSSのセレクタで、特定の要素を選択できるようになります。また、リンクのフラグメント識別子としても利用できます。
空白文字は使用できません。
lang（ランゲージ）
要素の内容の言語を指定します。html要素や文書全体に対して指定することができます。また、一部の要素に対しても指定することができます。
例：lang=”ja”
spellcheck（スペルチェック）
要素の内容に対するスペルチェックの可否を指定します。
| true | スペルチェックをします。 |
| false | スペルチェックをしません。 |
style（スタイル）
要素に直接スタイルシートを指定します。
※style属性でスタイルを指定する方法はあまり推奨されていません。
tabindex（タブインデックス）
「TABキー」による移動順序を指定します。正の数値で指定すると、その順序にフォーカスが移動します。負の数値を指定すると選択することができますが、TABキーでの移動順序に含まれません。また、0を指定した要素は最後にフォーカスします。
title（タイトル）
要素に補足情報を加えます
translate（トランスレート）
翻訳対象にするかどうかを指定します。
| 値 | 内容 |
|---|---|
| yes | 翻訳対象とする |
| no | 翻訳非対象とする |
イベントハンドラ属性は、JavaScriptのコードを閲覧者の操作に合わせて実行する属性です。
onclick
要素をクリックしたときにスクリプトを実行します。
oninput
入力コントロールにデータを入力したときにスクリプトを実行します。
onsubmit
入力コントロールからデータを送信するときにスクリプトを実行します。
em要素 書式・概要
インラインレベル要素
<em>～</em>em要素は、その部分が強調されていることを表します。em要素の強調は「強勢」を意味する強調する（強勢とは、口にする際に強調してアクセントを付けて発音すること。）。そのため、em要素で文章のどこを強調するのかによって、文章の意味合いが変化してしまう点に注意してください。
たとえば下の例では、1つ目の文章は「私は（他のどの料理でもなく）」ひつまぶしをが食べたいんです。」というような意味になるのに対して、２つ目の文章は「（あなたはそうじゃないかもしれないけど）私はひつまぶしが食べたいんです。」という意味です。
使用方法
<!DOCTYPE html>
<html lang="ja">
<head>
<title>em要素のサンプルページ</title>
<meta charset="uft-8">
</head>
<body>
<h1>em要素なし</h1>
<p>
私は明日、HTML言語が勉強したい！
</p>
<h1>em要素あり</h1>
<p>
私は明日、<em>HTML言語</em>が勉強したい！
</p>
</body>
</html>chrome 実行サンプル
Firefox 実行サンプル
edge 実行サンプル
opera 実行サンプル
strong要素 書式・概要
インラインレベル要素
<strong>～</strong>strong要素は、その部分が「重要であること」「重大・深刻であること」「緊急性があること」のいずれかを表します。em要素とは異なり、文章の意味合いを変化させることはありません。
この要素は、注意や警告を示すために使用できるほか、見出し・段階・図表のタイトルなどにおいて重要な部分を区別できるようにするために使用することもできます。
使用方法
<!DOCTYPE html>
<html lang="ja">
<head>
<title>strong要素のサンプルページ</title>
<meta charset="uft-8">
</head>
<body>
<h1>strong要素なし</h1>
<p>
私は明日、HTML言語が勉強したい！
</p>
<h1>strong要素あり</h1>
<p>
私は明日、<strong>HTML言語</strong>が勉強したい！
</p>
</body>
</html>chrome 実行サンプル
Firefox 実行サンプル
edge 実行サンプル
opera 実行サンプル
b要素 書式・概要
<b>～</b>b要素は、文書内で他と区別したいテキストを表すのに使用します。（文書中の製品名やキーワード）従来は、<b>タグで囲まれたテキストは太字になりました。ただし、そのテキストが重要であるという意味ではありません。また、この要素が示す内容がわかるように、class属性で明示することが推奨されています。
テキストを強勢する場合は、em要素を使用し、重要性を示す場合はstrong要素を使用します。
<!DOCTYPE html>
<html lang="ja">
<head>
<title>b要素のサンプルページ</title>
<meta charset="uft-8">
</head>
<body>
<h1>b要素なし</h1>
<p>
私は明日、HTML言語が勉強したい！
</p>
<h1>b要素あり</h1>
<p>
私は明日、HTML言語が<b>勉強したい！</b>
</p>
</body>
</html>chrome 実行サンプル
Firefox 実行サンプル
edge 実行サンプル
opera 実行サンプル
i要素 書式・概要
<i>～</i>i要素は、心の声や思考、気分、文書書内で定義されていない専門用語など、他と区別したい異なるテキストを表します。また、この要素が示す内容が分かるように、class属性で明示することが推奨されています。
ブラウザによっては、斜体文字になりますが、デザインの目的で使用しないほうがよいでしょう。デザイン上の目的であえれば、ＣＳＳで指定します。
i要素は、、Font Awesomeを始めとしたアイコンを置くために用いたりします。アイコンを置くためにi要素を使うという風習が広まったみたいですが、i要素はiconではありません。そのような定義はされてはいません。
<!DOCTYPE html>
<html lang="ja">
<head>
<title>i要素のサンプルページ</title>
<meta charset="uft-8">
</head>
<body>
<h1>i要素なし</h1>
<p>
私は明日、HTML言語が勉強したい！
</p>
<h1>i要素あり</h1>
<p>
私は明日、HTML言語が<i>勉強したい！</i>
</p>
</body>
</html>chrome 実行サンプル
Firefox 実行サンプル
edge 実行サンプル
opera 実行サンプル
コメント