ITコース HTML基礎 011_テキスト

HTML は Web ページを作成する際に使用できる多数のテキストタグを提供しています。これらのタグは、テキストコンテンツをより良く整理しフォーマットするのに役立ちます。以下は、よく使用される HTML テキストタグです。

見出し

見出し要素は HTML ドキュメントのタイトルまたはサブタイトルを定義するために使用され、通常はドキュメント構造の階層を表します。見出し要素には h1 から h6 までの 6 つのレベルがあり、レベルが高いほど見出しの重要性が高くなります。

例：

1
<h1>これは h1 見出しです</h1>
2
<h2>これは h2 見出しです</h2>
3
...
4
<h6>これは h6 見出しです</h6>

効果：

[!まとめ]

• 見出し要素 は見出しにのみ使用し、太字 や 大きなフォント のためだけに使用しないでください。
• 検索エンジンは見出しを使用して Web ページの構造とコンテンツをインデックス化します。
• 見出し要素を適切に使用すると、ページがより読みやすく、アクセスしやすくなり、SEO にも有利です。
• h1 は 唯一の メイン見出し（最も重要）として使用し、その後に h2（次に重要）、h3 と続けます。

段落

段落要素はテキストの段落構造を定義し、テキストをより組織化して読みやすくします。コンテンツの前後に改行を追加し、テキストを独立したセクションにグループ化して、段落間の区別を明確にします。段落要素には主に <p> タグが含まれ、段落を表します。

例：

1
<p>これは段落です。</p>
2
<p>これは別の段落です。</p>

効果：

[!まとめ]

• HTML ドキュメントには複数の段落を含めることができます
• ブラウザは段落の前後に自動的に空行を追加します
• 終了タグを忘れないでください（忘れても、ほとんどのブラウザは正常に表示します）
• 段落要素によって追加される空行が気に入らず、行間を狭くしたい場合は、<br> タグを使用してください
• デフォルトでは、段落要素の 1 行に表示される文字数は画面幅によって決まります

ハイパーリンク

<a> 要素はハイパーリンクを定義するために使用され、ユーザーがリンクをクリックして他のページやリソースに移動できるようにします。<a> タグには通常、テキストや画像が含まれ、それがリンクのクリック可能な部分になります。<a> タグの href 属性を使用してリンクのターゲットアドレスを指定します。ハイパーリンクは HTML の基本機能であり、Web ページの他の部分、他の Web ページ、さらには他の Web サイトにリンクできます。

例：

1
<a href="https://www.zhaojian.net">zhaoJian.Net</a>

効果：

ハイパーリンク属性

• href：リンクターゲットの URL を指定します。これはリンクの最も重要な属性です。別の Web ページの URL、ファイルの URL、または他のリソースの URL を指定できます。
• target（オプション）：リンクをブラウザでどのように開くかを指定します。一般的な値には _blank（新しいタブまたはウィンドウでリンクを開く）と _self（現在のタブまたはウィンドウでリンクを開く、デフォルト）があります。
• title（オプション）：リンクに関するテキスト情報を提供し、通常はリンクにカーソルを合わせたときに表示されます。
• rel（オプション）：リンクターゲットとの関係を指定します。nofollow、noopener、noreferrer などがあります。
• class：リンクの CSS クラスを指定します。
• id：リンクの CSS ID を指定します。

アンカーリンク

長い Web ページでは、ページ内の特定の部分へのリンクを作成したい場合があります。これはアンカーリンクで実現できます。まず、<a> タグの name または id 属性を使用してターゲット位置をマークし、リンクの href 属性で # にターゲットの name または id 値を加えてリンクを作成します。

例：

1
<a href="#a1">a1 へジャンプ</a>
2
<!-- ページをスクロールするのに十分なコンテンツまたは <br> をここで省略 -->
3
<a name="a1">いくつかのコンテンツ</a>

効果：

「a1 へジャンプ」というハイパーリンクをクリックすると、ページは「a1 コンテンツ」セクションにスクロールします。

メールリンク

他の Web ページへのリンクに加えて、<a> タグはメールアドレスへのリンクも作成できます。href 属性値の前に mailto: を追加すると、クリック時にユーザーのデフォルトのメールクライアントを起動し、新しいメールを作成するリンクを作成できます。

例：

1
<a href="mailto:757118@qq.com">757118@qq.com にメールを送信</a>

効果：

このハイパーリンクをクリックすると、デフォルトのメールクライアントが起動し、757118@qq.com 宛ての新しいメールが作成されます。

[!まとめ]

• Web ページ上のリンクにマウスポインタを移動すると、矢印が小さな手に変わります。
• ハイパーリンクはテキストである必要はなく、画像や他の HTML 要素もリンクにできます。
• デフォルトでは、リンクはブラウザで次のように表示されます： 未訪問のリンクは青色で下線付きで表示されます。 訪問済みのリンクは紫色で下線付きで表示されます。 アクティブなリンクは赤色で下線付きで表示されます。

改行

改行要素 <br> はテキストに改行を挿入し、テキストを新しい行に強制的に移動させます。

例：

1
これは 1 行のテキストです。<br>これは別の行のテキストです。

効果：

[!まとめ]

• <br> タグのスラッシュ / はオプションです。 HTML 4 では、<br /> タグにはスラッシュが必要でした； HTML 5 では、スラッシュはオプションです。

太字

<b> 要素は基本的なテキストスタイルタグで、テキストを太字にしますが、意味的な強調はありません。<strong> 要素は意味的なタグで、テキストの強調を示し、通常はブラウザによって太字で表示されます。

例：

1
これは通常のテキストです
2
<b>これは太字のテキストです</b>
3
<strong>これは意味的に強調された太字テキストです</strong>

効果：

斜体

<i> 要素は斜体テキストを表しますが、意味的な強調はありません。<em> 要素は斜体テキストを表し、通常はテキストの重要性を強調したり、視覚効果を作成したりするために使用されます。

例：

1
これは通常のテキストです
2
<i>これは斜体テキストです</i>
3
<em>これは意味的に強調された斜体テキストです</em>

効果：

下線

下線要素 <u> は下線付きテキストを表します。

例：

1
これは<u>下線</u>付きのテキストです

効果：

[!まとめ]

• HTML 5 では、下線要素 <u> は非推奨です。これは有効な HTML 要素ですが、使用は推奨されません。

取り消し線

取り消し線要素 <del> は削除または廃止されたテキストを表示するために使用され、ブラウザは通常このテキストに横線を追加します。

例：

1
これは<del>取り消し線</del>テキストです

効果：

[!まとめ]

• HTML5 では、取り消し線要素 <del> は非推奨です。これは有効な HTML 要素ですが、使用は推奨されません。

ハイライト

<mark> 要素はテキストの一部をマークして強調表示するために使用されます。通常、<mark> 要素でマークされたテキストは黄色の背景でハイライト表示され、ドキュメント内でより目立つようになります。

例：

1
これは<mark>ハイライト</mark>されたテキストです

効果：

下付き文字と上付き文字

<sub> 要素は下付き文字を表し、<sup> 要素は上付き文字を表します。下付き文字と上付き文字要素は、数学、化学式、日付、温度などのシナリオでよく使用されます。

例：

1
H<sub>2</sub>O は水の分子式です。
2
2<sup>10</sup> は 1024 に等しい。

効果：