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

ほとんどの 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> の開始と終了の間の短縮表記を導入します。 タグ読者によく知られている「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 番号などです

一時的にサポートが終了して 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> 要素により、単語がコンテナにオーバーフローする可能性がある場合にブラウザが 改行される場合があります。これは通常、フォルダ内の単語間を区切るために使用されます。 おすすめしますハイフンは追加しません。

たとえば、Hal biography には、各バイトがスペースで区切られたバイトコードで記述されたテキストがあります。バイトコード スペースは使用できません。行を折り返す必要がある場合に、バイトコードの長い文字列をバイト間でのみ中断できるようにするには、 挿入点ごとに <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 要素です。つまり、子ノードを含めることはできず、ネストもできません。 要素もテキストもありません。いずれも「内なる部分」はないため終了タグはありません。

理解度をチェックする

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

コードサンプルを表示するには、どの要素を使用すればよいですか。

<code>
正解です。
<data>
もう一度お試しください。
<kbd>
もう一度お試しください。

<ruby> 要素の用途

装飾的要素を含める。
もう一度お試しください。
一部の言語で使用されるアノテーションに使用します。
正解です。
要素のコンテンツをハイライト表示します。
もう一度お試しください。