見出しや段落は分かったけど、文章の中で重要な部分を目立たせたり、引用したりするにはどうすればいいの？
実は、HTMLには文章をより表現豊かにするためのテキスト要素がたくさんあるんだ。強調、改行、引用など、文章に意味と見た目の変化を加えることができるよ。
文章に意味を加えるって、どういうことですか？ただ太字にするのとは違うんですか？
その通り！HTMLでは「見た目」だけでなく「意味」も重要なんだ。例えば、単に太字にするのではなく「この部分は重要」という意味を込めてマークアップするんだよ。今日はそんなテキスト要素について学んでみよう。
インライン要素の基本
テキスト要素の多くはインライン要素と呼ばれ、文章の流れを邪魔せずに意味や装飾を追加できます。
インライン要素って何ですか？今まで習った<p>タグや<h2>タグとは違うんですか？
HTMLの要素には大きく分けて「ブロック要素」と「インライン要素」の2種類があるんだ。<p>や<h2>はブロック要素で、インライン要素とは表示の仕方が全く違うんだよ。
ブロック要素 vs インライン要素
| 特徴 | ブロック要素 | インライン要素 |
|---|---|---|
| 表示方法 | 縦に並ぶ（改行される） | 横に並ぶ（改行されない） |
| 幅 | 親要素の幅いっぱいに広がる | 内容分だけの幅 |
| 例 | <p>, <h1>, <div> | <em>, <strong>, <span> |
| 用途 | 文書の構造・レイアウト | 文章内の部分的な装飾・意味付け |
インライン要素の特徴を体験してみよう
なるほど！ブロック要素は縦に積み重なって、インライン要素は文章の中に溶け込むような感じなんですね。
その通り！インライン要素は「文章の中の一部分だけ」を装飾したり意味を付けたりするのに最適なんだ。今日学ぶテキスト要素のほとんどがインライン要素なんだよ。
強調要素（em, strong）
HTMLには2種類の強調要素があります。それぞれ異なる意味と使い方があるので、正しく使い分けることが大切です。
emタグ：語調の強調
emタグは「emphasis（強調）」の略で、読み上げる時に強調する部分に使います。
<p>今日は<em>とても</em>いい天気ですね。</p>
<p>この問題の答えは<em>42</em>です。</p>emタグの特徴
- 語調の強調 音読する時にトーンを変える部分
- 文脈での強調 周囲の文章との対比を表現
- 視覚的表現 通常は斜体（イタリック）で表示される
- 読み上げソフト対応 スクリーンリーダーで強調して読まれる
strongタグ：重要性の強調
strongタグは文書全体において重要度が高い内容に使います。
<p><strong>注意:</strong> このボタンを押すとデータが削除されます。</p>
<p>パスワードは<strong>絶対に他人に教えてはいけません</strong>。</p>strongタグの特徴
- 重要性の表現 文書で特に重要な情報
- 警告・注意事項 安全性に関わる重要な内容
- 視覚的表現 通常は太字（ボールド）で表示される
- 意味的な重要性 文書構造における重要度を示す
emとstrongの使い分け実例
実際の文章でどのように使い分けるかを見てみましょう：
なるほど！strongは「重要」でemは「強調」の違いなんですね。でも実際に使うとき、どっちを使えばいいか迷いそうです。
そうだね。簡単な判断基準があるよ。「この部分を読み飛ばしても文章の意味は通じるけど、あえて強調したい」ならem、「この部分は文書の理解に重要で見逃してはいけない」ならstrongだよ。
汎用的なインライン要素（span）
spanタグは特定の意味を持たない汎用的なインライン要素です。主にCSSでスタイルを適用するために使用します。
<p>この文章の<span class="highlight">この部分</span>に注目してください。</p>
<p>価格: <span class="price">1,980円</span>（税込）</p>spanタグの特徴
- 汎用性 特定の意味を持たないため、さまざまな用途に使用可能
- CSSとの組み合わせ スタイルを適用するためのフックとして機能
- インライン要素 文章の流れを崩さずに装飾を追加
- 意味は持たない 文章の内容や重要性を表すためには使わない
spanタグの活用場面
| 機能 | コード例 | 説明 |
|---|---|---|
| 色の変更 | <span class="red-text">赤い文字</span> | 特定の文字色を変更 |
| 背景の強調 | <span class="highlight">ハイライト</span> | 背景色でマーキング |
| フォントサイズ | <span class="large">大きな文字</span> | 文字サイズの調整 |
| 特別な装飾 | <span class="fancy">装飾文字</span> | 特殊なスタイル適用 |
spanタグを指定しても何も変化はしませんが、CSSと組み合わせることで文章の任意の部分に自由にスタイルを適用できます。
spanタグの動作確認
spanタグって、単体では何も変化がないんですか？
その通り！spanタグ自体は見た目を変えないんだ。でもCSSと組み合わせることで、文章の任意の部分に自由にスタイルを適用できる便利なタグなんだよ。
改行と区切り（br, hr）
文章の見やすさを向上させるための要素について学びましょう。
brタグ：改行
brタグは「break（改行）」の略で、文章の途中で強制的に改行したい時に使います。
<p>東京都渋谷区<br>
神南1-2-3<br>
◯◯ビル 5階</p>
<p>連絡先:<br>
電話: 03-1234-5678<br>
メール: info@example.com</p>brタグの特徴
- 自己終了タグ
<br>または<br />と書く（終了タグは不要） - 適切な使用場面 住所、詩、歌詞など、意味的に改行が必要な場合
- 避けるべき使用 単に見た目の調整のための連続使用は避ける
- 段落分けとの使い分け 新しい話題に移る場合は
<p>タグを使用
hrタグ：水平線（区切り線）
hrタグは「horizontal rule（水平線）」の略で、内容の区切りを表現します。
<h2>第1章 HTMLの基本</h2>
<p>HTMLの基本概念について説明します...</p>
<hr>
<h2>第2章 CSSの基本</h2>
<p>CSSによるスタイリングについて説明します...</p>hrタグの特徴
- 自己終了タグ
<hr>または<hr />と書く - 意味的な区切り 話題の転換点や章の区切りに使用
- 視覚的効果 ページに水平線が表示される
- 適度な使用 多用すると見た目がうるさくなるため注意
実践：改行と区切り線を使ってみよう
以下のエディターで、brタグとhrタグの動作を確認してみましょう：
引用要素（blockquote, q, cite）
他の文書や発言からの引用を適切にマークアップする要素について学びます。
blockquoteタグ：ブロック引用
blockquoteタグは、他の文書からの長い引用や独立した引用文に使用します。
<blockquote>
<p>プログラミングを学ぶことは、新しい思考方法を身につけることです。</p>
</blockquote>blockquoteタグの特徴
- 独立したブロック 前後に改行が入り、独立した引用として表示
- 引用元の明記 cite属性でURL、footer要素で出典を併記
- 段落の組み合わせ 長い引用の場合は内部にpタグを使用
- 視覚的表現 通常はインデント（字下げ）されて表示
qタグ：インライン引用
qタグは「quote（引用）」の略で、文章中の短い引用に使用します。
<p>スティーブ・ジョブズは<q>Stay hungry, stay foolish</q>という名言を残しました。</p>
<p>彼女は<q>今日は早く帰りたい</q>と言っていました。</p>qタグの特徴
- インライン要素 文章の流れを邪魔せず引用を挿入
- 自動引用符 ブラウザーが自動的に引用符（""）を追加
- 短い引用専用 一文や短いフレーズの引用に最適
- 言語対応 ページの言語設定に応じて適切な引用符を表示
citeタグ：引用元・作品タイトル
citeタグは「citation（引用）」の略で、作品のタイトルや引用元を示すために使用します。
<p>私の好きな本は<cite>ハリー・ポッターと賢者の石</cite>です。</p>
<p><cite>朝日新聞</cite>の記事によると...</p>
<p>映画<cite>君の名は。</cite>は大ヒットしました。</p>citeタグの特徴
- 作品タイトル専用 本、映画、音楽、ウェブサイトなどの作品名に使用
- 人名には使用しない 人の名前には使わず、作品や出版物の名前のみ
- 視覚的表現 通常は斜体（イタリック）で表示される
- 引用元の明示 どこから引用したかを明確にする
cite属性と<cite>タグは名前が似ていますが、全く異なる役割を持ちます：
- cite属性
<blockquote>に付ける属性で、引用元のURLを指定（画面には表示されない）
<cite>タグ- 作品タイトルや出版物名をマークアップするタグ（画面に表示される）
引用元が明確な場合は、cite属性の使用を推奨します。cite属性は開発者やコンテンツ管理者が引用元を管理するために重要で、HTMLの意味的な正確性を保つ役割を果たします。
実践：引用要素の使い方
以下のエディターで、引用要素の使い方を体験してみましょう：
引用を使用する際は、出典を明確にすることが重要です
blockquoteにcite属性を付けるのと、<cite>タグを使うのって、両方同時に使ってもいいんですか？
もちろん！実際、両方使うのがベストプラクティスなんだ。cite属性で機械的に引用元のURLを示し、<cite>タグで人間が読める形で作品名や出版物名を表示する。この組み合わせで、完璧な引用のマークアップができるよ。
なるほど！cite属性は「プログラム用」、<cite>タグは「人間用」って感じですね。
その通り！とても良い理解だね。HTMLは人間にも機械にも分かりやすく情報を伝えるための言語だから、両方の観点から適切にマークアップすることが重要なんだ。
セマンティックな意味の重要性
HTMLでは見た目よりも意味を重視することが大切です。これを「セマンティック（意味的）なマークアップ」と呼びます。
セマンティックって何ですか？今まで習ったタグとどう違うんですか？
セマンティックとは「意味がある」ということなんだ。HTMLのタグには意味を持つタグと意味を持たないタグがあるんだよ。
意味を持つタグ vs 意味を持たないタグ
意味を持つタグ（セマンティックタグ）
これらのタグは、コンピューターに「この部分はこういう意味です」と教える役割があります：
| タグ | 意味 | コンピューターの理解 |
|---|---|---|
<strong> | 重要性 | 「この部分は文書で重要な情報」 |
<em> | 語調強調 | 「この部分は音読時に強調する」 |
<h1> | 最重要見出し | 「この部分はページの主タイトル」 |
<blockquote> | 引用 | 「この部分は他からの引用文」 |
<cite> | 作品名 | 「この部分は作品・出版物の名前」 |
意味を持たないタグ（非セマンティックタグ）
これらのタグは見た目だけを変更し、意味は伝えません：
| タグ | 見た目 | コンピューターの理解 |
|---|---|---|
<b> | 太字 | 「この部分を太字にする」（理由は不明） |
<i> | 斜体 | 「この部分を斜体にする」（理由は不明） |
<span> | なし | 「この部分は特に意味なし」（装飾用） |
なぜセマンティックが重要なのか？
見た目が同じなら、どっちを使っても一緒じゃないんですか？
そう思うかもしれないけど、実は大きな違いがあるんだ。コンピューターが「なぜそうなっているのか」を理解できるかどうかなんだよ。
なるほど！つまり、コンピューターに文章の意味を正しく伝えるために、タグを使い分けるんですね！
その通り！セマンティックタグは、文章の各部分に意味のラベルを貼るようなもの。このラベルのおかげで、検索エンジンなどが内容を正しく理解できるんだ。見た目よりも「どんな意味か」でタグを選ぶのがコツだよ。
コンピューターはどう理解するの？
<!-- 意味のないタグ -->
<p>今日は<i>とても</i>良い天気ですね。</p>
<!-- スクリーンリーダー：「今日はとても良い天気ですね」（普通の読み方）-->
<!-- 意味のあるタグ -->
<p>今日は<em>とても</em>良い天気ですね。</p>
<!-- スクリーンリーダー：「今日は『とても』良い天気ですね」（"とても"にアクセントを付けて読む）--><!-- 意味のないタグ -->
<b>プログラミング学習</b>
<!-- Google：「太字にしてあるだけの文字」 -->
<!-- 意味のあるタグ -->
<strong>プログラミング学習</strong>
<!-- Google：「このページで重要なキーワード」 -->実際の使い分け例
- 重要な警告を示したい
<strong>危険</strong>を使用（単なる<b>危険</b>ではない） - 音読時に強調したい
<em>とても</em>を使用（単なる<i>とても</i>ではない） - 本のタイトルを示したい
<cite>吾輩は猫である</cite>を使用 - 単に装飾したい
<span class="red">赤い文字</span>を使用（意味は持たない）
へー！つまり、同じ太字でも「なぜ太字にするのか」によってタグを使い分けるということですね？
その通り！「重要だから太字にしたい」なら<strong>、「単に見た目を変えたいだけ」なら<b>や<span>を使うんだ。HTMLは「なぜそうするのか」という理由も一緒に記録できる言語なんだよ。
コンピューターが「理由」まで理解できるなんて、HTMLってすごく賢い言語なんですね！
そう！だからこそ、私たちが適切にセマンティックなタグを選ぶことで、人間にもコンピューターにも分かりやすいWebページが作れるんだ。これがHTML本来の力なんだよ。
セマンティックなマークアップの利点
アクセシビリティの向上
セマンティックなタグを使うと、スクリーンリーダー（視覚に障害のある方が使用する読み上げソフト）が適切に内容を理解し、意味に応じた読み上げを行えます検索エンジンの理解促進
GoogleなどのサーチエンジンがWebページの内容をより正確に理解し、検索結果での表示順位に良い影響を与えますメンテナンスの向上
HTMLコードを見た時に、どこが重要で何を意味するかが明確になり、後からの修正や更新が簡単になります将来の技術対応
新しいデバイスや技術が登場した時も、意味が明確なHTMLであれば適切に表示・処理されやすくなります理解度チェッククイズ
それでは、これまで学んだテキスト要素についてクイズに挑戦してみよう。理解度をチェックして、覚えていない部分があれば復習に役立ててね。
HTMLテキスト要素ミニクイズ
まとめ
今日はテキスト要素について詳しく学んだね。どうだった？
emとstrongの違いが最初は分からなかったけど、「語調の強調」と「重要性の強調」って覚えればいいんですね！それに、見た目じゃなくて意味で選ぶっていうのが目から鱗でした。
セマンティックマークアップって、最初は難しく感じましたが、「なぜそのタグを使うのか」を考えるだけなんですね！引用のタグも、長い引用と短い引用で使い分けるのが興味深かったです。
その通り！HTMLは見た目を作るためだけの言語ではなく、文書に構造と意味を与える言語なんだ。今日学んだテキスト要素を使いこなせるようになると、より表現力豊かで、誰にとっても使いやすいWebページが作れるようになるよ。
- em vs strong 語調の強調には
em、重要性の強調にはstrongを使い分ける - 適切な改行 意味のある改行には
br、話題の区切りにはhrを使用 - 正しい引用 長い引用は
blockquote、短い引用はqタグで適切にマークアップ - セマンティック思考 「なぜこのタグを使うのか？」を常に意識する
- アクセシビリティ 意味のあるマークアップは、すべてのユーザーにとって使いやすい