Articles
HTML入門
テキスト関連のタグ

テキスト関連のタグ

この記事ではテキスト関連のタグについて説明します。

セマンティックなタグとノンセマンティックなタグに分けて説明しています。

YouTube Video

プレビュー用のCSSの作成

html-tags.css 
  1body {
  2    font-family: Arial, sans-serif;
  3    line-height: 1.6;
  4    margin: 20px 20px 20px 20px;
  5    background-color: #f4f4f9;
  6    color: #333;
  7}
  8
  9header h1 {
 10    font-size: 24px;
 11    color: #333;
 12    text-align: center;
 13    margin-bottom: 20px;
 14}
 15
 16h2, h3 {
 17    color: #555;
 18}
 19
 20h2 {
 21    font-size: 20px;
 22    border-bottom: 2px solid #ccc;
 23    padding-bottom: 5px;
 24}
 25
 26h3 {
 27    font-size: 18px;
 28    margin-top: 20px;
 29}
 30
 31p, pre {
 32    margin: 10px 0;
 33    padding: 0;
 34}
 35
 36ul, ol, dl, menu {
 37    margin: 0;
 38}
 39
 40pre {
 41    background-color: #f0f0f0;
 42    border-left: 4px solid #ccc;
 43    padding: 10px;
 44    overflow-x: auto;
 45}
 46
 47p.sample, .sample {
 48    background-color: #e7f4e9;
 49    padding: 10px;
 50    border-left: 4px solid #7bbd82;
 51    color: #333;
 52}
 53
 54p.sample-error, .sample-error {
 55    background-color: #f4e7e7;
 56    padding: 10px;
 57    border-left: 4px solid #bd827b;
 58    color: #333;
 59}
 60
 61p.sample-warn, .sample-warn {
 62    background-color: #f4f1e7;
 63    padding: 10px;
 64    border-left: 4px solid #bda97b;
 65    color: #333;
 66}
 67
 68code {
 69    padding: 2px 4px;
 70    border-radius: 4px;
 71    font-family: monospace;
 72}
 73
 74span {
 75    font-weight: bold;
 76}
 77
 78main {
 79    padding-bottom: 100px;
 80}
 81
 82article {
 83    background-color: white;
 84    padding: 20px;
 85    margin-bottom: 10px;
 86    border-radius: 8px;
 87    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
 88}
 89
 90section {
 91    margin-bottom: 20px;
 92}
 93
 94table {
 95    width: 100%;
 96    border-collapse: collapse;
 97}
 98
 99th, td {
100    border: 1px solid #ddd;
101}

基本的なテキスト関連のタグ

<div>タグ

This is a division of content.
1<div>This is a division of content.</div>

  • <div>タグはHTML内で区分を作るためのブロックレベル要素です。

  • <div>タグは意味を持たないタグです。

    セマンティックHTMLを意識した場合には、意味のあるタグ（例えば、<section>, <article>）を使うことができます。 これにより、検索エンジンやスクリーンリーダーなどがページの内容を理解しやすくなります。

  • CSSやJavaScriptと組み合わせることで、ページの見た目や動作をコントロールできます。

    <div>タグは、ブロックレベル要素としてページ内の内容をグループ化するために使用されます。 主にCSSやJavaScriptと組み合わせて、ページのレイアウトやスタイルを調整したり、要素を操作したりする際に役立ちます。

<p>タグ

This is a paragraph of text.

1<p>This is a paragraph of text.</p>
  • <p>タグは、HTMLで段落を定義するために使われる要素です。<p>は段落を表しており、主にテキストをまとめて表示するときに使用されます。文章を視覚的に区切ることで、内容を読みやすくします。
  • <p>タグの中に別の<p>タグや<div>タグなどのブロックレベル要素を入れることはできません。これはHTML仕様で禁止されています。もし入れてしまうと、ブラウザによって自動的にタグが閉じられ、正しく表示されなくなります。

<a>タグ

Go to codesparklab.com 
1<a href="https://codesparklab.com" title="Code Spark Lab">Go to codesparklab.com</a>

  • <a>タグはリンクを作成するためのタグです。

    <a>タグはページ内や外部のページ、ファイルなどにリンクを作成するために使用されます。href属性でリンク先を指定します。

  • テキストリンクや画像リンクとしても使うことができ、target="_blank"を使うと新しいタブでリンクを開くことができます。

  • target属性は、リンク先をどのように表示するかを指定するために使用されます。

    • _self (デフォルト): 現在のウィンドウやタブでリンクを開きます。
    • _blank: 新しいウィンドウやタブでリンクを開きます。
    • _parent: 親フレームでリンクを開きます。
    • _top: フレームを無視し、ウィンドウ全体でリンクを開きます。

  • title属性は、リンクにツールチップを表示するために使用されます。ユーザーがリンクの上にマウスをホバーすると、指定されたタイトルが表示されます。

1<a href="#section1">Go to Section 1</a>
2
3<h2 id="section1">Section 1</h2>
4<p>This is Section 1 content.</p>
  • <a>タグは、同じページ内の特定の場所にジャンプするためにも使用されます。これを実現するためには、リンク先の要素にid属性を設定し、リンクにはhref属性でそのidを指定します。

<span>タグ

Here is some highlighted text 
1Here is some <span style="color: red;">highlighted text

  • <span>タグはインライン要素です

    <span>タグはインライン要素なので、テキストやリンク、画像などの他のインライン要素の間に使われても行が分かれません。 ページの流れの中に自然に組み込まれます。

  • 特定のスタイルを部分的に適用できます

    文書の一部にのみスタイルを適用したいときに、<span>タグを使ってCSSのクラスやIDを割り当てることで、特定の範囲にだけスタイルを適用できます。

  • <span>タグは意味を持たない要素です

    <span>タグには、特定の意味や構造上の役割がないため、純粋にスタイルやスクリプトのために使われます。 意味的な強調が必要な場合は、後ほど紹介する<strong>や<em>などのセマンティックなタグを使う方が適切です。

<br>タグ

Here is some text with a
line break. 
1Here is some text with a <br> line break.

  • <br>タグはインライン要素です。

    <br>タグはインライン要素なので、ブロック全体を占めることはなく、テキストの途中でその場で改行が行われます。 <p>タグが段落を分けるために上下に余白を追加するのに対し、<br>タグは余白を追加せずに改行を行います。

  • 単一タグのため閉じタグ（</br>）が不要です

  • 使い過ぎは避け、段落分けやレイアウト調整には<p>タグやCSSを使用するのが望ましいです。

    文章を段落ごとに整理する場合には<p>タグを使った方が適切です。 また、レイアウトの調整にはCSSを使用することが推奨されています。 例えば、CSSのwhite-spaceプロパティを使うことで、テキストに含まれる改行や空白をそのまま表示することができます。

<hr>タグ

This is some text.
This is another section of text. 
1This is some text.<hr>This is another section of text.

  • <hr>タグはブロック要素です。

    <hr>タグは水平線を挿入し、コンテンツのセクションを視覚的に区切るために使われます。 また、文脈によって意味を持たせるために「テーマ的な区切り」としても使用されます。

  • 単一タグであり、閉じタグ（</hr>）は不要です。

  • CSSを使って色、長さ、太さをカスタマイズすることができます。

セマンティックなテキスト関連のタグ

<h1>タグから<h6>タグ

Main Heading

Subheading

Sub-subheading

1<h1>Main Heading</h1>
2<h2>Subheading</h2>
3<h3>Sub-subheading</h3>

  • <h1>から<h6>までのタグは、HTMLで使用される見出しタグです。

    <h1>タグは最も重要な見出しを表し、通常はページ全体のメインタイトルに使われます。HTML内で1つだけ使うのが一般的です。

    <h2>タグは<h1>の次に重要な見出しで、ページ内のセクションや章のタイトルに使われます。

    <h3>タグは<h2>のサブタイトルや細かいセクションを表します。

    <h4>、<h5>、<h6>タグはより下位の見出しレベルを表し、詳細な項目やセクションのタイトルに使われます。

  • 見出しタグはテキストの重要度を示し、ページの論理的な構造を作ります。また検索エンジンは見出しタグを使用してページの内容を理解します。

<strong>タグ

Important text to emphasize significance. 
1<strong>Important text</strong> to emphasize significance.

  • <strong>タグは、テキストの重要性や強調を示すために使用されるHTMLタグで通常太字で表示されます。

  • <strong>タグは意味的なタグであり、主な目的は意味を持たせることです。

    テキストが文脈的に重要であることを示すことができます。 例えば、検索エンジンに対してもテキストの重要性を示すことができ、SEOにおいても役立ちます。 また、スクリーンリーダーを使用しているユーザーに対しても、テキストの重要性が伝わります。 一方、後ほど紹介する<b>タグは単にテキストを太字にするためのタグで、意味的な強調はありません。

<em>タグ

Emphasized text for italics and emphasis. 
1<em>Emphasized text</em> for italics and emphasis.

  • <em>タグは、テキストの重要性や強調を示すために使用されるHTMLタグで通常斜体で表示されます。

  • <em>タグは意味的なタグであり、主な目的は意味を持たせることです。

    <strong>タグと同様にテキストが文脈的に重要であることを示すことができます。 <strong>タグは通常太字で、<em>タグは通常斜体で表示されます。 どちらもスクリーンリーダーや検索エンジンによって意味的な強調が認識されますが、<strong>はより強い重要性を示すのに対して、<em>は感情的な強調を示します。 また後ほど紹介する<i>タグは単にテキストを斜体にするためのタグで、意味的な強調はありません。

<mark>タグ

Highlighted text for attention. 
1<mark>Highlighted text</mark> for attention.
  • <mark>タグは、特定のテキストが文脈的に重要であることを示すために使用されます。検索結果や重要なポイントを強調する際に便利です。
  • デフォルトでは<mark>タグで囲まれたテキストは黄色の背景で表示され、テキストの重要性が視覚的に強調されます。

<del>タグ

Deleted text shows removed content. 
1<del>Deleted text</del> shows removed content.

  • <del>タグは、テキストが削除または変更されたことを示すために使用されます。このタグは、テキストの変更履歴や修正の履歴を示すのに役立ちます。

  • <del>タグで囲まれたテキストは通常取り消し線で表示されます。これにより、削除された内容が視覚的に示されます。

    <del>タグで囲まれたテキストは、スクリーンリーダーによっても削除されたことが伝えられます。 これにより、視覚的に見えない内容も把握できるようになります。

<ins>タグ

Inserted text shows added content. 
1<ins>Inserted text</ins> shows added content.

  • <ins>タグは、文書に新しく追加されたテキストや変更された部分を示すために使用されます。このタグは、テキストの追加履歴や修正履歴を示すのに役立ちます。

  • ブラウザでは、<ins>タグで囲まれたテキストは通常下線で表示されます。これにより、追加された内容が視覚的に示されます。

    <ins>タグで囲まれたテキストは、スクリーンリーダーによっても追加されたことが伝えられます。 これにより、視覚的に見えない内容も把握できるようになります。

<abbr>タグ

WHO 
1<abbr title="World Health Organization">WHO</abbr>
  • <abbr>タグは、略語や頭字語を示すためのインライン要素です。 このタグを使うと、略語の完全な意味を提供し、SEOやアクセシビリティの向上にも寄与します。 特に、略語の意味を知らない読者やスクリーンリーダーを使っているユーザーに対して、略語の内容を理解しやすくすることができます。

テキスト装飾関連のタグ

<b>タグ

Bold text without semantic emphasis. 
1<b>Bold text</b> without semantic emphasis.
  • <b>タグは、テキストを太字にするためのインライン要素です。 これから紹介する他のタグと同様、視覚的に強調する目的で使用されますが、意味的な強調を表現するためのタグではありません。

<i>タグ

Italic text for style. 
1<i>Italic text</i> for style.
  • <i>タグは、テキストを斜体にするためのインライン要素です。

<u>タグ

Underlined text for decoration. 
1<u>Underlined text</u> for decoration.
  • <u>タグは、テキストに下線を引くためのインライン要素です。

<small>タグ

This is small text. 
1<small>This is small text.</small>
  • <small>タグは、テキストを小さく表示するためのインライン要素です。 通常は、補足的な情報や注釈など、主要な内容に対して副次的な情報を表現する際に使われます。

<s>タグ

Strikethrough text 
1<s>Strikethrough text</s>
  • <s>タグは、テキストに取り消し線を引くためのインライン要素です。

<sub>タグ

H2O 
1H<sub>2</sub>O
  • <sub>タグは、下付き文字を表示するためのインライン要素です。

<sup>タグ

E = mc2 
1E = mc<sup>2</sup>
  • <sup>タグは、上付き文字を表示するためのインライン要素です。

YouTubeチャンネルでは、Visual Studio Codeを用いて上記の記事を見ながら確認できます。 ぜひYouTubeチャンネルもご覧ください。

YouTube Video

HTMLのブロックレベル要素とインライン要素コード表示、注釈、リスト表示関連のタグ