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

ほとんどの HTML 要素について説明しましたが、すべてではありません。インライン テキスト要素についてはまだ説明していません。一般的に考えられていることとは異なり、HTML はもともとドキュメントの共有を目的としており、猫の動画を共有するためのものではありませんでした。ドキュメントのテキスト セマンティクスを提供する要素は多数あります。

リンクと <a> 要素を扱うモジュールがあります。残りの要素については、ここで簡単に説明します。

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

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

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

ピタゴラスの定理の 2 乗には、<sup> 上付き文字要素が使用されています。同様に、<sub> 下付き文字要素は、純粋にタイポグラフィ上の理由で下付き文字として表示されるインライン テキストを指定します。上付き文字と下付き文字は、通常の行の文字よりも小さく、それぞれ行の少し上または下に配置される数字、図、記号、その他の注釈です。

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

<ins> は、<del> 要素の反対です。この要素は、追加されたテキスト（「挿入」されたテキスト）を示すために使用されます。オプションで cite 属性または datetime 属性を含めることができます。

定義と言語サポート

略語や頭字語を使用する場合は、最初にプレーン テキストで用語の完全なバージョンを必ず提供してください。次に、<abbr> の開始タグと終了タグの間に、用語の短縮表現を挿入します。この最初の出現時のみ、略語または頭字語が定義されている場合に <abbr> が必要です。title 属性は必須でも有用でもありません。

ただし、このシリーズの HTML や CSS など、読者に広く知られていると判断される用語は例外です。

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

定義する用語が周囲のテキストと同じ言語でない場合は、言語を識別するために lang 属性を含めるようにしてください。

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

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

ルビの丸かっこ（<rp>）は、<ruby> の表示をサポートしていないブラウザの開始丸かっこおよび終了丸かっこを含めるために、仕様に含まれていました。すべてのエバーグリーン ブラウザがサポートしている <ruby> をブラウザがサポートしている場合、<rp> 要素の内容は表示されません。ルビテキスト要素（<rt>）には、実際の注釈が含まれます。どちらも <ruby> 内にネストされています。

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

テキストを強調する

テキストを強調する意味上の理由（CSS の仕事である表現上の理由ではなく）に基づいてテキストを強調するために使用できる要素がいくつかあります。

• <em> 要素を使用して、コンテンツの範囲を強調します。<em> 要素はネストできます。ネストのレベルが高いほど、強調の度合いが強くなります。この要素には意味があり、スクリーン リーダー、Alexa、Siri などの音声ユーザー エージェントに強調表示を指示するために使用できます。
• <mark> 要素を使用して、関連性のあるテキストを特定またはハイライト表示します。たとえば、検索結果で検索キーワードの出現をハイライト表示（または「マーク」）します。これにより、強調や重要度を追加せずに、マークされたコンテンツをすばやく特定できます。
• <strong> 要素は、テキストが重要であることを示します。通常、ブラウザはコンテンツを太字でレンダリングします。
• テキストの基本で説明されている <cite> 要素は、書籍、記事、その他のクリエイティブな作品のタイトル、またはそれらの略称、参照、引用のメタデータ（書籍の ISBN 番号など）をマークするために使用されます。

一時的に非推奨とされたものの、HTML に戻された要素が 3 つあります。セマンティック値がほとんどないため、使用する場合は控えめにしてください。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 内の単語間を区切るためによく使用されます。ハイフンは追加されません。

たとえば、Hal の伝記には、バイトコードで記述されたテキストがあり、各バイトはスペースで区切られています。バイトコードにスペースはありません。行を折り返す必要がある場合に、長いバイトコード文字列をバイト間でだけ分割できるようにするには、各分割可能位置に <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> 要素はすべて空要素であり、ネストされた要素やテキストなどの子ノードを持つことはできません。これらのタグにはコンテンツを保存できる「内部」がないため、終了タグはありません。

理解度を確認する

インライン テキストに関する知識をテストします。