テキストタグ

歴史的に、ウェブページの主な機能はテキスト表示でした。そのため、HTML はテキスト処理のための多数のタグを提供しています。

`<div>`

<div> は汎用タグで、ブロック（division）を表します。意味的な意味を持たず、ウェブページでブロックレベルの要素コンテナが必要で、他に適切なタグがない場合に使用できます。

最も一般的な用途は、CSS のフックを提供し、さまざまなスタイルを指定することです。そのため、初期の頃には、以下のように <div> が入れ子になっている構造がよく見られました。

<div class="main">
  <div class="article">
    <div class="title">
      <h1>記事タイトル</h1>
    </div>
  </div>
</div>

上記のコードは、意味的な情報を持たないため、読みにくいです。その後、HTML 5 ではセマンティックタグが提案され、上記のコードが改善されました。

<main>
  <article>
    <header>
      <h1>記事タイトル</h1>
    </header>
  </article>
</main>

<div> は意味を持たないブロックレベル要素です。以下の例では、 <div> を使用して、画像とテキストを組み合わせて警告ブロックを作成しています。

<div>
  <img src="warning.jpg" alt="警告">
  <p>注意</p>
</div>

スタイル上、複数のブロックレベル要素を組み合わせる必要がある場合は、 <div> を使用できます。ただし、これは最後の手段であるべきで、意味を持つブロックレベルタグ（ <article>、 <section>、 <aside>、 <nav> など）を常に優先して使用し、他の意味的な要素が適切でない場合にのみ <div> を使用してください。

`<p>`

<p> タグはブロックレベル要素で、記事の段落（paragraph）を表します。テキストだけでなく、画像やフォーム項目など、段落として表示したいコンテンツはすべて <p> 要素内に配置できます。

<p>hello world</p>

上記のコードは、単純な段落の例です。

`<span>`

<span> は汎用的なインラインタグ（改行を生成しない）で、意味的な意味を持ちません。通常は CSS スタイルのフックとして使用されます。特定のインラインコンテンツにスタイルを指定する必要がある場合は、それらを <span> 内に配置します。

<p>これは<span>重要</span>な文です。</p>

上記のコードでは、文の中で強調したい部分を <span> で囲んでいます。

`<br>`、`<wbr>`

<br> は、ウェブページに改行を生成します。このタグは単独で使用され、閉じタグはありません。

hello<br>world

ブラウザは上記のコードをレンダリングする際、2行に分割し、 hello と world がそれぞれ1行を占めます。

<br> は、詩や住所の改行に非常に役立ちます。

<p>
  床前明月光、<br>
  疑是地上霜。<br>
  挙頭望明月、<br>
  低頭思故郷。
</p>

上記のコードで <br> を使用しないと、1行で表示されてしまいます。

ブロックレベル要素の間隔を <br> で生成するのではなく、CSS で指定する必要があることに注意してください。

<p>第1段落</p>
<br>
<br>
<p>第2段落</p>

上記のコードでは、段落間に2つの改行を挿入したいと考えていますが、この場合は <br> を使用するのではなく、CSS を使用するべきです。

<wbr> タグは <br> と非常によく似ており、オプションの改行を表します。行の幅が十分であれば改行せず、幅が足りない場合は <wbr> の位置で改行します。これは、ブラウザが非常に長い単語の途中で不適切に改行したり、改行しなかったりすることを防ぐためのもので、事前に改行可能な位置を示します。主に、単語が非常に長いヨーロッパの一部の言語や URL の改行に使用されます。

<p>
Fernstraßen<wbr>bau<wbr>privat<wbr>finanzierungs<wbr>gesetz
</p>

上記のコードは非常に長いドイツ語の単語で、不適切な改行を防ぐために、 <wbr> を使用してブラウザに改行可能な場所を事前に伝えています。

`<hr>`

<hr> は、記事内で2つの異なるトピックを区切るために使用されます。ブラウザはこれを水平線としてレンダリングします。このタグは単独で使用され、閉じタグはありません。

<p>最初のトピック</p>
<hr>
<p>2番目のトピック</p>

上記のコードのレンダリング結果は、2つの段落の間に水平線が表示されます。

このタグは歴史的な理由から残されているもので、使用はできるだけ避けることをお勧めします。トピック間の区切りには <section> を使用し、水平線が必要な場合は CSS を使用してください。

`<pre>`

<pre> はブロックレベル要素で、元のフォーマットを保持する（preformatted）ことを意味します。つまり、ブラウザはこのタグ内の元の改行とスペースを保持します。ブラウザは、デフォルトでタグの内容を等幅フォントで表示します。

<pre>hello

   world</pre>

上記のコードでは、改行と連続するスペースは <pre> タグのおかげで保持され、ブラウザはそのまま出力します。

HTML タグは <pre> 内でも有効であることに注意してください。 <pre> はスペースと改行のみを保持し、HTML タグは保持しません。

<pre><strong>hello world</strong></pre>

上記のコードでは、 <pre> タグの内容は太字で表示されます。

`<strong>`、`<b>`

<strong> はインライン要素で、含まれるコンテンツが非常に重要であり、注意を引く必要があることを示します。ブラウザはコンテンツを太字で表示します。

<p>会議の時間は<strong>午後2時</strong>です。</p>

<b> は <strong> と非常によく似ており、含まれるコンテンツが注意を引く必要があることを示し、ブラウザは太字で表示します。これは Boldface の略です。

<p>会議の時間は<b>午後2時</b>です。</p>

<strong> との違いは、歴史的な理由により、意味的な意味を持たず、純粋にスタイルに関するタグであることです。これは、意味とスタイルの分離の原則に違反しているため、使用はお勧めしません。 <strong> タグを優先して使用してください。

`<em>`、`<i>`

<em> はインラインタグで、強調（emphasize）を表します。ブラウザは、含まれるコンテンツを斜体で表示します。

<p>私たちはこの件について<em>既に</em>議論しました。</p>

ブラウザは通常 <em> を斜体で表示しますが、常にそうであるとは限りません。したがって、このタグのスタイルを CSS で指定することをお勧めします。

<i> タグは <em> に似ており、他の部分とは異なることを示し、ブラウザは斜体で表示します。これは Italic の略です。

<p>私は心の中で、これは<em>本当</em>なのか？と思いました。</p>

<i> タグは意味が弱く、純粋にスタイルに関するタグに近いため、代わりに <em> タグを使用することをお勧めします。

`<sub>`、`<sup>`、`<var>`

<sub> タグは内容を下付き文字に、 <sup> タグは内容を上付き文字に変換します。これらはインライン要素で、主に数式、分子式などに使用されます。

<p>水分子は H<sub>2</sub>O です。</p>

<var> タグは、コードまたは数式の変数を表します。

<p>ピタゴラスの定理は、
  <var>a</var><sup>2</sup> + <var>b</var><sup>2</sup> = <var>c</var><sup>2</sup>
です。</p>

`<u>`、`<s>`

<u> タグはインライン要素で、コンテンツに何らかの注釈を提供し、ユーザーに問題がある可能性があることを知らせます。基本的に、スペルミスを表すためだけに使用されます。ブラウザは、デフォルトでコンテンツに下線を付けてレンダリングします。

<p>
よく間違えやすい四字熟語は、 <em>安分守己</em> を <u>安份守己</u> と書くことです。
</p>

上記のコードでは、 <u> はユーザーにスペルミスがあることを知らせ、「安份守己」の下に下線が引かれます。

注意： <u> は下線を生成しますが、リンクもデフォルトで下線が付いているため、 <u> タグの使用には非常に注意が必要です。ユーザーがクリック可能だと誤解しないように、どうしても必要な場合は、CSS を使用して <u> のデフォルトスタイルを変更することをお勧めします。

<s> タグはインライン要素で、コンテンツに取り消し線を付けます。

<p>今日の特価商品：<s>サーモン</s>（売り切れ）</p>

上記のコードでは、「サーモン」に取り消し線が引かれます。

`<blockquote>`、`<cite>`、`<q>`

<blockquote> はブロックレベルのタグで、他人の言葉を引用することを表します。ブラウザは、スタイル上、通常のテキストとは異なる表示を行います。

<blockquote cite="https://quote.example.com">
  <p>天才とは、1％のひらめきと99％の努力である。</p>
</blockquote>

<blockquote> タグには cite 属性があり、その値は引用元のウェブサイトを表す URL です。ウェブページ上には表示されません。

<cite> タグは、引用の出所または著者を表します。ブラウザは、デフォルトでこの部分を斜体で表示します。

<blockquote cite="https://quote.example.com">
  <p>天才とは、1％のひらめきと99％の努力である。</p>
</blockquote>
<cite>-- エジソン</cite>

<cite> は必ずしも <blockquote> と一緒に使用する必要はありません。記事中で情報源について言及する場合、単独で使用することもできます。

<p>詳細は<cite>ウィキペディア</cite>をご覧ください。</p>

<q> はインラインタグで、引用を表します。 <blockquote> との違いは、改行を生成しないことです。

<p>
  シェイクスピアの「ハムレット」には有名なセリフがあります：
  <q cite="https://quote.example.com">生きるべきか、死ぬべきか、それが問題だ。</q>
</p>

上記の例では、引用部分は前の説明部分と同じ行にあります。

また、 <blockquote> と同様に、 <q> にも引用元のウェブサイトを表す cite 属性があります。

注意：ブラウザはデフォルトで <q> の内容を斜体で表示し、自動的に半角の二重引用符を追加します。そのため、日本語のコンテンツを引用する際には注意が必要です。

`<code>`

<code> タグはインライン要素で、タグの内容がコンピュータコードであることを示します。ブラウザは、デフォルトで等幅フォントで表示します。

<code>alert()</code>の役割は、ウェブページにアラートボックスを表示させることです。

複数行のコードを表す場合は、 <code> タグを <pre> 内に配置する必要があります。 <code> 自体は1行のコードのみを表します。

<pre>
<code>
  let a = 1;
  console.log(a);
</code>
</pre>

`<kbd>`、`<samp>`

<kbd> タグはインライン要素で、元々はユーザーがキーボードから入力した内容を表していましたが、現在では音声入力など、さまざまな入力に拡張されています。ブラウザは、デフォルトでタグの内容を等幅フォントで表示します。

<p>Windows では <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>Del</kbd> を押して再起動できます。</p>

<kbd> はネストすることができ、スタイル指定に便利です。

<p>Windows では
<kbd> <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>Del</kbd> </kbd>
を押して再起動できます。</p>

<samp> タグはインライン要素で、コンピュータプログラムの出力内容の例を表します。ブラウザはデフォルトで等幅フォントで表示します。

<p>定義されていない変数を使用すると、ブラウザはエラーを報告します：
<samp>Uncaught ReferenceError: foo is not defined</samp>。</p>

`<mark>`

<mark> はインラインタグで、強調表示されたコンテンツを表します。Chrome ブラウザは、デフォルトでこのタグの内容を明るい黄色の背景で表示します。

<p>議論の結果、<mark>イベントは来週水曜日に開催される</mark>ことが決定しました。</p>

<mark> は、引用されたコンテンツ（ <q> または <blockquote> ）の中で、注目すべき文をマークするのに適しています。

<blockquote>
床前明月光、疑是地上霜。<mark>挙頭望明月、低頭思故郷。</mark>
</blockquote>

興味のあるテキストをマークするだけでなく、 <mark> は検索結果で一致するキーワードをマークするためにも使用できます。

ブラウザの処理方法が保証されないため、強調表示の効果だけのためにこのタグを使用しないように注意してください。強調表示を確実に行うには、CSS スタイルを使用する必要があります。

`<small>`

<small> はインラインタグで、ブラウザは含まれるコンテンツを1サイズ小さいフォントサイズで表示します。CSS スタイルを使用する必要はありません。通常、記事に付随する著作権情報や法的情報に使用されます。

<p>記事本文</p>
<p><small>上記の内容は、クリエイティブ・コモンズ・ライセンスを使用しています。</small></p>

`<time>`、`<data>`

<time> はインラインタグで、時間に関するコンテンツに機械可読な形式を提供します。

<p>運動会は<time datetime="2015-06-10">来週水曜日</time>に開催予定です。</p>

上記のコードでは、 <time> は来週水曜日の具体的な日付を表します。これは、検索エンジンによるクロールや、その後の処理に役立ちます。

<time> の datetime 属性は、機械可読な日付を指定するために使用され、さまざまな形式を取ることができます。

有効な年： 2011
有効な月： 2011-11
有効な日付： 2011-11-18
年のない日付： 11-18
年の第何週： 2011-W47
有効な時間： 14:54、 14:54:39、 14:54:39.929
日付と時間： 2011-11-18T14:54:39.929

<p>コンサートは<time datetime="20:00">午後8時</time>に開始します。</p>

<data> タグは <time> と似ており、機械可読なコンテンツを提供しますが、時間以外の場面で使用されます。

<p>今回のマラソン大会の優勝者は<data value="39">張三</data>です。</p>。

上記のコードでは、競技者の機械可読データが <data> タグの value 属性に配置されています。

`<address>`

<address> タグはブロックレベル要素で、個人または組織の連絡先情報を表します。

<p>著者の連絡先：</p>

<address>
  <p><a href="mailto:foo@example.com">foo@example.com</a></p>
  <p><a href="tel:+555-34762301">+555-34762301</a></p>
</address>

このタグには、いくつかの注意点があります。

（1）連絡先情報ではなく、記事内で言及された住所（例えば、引っ越し前の住所など）の場合は、 <address> タグを使用しないでください。

（2） <address> の内容には、連絡先情報以外の情報（例えば、公開日など）を含めることはできません。

（3） <address> はネストできず、内部に見出しタグ（ <h1> 〜 <h6> ）や <article>、 <aside>、 <section>、 <nav>、 <header>、 <footer> などのタグを含めることはできません。

（4）通常、 <address> は <footer> 内に配置されます。以下に例を示します。

<footer>
  <address>
    記事に関するご質問は、<a href="mailto:zhangsan@example.com">張三
    McClure</a>までご連絡ください。
  </address>
</footer>

`<abbr>`

<abbr> タグはインライン要素で、タグの内容が略語であることを示します。その title 属性には、略語の完全な形または説明を指定します。この要素にマウスオーバーすると、 title 属性の値がツールチップとして完全に表示されます。

<abbr title="HyperText Markup Language">HTML</abbr>

一部のブラウザでは、このタグにドット付きの下線が適用される場合があることに注意してください。

`<ins>`、`<del>`

<ins> タグはインライン要素で、元のドキュメントに追加（insert）されたコンテンツを表します。 <del> も同様に、削除（delete）されたコンテンツを表します。これらは通常、ドキュメントの変更履歴を表示するために使用されます。

<del><p>会議は5月8日に開催予定です。</p></del>
<ins><p>会議は5月9日に開催予定です。</p></ins>

ブラウザは、デフォルトで <del> タグの内容に取り消し線を、 <ins> タグの内容に下線を付けます。

これらのタグには、以下の属性があります。

cite：この属性の値は URL で、この URL で変更内容の説明を参照できることを示します。
datetime：変更が行われた日時を表します。

<ins cite="./why.html" datetime="2018-05">
  <p>プロジェクトは当初の予定よりも2週間早く終了しました。</p>
</ins>

`<dfn>`

<dfn> はインライン要素で、タグの内容が用語（definition）であることを示します。この段落または文には、その用語の定義が含まれています。

<p>
TCP/IP プロトコルで接続されたグローバルなコンピュータネットワークは、 <dfn>インターネット</dfn>と呼ばれます。
</p>

スクリプト操作を容易にするために、用語の定義を <dfn> タグの title 属性に書き込むことができます。

<p>
TCP/IP プロトコルで接続されたグローバルなコンピュータネットワークは、
<dfn title="グローバルなコンピュータネットワーク">インターネット</dfn>と呼ばれます。
</p>

上記のコードでは、 title 属性の1つの役割として、マウスオーバー時に用語の説明がツールチップとして表示されます。

場合によっては、用語自体が略語であることがあります。この場合、 <dfn> と <abbr> を組み合わせて使用できます。

<p>
<dfn><abbr title="acquired immune deficiency syndrome">AIDS</abbr></dfn>
の正式名称は後天性免疫不全症候群です。
</p>

`<ruby>`

<ruby> タグは、テキストの発音注釈を表します。主に東アジアの文字、例えば中国語のピンインや日本語の振り仮名などに使用されます。デフォルトでは、発音注釈をテキストの上に小さなフォントで表示します。

<ruby>
漢<rp>(</rp><rt>han</rt><rp>)</rp>
字<rp>(</rp><rt>zi</rt><rp>)</rp>
</ruby>

上記のコードのレンダリング結果は、「漢字」の上に小さなフォントでピンイン「han zi」が表示されます。

<ruby> タグはインライン要素であり、コンテナタグでもあります。発音注釈を使用する場合は、テキストと注釈の両方をこのタグ内に配置する必要があります。

<ruby> の内部には、他にも多くの関連タグがあります。

（1）<rp>

<rp> タグの用途は、発音注釈をサポートしていないブラウザに対して互換性を提供することです。発音注釈をサポートしているブラウザでは、このタグの内容は表示されません。

<rp> タグは、一般的に丸括弧を配置するために使用されます。サポートしていないブラウザに遭遇した場合は、発音注釈が括弧内に表示されます。

<ruby>
漢<rp>(</rp><rt>han</rt><rp>)</rp>
字<rp>(</rp><rt>zi</rt><rp>)</rp>
</ruby>

上記のコードは、発音注釈をサポートしていないブラウザでは、「漢(han)字(zi)」とレンダリングされます。発音注釈をサポートしているブラウザでは、丸括弧は表示されません。

（2）<rt>

<rt> タグは、発音注釈を配置するために使用されます。

（3）<rb>

<rb> タグは、テキスト単位を区切り、発音注釈と1対1で対応させるために使用されます。

<ruby>
  <rb>漢</rb><rb>字</rb>
  <rp>(</rp>
  <rt>han</rt>
  <rt>zi</rt>
  <rp>)</rp>
</ruby>

上記の例では、「漢字」の2文字は繋がっていますが、 <rb> タグを使用して各文字を区切り、 <rt> タグと1対1で対応させています。

注意：Chrome ブラウザは現在、このタグをサポートしていません。

（4）<rbc>、<rtc>

<rbc> タグは、テキストのグループを表し、通常は複数の <rb> 要素を含みます。 <rtc> タグは、発音注釈のグループを表し、 <rbc> に対応します。

<ruby style="ruby-position: under;">
  <rbc>
    <rb>漢</rb><rp>(</rp><rt>han</rt><rp>)</rp>
    <rb>字</rb><rp>(</rp><rt>zi</rt><rp>)</rp>
  </rbc>
  <rtc style="ruby-position: over;">
    <rp>(</rp><rt>Chinese</rt><rp>)</rp>
  </rtc>
</ruby>

上記の例では、「漢字」の2文字には、中国語ピンインと英語の2つの発音注釈があります。1組の発音注釈は <rbc> タグ内に配置され、もう1組の発音注釈は <rtc> に配置され、 <rbc> に対応します。また、それぞれ style 属性を使用して、中国語ピンインをテキストの下に、英語をテキストの上に表示するように指定しています。

注意：Chrome ブラウザは現在、これらのタグをサポートしていません。

`<bdo>`、`<bdi>`

ほとんどのテキストの読み方向は左から右ですが、アラビア語、ヘブライ語など、右から左に読むテキストもあります。 <bdo> タグはインライン要素で、テキストの方向がウェブページの本文の方向と一致しないことを示します。

<p>床前明月光、<bdo dir="rtl">霜上地是疑</bdo>。</p>

上記のコードでは、 <bdo> タグ内のテキストは逆方向にレンダリングされ、「床前明月光、疑是地上霜」という結果になります。

<bdo> の dir 属性は、具体的なテキストの方向を指定します。値は ltr （左から右）と rtl （右から左）の2つがあります。

<bdi> タグは、テキストの方向が不明な場合に使用されます。例えば、ウェブページの一部がユーザーが入力したコンテンツで、入力されたコンテンツのテキスト方向がわからない場合などです。このような場合は、 <bdi> タグを使用して、ブラウザにテキストの方向が不明であり、ブラウザ自身に決定を任せることを伝えます。

<p><bdi>床前明月光、疑是地上霜。</bdi></p>

テキストタグ

<div>

<p>

<span>

<br>、<wbr>

<hr>

<pre>

<strong>、<b>

<em>、<i>

<sub>、<sup>、<var>

<u>、<s>

<blockquote>、<cite>、<q>

<code>

<kbd>、<samp>

<mark>

<small>

<time>、<data>

<address>

<abbr>

<ins>、<del>

<dfn>

<ruby>

<bdo>、<bdi>