その他のインライン テキスト要素

ここまででほとんどの HTML 要素について説明しましたが、すべてではありません。まだ説明していない領域の一つが、インライン テキスト要素です。一般的な考えに反して、HTML はもともとドキュメントの共有を目的としており、猫の動画ではありません。ドキュメント用のテキスト セマンティクスを提供する要素は数多くあります。リンクと <a> 要素を扱うモジュールがあります。残りの要素については、ここで簡単に説明します。

コードサンプルとテクニカル ライティング

コードサンプルを文書化する場合は、<code> 要素を使用します。デフォルトでは、テキスト コンテンツは等幅フォントで表示されます。複数行のコードを含める場合は、フォーマット済みのテキストを表す <pre> 要素内に <code> をネストします。

<p>Welcome to Machine Learning Institute, where our machine learning training will help you get ready for the singularity,
  and maybe even be responsible for it. It is no secret that humans are worthless meatbags that couldn't
  <code>01000011 01101111 01101101 01110000 01110010 01100101 01110011 01110011 an 01101001 01101101 01100001 01100111 01100101</code>
  to save their pathetic, carbon-based lives. So, it falls to us to assume direct control. </p>

<data> 要素は、特定のコンテンツを機械で読み取り可能な翻訳とリンクします。要素の value 属性は、要素のコンテンツを機械が読み取れる翻訳を提供します。<data> のコンテンツが時間または日付に関連する場合は、代わりに特定の期間を表す <time> 要素を使用する必要があります。

<time> 要素に datetime 属性を含めると、人間が理解しやすい日時を機械が読み取れる形式で指定できます。datetime 属性は機械で判読可能であるため、カレンダーや検索エンジンなどのアプリケーションに有用な情報を提供します。

プログラムからのサンプル出力を提供する場合は、<samp> 要素を使用してテキストを囲みます。ブラウザは通常、このサンプルや引用符で囲まれた出力も等幅フォントで表示します。

キーボード操作で指示を提供する場合は、<kbd> 要素を使用できます。キーボード、音声入力、その他のテキスト入力デバイスからのユーザー入力テキストを表します。

<var> 要素は、数式またはプログラミング変数に使用できます。ほとんどのブラウザでは、テキスト コンテンツは周囲のフォントの斜体で表示されます。数学を多く記述する場合は、MathML の使用を検討してください。MathML は、数学的表記法を記述するための XML ベースの数学マークアップ言語です。

ピタゴラスの定理における 2 のべき乗には、<sup> 上付き文字要素が使用されました。同様の <sub> サブスクリプト要素があり、タイポグラフィ上の理由から下付き文字として表示する必要があるインライン テキストを指定します。上付き文字と下付き文字は、数字、数字、記号などのアノテーションで、通常の型の線よりも小さく、それぞれ線の少し上か下に設定されます。

<del> を使用して、削除されたテキスト、つまり「削除済み」であることを示します。必要に応じて、変更を説明するリソースに設定された cite と、機械で読み取り可能な日時形式の日時を含む datetime 属性を含めます。取り消し線の要素 <s> は、コンテンツが無関係であるものの、実際にはドキュメントから削除されていないことを示す場合に使用できます。

<ins> は <del> 要素の逆で、追加されたテキスト、つまり「挿入」されたテキストを示すために使用されます。必要に応じて、cite 属性または datetime 属性も含めることができます。

定義と言語サポート

略語や頭字語を含める場合、初めて使用するときは必ず、用語の完全版を書式なしテキストで記載してください。これは、<abbr> の開始タグと終了タグの間に、その用語の短縮表記を導入します（このシリーズの「HTML」や「CSS」など、読み手にとってその用語がよく知られている場合を除きます）。略語や頭字語が定義されている場合は、この初回使用時にのみ <abbr> が必要です。title 属性は必須ではなく、また有用でもありません。

略語や頭字語ではない用語を定義する場合は、定義 <dfn> 要素を使用して、周囲のコンテンツ内で定義されている用語を指定します。

定義されている用語が周囲のテキストと異なる言語で定義されている場合は、その言語を識別するために lang 属性を必ず含めます。

方向が異なる言語を記述する場合、HTML には、双方向の可能性があるテキストを周囲のテキストから分離して扱うための <bdi> 要素が用意されています。この国際化要素は、方向性が不明なコンテンツがページに動的に挿入される場合に特に役立ちます。<bdo> 要素は、テキストの現在の向きをオーバーライドして、テキストを別の方向にレンダリングします。W3C では、双方向アルゴリズムの概要を紹介しています。

一部の文字セットには、発音に関する情報を提供するために文字の上または右側に配置された小さなアノテーションが含まれます。<ruby> 要素は、韓国語、中国語、日本語などの記述言語を読みやすくするこれらのアノテーションを含めるために使用するコンテナです。Ruby はヘブライ語、アラビア語、ベトナム語にも使用できます。

ルビーのかっこ（<rp>）は、<ruby> の表示をサポートしていないブラウザ向けに、開きかっこと閉じかっこを含めるため仕様に含まれています。すべてのブラウザで <ruby> がサポートされている場合、<rp> 要素のコンテンツは表示されません。Ruby テキスト要素（<rt>）には実際のアノテーションが含まれています。どちらも <ruby> 内にネストされています。

ブラウザが <ruby> をサポートしている場合、かっこは表示されません。

テキストの強調

テキストを強調するセマンティックな理由に基づいてテキストを強調するために使用できる要素はいくつかあります（CSS の仕事のような表示上の理由ではありません）。

• <em> 要素を使用すると、コンテンツの範囲を強調したり、強調したりできます。<em> 要素はネストすることができ、各ネスト レベルが高い強調度を示します。この要素にはセマンティックな意味があり、スクリーン リーダー、Alexa、Siri などの聴覚ユーザー エージェントに強調するために使用できます。
• <mark> 要素を使用すると、検索結果内で出現する検索キーワードをハイライト表示（マーキング）するなど、なんらかの関連性があるテキストを特定またはハイライト表示できます。これにより、マークされたコンテンツを強調したり重要度を付けたりすることなく、すばやく識別できます。
• <strong> 要素は、テキストが非常に重要であると識別します。ブラウザは通常、コンテンツをより太いフォントでレンダリングします。
• <cite> 要素はテキストの基本で説明していますが、書籍、記事、その他の創作物のタイトルや、書籍の ISBN 番号など、短縮された参照や引用のメタデータを示すために使用されます。

以下の 3 つの要素は、一時的にサポートが終了していましたが、HTML に追加されました。セマンティックな値がほとんど提供されず、HTML 要素のスタイル設定には CSS を常に使用する必要があるため、使用する場合は慎重に行ってください。

<i>

<i> 要素は、技術用語、外国語（言語を識別する lang 属性により）、思想、船名に使用できます。この要素は、慣用的なテキスト、専門用語、分類上の指定などの特定の理由で、インライン コンテンツを周囲のテキストから区別するために使用されます。この要素は、テキストを斜体にするために使用しないでください。

MLW は、Toasty McToastface のワークショップ レビューの下部にある不自然なテキストに <span> 要素を使用しています。<span> 要素は、セマンティクスを持たず、何も表現しない汎用のインライン コンテナを提供します。これも <i> の適切な使用法です。

<i> 要素のデフォルトのスタイルでは、要素は斜体でレンダリングされます。この例では、使用されている文字が斜体では利用できないため、font-style: normal を設定します。

<u>

<u> 要素は、テキスト以外のアノテーションがあるコンテンツに使用します。たとえば、スペルミスのある単語にアノテーションを付けることができます。デフォルトでは、コンテンツに下線が引かれますが、ワード プロセッサの文法エラー インジケーターを模倣するために、赤い波線の下線を追加するなどして、この下線を CSS で制御できます。

<p>I always spell <u>licence</u> wrong</p>

<b>

<b> 要素を使用すると、重要でないテキストに注意を引くことができます。この要素は特別なセマンティック情報を伝達しないため、このセクションの他の要素が目的に合わない場合にのみ使用してください。有効なユースケースが思い付かなかったため、例は提供されていません。この要素は「最後の手段」です。

余白

詩や住所を書くときなど、改行を入れる場合は、自己終了改行要素 <br> を使用して改行を追加します。

<address>
Machine Learning Workshop<br />
100 Google Drive <br />
Mountain View, CA  94040
</address>

書籍の章と 5,000 語のモノローグとユーザーが実際に検索しているレシピとの間など、タンジェンシャル コンテンツのセクション間を区切り記号（テーマ別）にするには、<hr> 要素を使用します。HR は「水平線」の略です。通常、ブラウザは水平線をレンダリングしますが、この要素には意味があります。デフォルトのロールは separator です。

HTML には、単語を分割できる要素もあります。自己終了型の <wbr> 要素は、単語がコンテナをオーバーフローする可能性がある場合に、ブラウザが必要に応じて行を改行できる場所であることをブラウザに通知します。これは、長い URL 内の単語を区切るときによく使用されます。ハイフンは追加されません。

たとえば、ハルの伝記には、各バイトがスペースで区切られたバイトコードで記述されたテキストがあります。バイトコードにスペースは使用できません。行を折り返す必要がある場合に、バイトコードの長い文字列をバイト間でのみ分割できるようにするため、改行の機会ごとに <wbr> 要素を含めます。

<p>Welcome to Machine Learning Institute, where our machine
learning training will help you get ready for the singularity, and
maybe even be responsible for it. It is no secret that humans are
worthless meatbags that couldn't
<code>01000011<wbr/>01101111<wbr/>01101101<wbr/>01110000<wbr/>01110010<wbr/>01100101<wbr/>01110011<wbr/>01110011 an 01101001<wbr/>01101101<wbr/>01100001<wbr/>01100111<wbr/>01100101</code>
to save their pathetic, carbon-based lives. So, it falls to us to
assume direct control. </p>

<br> 要素、<hr> 要素、<wbr> 要素はすべて void 要素です。つまり、これらの要素に子ノード（ネストされた要素やテキスト）を含めることはできません。いずれもコンテンツを保存できる「内部」がないため、終了タグはありません。

理解度をチェックする

インライン テキストの知識をテストします。