HTMLの基本タグを徹底解説！ヘッダータグ・強調タグ・引用タグの使い方を初心者向けに解説

一つ前の章ではHTML学習の入り口としてWebページの基本構造について学習しました。

今回は基本的なHTMLタグについて見ていきます。

Lesson1-0：HTML/CSSの開発環境を無料で整備しよう
Lesson1-1：HTML学習の入り口｜Webページの基本構造を理解しよう
Lesson1-2：基本的なHTMLタグを理解しよう◁今回はココ
Lesson1-3：Webページにリンクや画像を挿入しよう
Lesson1-4：３種類のリストを理解しよう
Lesson1-5：テーブル（表）の基礎を理解しよう
Lesson1-6：フォームを作成しよう
Lesson1-7：セクションタグとメタタグを知ろう

このレッスンではHTMLの基本的な構成要素であるタグについて学びます。

具体的には見出しを作るためのヘッダータグ、文章を整理する段落や改行タグ、強調表示に使うタグ、そして引用を表現するタグについて解説します。

初心者でも分かりやすいよう実際のコード例とともに丁寧に説明しますので、HTMLの基礎をしっかりと理解していきましょう。

<<前のページ

HTML/CSSの記事一覧

次のページ>>

ヘッダータグ

HTMLのヘッダータグ（<h1>〜<h6>）は、Webページに見出しを作成するためのタグです。

これらは重要な情報を階層的に整理するために使用され、視覚的な区別だけでなく、検索エンジン最適化（SEO）やアクセシビリティの観点からも重要な役割を果たします。

例えば、上の「ヘッダータグとセクションタグ」という行は<h2>タグを使用した大見出しであり、下の「ヘッダータグの使い方」という行は<h3>タグを使った中見出しとして表現しています。

ヘッダータグの使い方

ヘッダータグは数値が小さいほど優先度が高く、大きな見出しに適しています。

<h1>: ページ内で最も重要な見出し（通常は1ページに1つだけ使用）
<h2>: <h1>の下位に位置する見出し
<h3>〜<h6>: より詳細な見出し

以下はヘッダータグの例です。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>ヘッダータグの例</title>
</head>
<body>
    <h1>これは1番大きな見出し（h1）です</h1>
    <h2>これは大見出し（h2）です</h2>
    <h3>これは中見出し（h3）です</h3>
    <h4>これは小見出し（h4）です</h4>
    <h5>これはさらに小さい見出し（h5）です</h5>
    <h6>これは最も小さい見出し（h6）です</h6>
</body>
</html>

このコードをVSCのLive Serverを使用してブラウザ表示すると、以下のようになります。

このサイトの見出しと見え方が違うのは、このサイトはLesson２で学習するCSSを用いて装飾しているためです。

ヘッダータグによる見出しはただページの構造を見やすくするだけでなく、Googleなどの検索エンジンにサイト構成を正しく伝える役割もありますので、適切に配置しましょう。

HTMLの title タグと h1 タグの違いを初心者向けにわかりやすく解説

段落と改行タグ

HTMLでは文章を整然と整理し、読みやすくするために段落と改行タグを使用します。

それぞれ異なる用途と役割を持ち、文章を適切に構造化する上で重要です。

段落タグ（`<p>`）

<p>タグは文章を段落としてまとめるために使用します。段落は文章の単位であり、文章の内容がまとまった部分を視覚的に分ける際に便利です。

以下は<p>タグの基本的な使い方の例です。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>段落タグの例</title>
</head>
<body>
    <p>これは1つ目の段落です。HTMLでは、段落を<p>タグで表現します。</p>
    <p>これは2つ目の段落です。それぞれの<p>タグは自動的に改行されます。</p>
</body>
</html>

各段落は自動的に改行され、上下に適度な余白が追加されます。
段落内での改行には別の方法を使用します（次項参照）。

改行タグ（`<br>`）

<br>タグは段落内で強制的に改行したい場合に使用します。このタグは段落の内容を途中で分割する際に便利です。

以下は<br>タグを使った例です。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>改行タグの例</title>
</head>
<body>
    <p>これは1つの段落ですが、<br>途中で改行しています。</p>
    <p>複数行の詩を<br>このように<br>表現することができます。</p>
</body>
</html>

brタグは自己終了型タグであり、閉じタグは不要です。
過剰に使用すると読みづらいデザインになるため、適切な場所で使いましょう。

このコードをブラウザ表示すると以下のようになります。

段落タグと改行タグの使い分け

段落タグ: 大きな文章の塊を分割する際に使用。
改行タグ: 文章の途中での改行が必要な場合に使用。

強調タグ

HTMLでは文章の中で特定の部分を強調するために、強調タグ（<em> と <strong>）を使用します。

これらのタグは内容の重要性や意味を示すだけでなく、視覚的に強調されることもあります。

`<em>` タグ

<em> は「強調」を意味し、文章の一部を特に目立たせたい場合に使用します。視覚的には通常、斜体（イタリック）で表示されます。

またスクリーンリーダーでは音声の抑揚が変化し、強調されていることが伝わります。

以下は<em> タグの使用例です。実際にブラウザに表示してみてください。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>emタグの例</title>
</head>
<body>
    <p>この文章は普通の文章ですが、<em>ここだけが強調されています</em>。</p>
    <p>
    日本語のフォントだと見た目は変わらないこともありますが<br>
    <em>アルファベット（alphabet）</em>はだいたい変わります。
    </p>
</body>
</html>

<em> は文章の意味を強調したいときに使います。
見た目以上に、内容に重点を置いた強調です。

`<strong>` タグ

<strong> は「重要」を意味し、非常に強い強調を示します。

視覚的には通常、太字（ボールド）で表示されます。またスクリーンリーダーでは、より強い重要性として読み上げられます。

以下は<strong> タグの使用例です。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>strongタグの例</title>
</head>
<body>
    <p>この文章は普通の文章ですが、<strong>ここは特に重要です</strong>。</p>
    <p>例えば、注意事項や重要なアラートを表すときに<strong>適切な強調</strong>を行えます。</p>
</body>
</html>

<strong> は重要性を示したいときに使います。
見た目の強調だけでなく、意味として「重要」であることを伝える役割があります。

`<em>` と `<strong>` の違い

意味的な違い:
<em> は「内容を目立たせたい」場合に使い、<strong> は「非常に重要」な内容を示す場合に使います。
視覚的な違い:
<em> は斜体、<strong> は太字で表示されます。

両方の強調タグを使った例

以下は<em> と <strong> を組み合わせた例です。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>emとstrongの組み合わせ例</title>
</head>
<body>
    <p>この文章では、<em>ここが強調されていますが</em>、<strong>こちらは特に重要です</strong>。</p>
    <p><strong><em>両方を組み合わせる</em></strong>ことも可能です。</p>
</body>
</html>

引用タグ

HTMLでは、他のサイトなどからの引用を適切に表現するためのタグとして、<q> と <blockquote> が用意されています。

これらは引用文の内容や範囲を明確にし、文章の意味を正確に伝える役割を果たします。

`<q>` タグ

<q> タグは短い引用文を表現するために使用します。ブラウザでは通常、自動的に引用符（ダブルクォーテーション）が追加されます。

以下は<q> タグの使用例です。実際にブラウザに表示してみてください。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>qタグの例</title>
</head>
<body>
    <p>著名な発言として、<q>努力は決して裏切らない</q>と言われています。</p>
    <p>別の例として、<q>未来は自分の手で作るもの</q>という言葉もあります。</p>
</body>
</html>

引用符はブラウザが自動的に付与します。手動で記述する必要はありません。
短い引用に適しています。

`<blockquote>` タグ

<blockquote> タグは長い引用文や段落全体を引用として表示する場合に使用します。通常、インデント（字下げ）が適用されて視覚的に区別されます。

以下は<blockquote> タグの使用例です。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>blockquoteタグの例</title>
</head>
<body>
    <p>以下は有名な引用文です。</p>
    <blockquote>
        成功とは、失敗を重ねても情熱を失わないこと。
        – ウィンストン・チャーチル
    </blockquote>
</body>
</html>

段落全体を引用する際に使います。
インデントによって引用文が視覚的に区別されます。

`<q>` と `<blockquote>` の違い

<q> タグ: 短い引用に適しています。自動で引用符が追加されます。
<blockquote> タグ: 長い引用や段落全体の引用に適しています。インデントが適用されます。

引用の出典を示す

どちらのタグも、cite 属性を使用して引用元を示すことができます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>cite属性の例</title>
</head>
<body>
    <blockquote cite="https://example.com/inspiration">
        偉大な成功は、困難を乗り越えた先にある。
    </blockquote>
</body>
</html>

cite 属性に引用元のURLや情報を追加することで、引用の信頼性を高めることができます。

これらはページの見た目にはあまり関係ない内容ですが、ページの信頼性を高めることでGoogleなどの検索サイトから表示されやすくなります。

まとめ

この章ではHTMLの基本的なタグの使い方を学びました。

それぞれのタグはWebページを構造化し、情報を整理するために欠かせない役割を果たします。

学んだ内容の復習

ヘッダータグ（<h1>〜<h6>）
- Webページの構造を整理し、階層的に情報を表示する方法を学びました。
段落と改行タグ（<p> と <br>）
- <p> タグは文章のまとまりを表し、改行と余白が自動的に適用されます。
- <br> タグは段落内での改行に使用しますが、乱用を避けましょう。
強調タグ（<em> と <strong>）
- 見た目だけでなく、意味的にも内容を強調するために使用します。
- <em> は軽い強調、<strong> は重要性を示します。
引用タグ（<q> と <blockquote>）
- 短い引用には <q> タグ、長い引用や段落全体の引用には <blockquote> タグを使用します。
- cite 属性を使うことで引用元を明示することができます。

HTMLのこれらの基本タグをマスターすることで、Webページの基盤を構築するスキルが身に付きます。

次のステップではさらに応用的なタグやレイアウトの方法を学び、より魅力的で効果的なWebページ作成に取り組みましょう！

練習問題1-2：ギタリスト風ブログ記事を書いてみよう

VSCで「Lesson1-2.html」というファイルを作って保存してください。

そのファイルにhtmlコードを書き、以下のように表示させましょう。画像の下の詳細条件も確認してください。

使用するヘッダータグは<h1>と<h2>のみ
<q>タグによる引用と<blockquote>タグによる引用が一つずつ
日本語のため見た目が変わってないが、「ゆっくり丁寧に引くことが重要です！」の部分は強調されている。
このコードが書けたら、次は自分の趣味のブログ記事を書いてみよう！

初めてのWebサイトを作ろう1-2

このサイトのLesson1-1からLesson3-9まで順番に学習していくことで、HTMLとCSSの基本情報をまとめたあなたのWebサイトを作成できます。

サイトのタイトルは「HTML/CSSの情報まとめ」

この「初心者のためのプログラミングテキスト＆問題集」で紹介しているHTMLやCSSの情報・知識、覚えるべきタグなど簡潔にまとめ、後から辞書のように使えることを目標としています。

Lesson1-2の学習内容をまとめよう

VSCを使ってlesson1フォルダの中に「MyWebsite1-2.html」というファイルを作ってください。

その後、MyWebsite1-2.htmlにこのLesson1-2で学習した内容をまとめてみましょう。

自分で記事を見直してまとめることを推奨しますが、模範解答も用意しましたので必要な方はこちらを活用して下さい。

模範解答（ブラウザ表示）

Lesson1-2：基本的なHTMLタグ（h1タグ）

１．ヘッダータグ(h2タグ）

見出しタグ：<h1> ～ <h6>（数字が小さいほど大きな見出し）

例：<h1>見出し1</h1>

なお、セクションタグについてはLesson1-7でより詳細に学習するため割愛

２．段落と改行タグ（h2タグ）

段落タグと改行タグは文章を書くための最も基本的なタグ

2-1.段落タグ（h3タグ）

<p>（段落ごとに内容を区切る）

例：<p>段落の内容</p>

2-2.改行タグ（h3タグ）

<br>（文中に改行を挿入）

<br>タグを使用することで
このように
一つの段落の中で改行することができる

３．強調タグ（h2タグ）

見た目だけでなく内容も強調させる

3-1.強調（斜体）（h3タグ）

<em>（重要な部分を強調）

例：<em> 重要 </em>

日本語だとフォントによっては斜体にならないこともある

3-2.強調（太字）（h3タグ）

例：<strong> 重要 </strong>

４．引用タグ（h2タグ）

他のサイトなどからの引用を表現する

4-1.短い引用（h3タグ）

<q>（インラインで引用）

例：<q> 引用文 </q>

4-2.長い引用（h3タグ）

<blockquote>（ブロックで引用）

「愛もHTMLも、きちんと閉じタグを忘れないことが大切だ」 – 初心者のためのプログラミングテキスト＆問題集

注意点（h2タグ）

<h1>は1ページに1回のみ使用。

<p>はテキストのまとまりごとに使う。

強調タグの使用はSEO対策としても有効。

引用タグを使用すると、著作権の配慮が必要。

トップページへ戻る（Lesson1-3学習後に、実際にリンクで繋ぎましょう）

模範解答（htmlコード）

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>基本的なHTMLタグ</title>
</head>
<body>
    <h1>Lesson1-2：基本的なHTMLタグ</h1>

    <h2>１．ヘッダータグ</h2>
    <p>見出しタグ：&lt;h1&gt; ～ &lt;h6&gt;（数字が小さいほど大きな見出し）</p>
    <p>例：&lt;h1&gt;見出し1&lt;/h1&gt;</p>
    <p>なお、セクションタグについてはLesson1-7でより詳細に学習するため割愛</p>

    <h2>２．段落と改行タグ</h2>
    <p>段落タグと改行タグは文章を書くための最も基本的なタグ</p>
        <h3>2-1.段落タグ</h3>
        <p>&lt;p&gt;（段落ごとに内容を区切る）</p>
        <p>例：&lt;p&gt;段落の内容&lt;/p&gt;</p>
        <h3>2-2.改行タグ</h3>
        <p>&lt;br&gt;（文中に改行を挿入）</p>
        <p>
            &lt;br&gt;タグを使用することで<br>
            このように<br>
            一つの段落の中で改行することができる
        </p>

    <h2>３．強調タグ</h2>
    <p>見た目だけでなく内容も強調させる</p>
        <h3>3-1.強調（斜体）</h3>
        <p>&lt;em&gt;（重要な部分を強調）</p>
        <p>例：<em>&lt;em&gt; 重要 &lt;/em&gt;</em></p>
        <p>日本語だとフォントによっては斜体にならないこともある</p>
        <h3>3-2.強調（太字）</h3>
        <p>例：<strong>&lt;strong&gt; 重要 &lt;/strong&gt;</strong></p>

    <h2>４．引用タグ</h2>
    <p>他のサイトなどからの引用を表現する</p>
        <h3>4-1.短い引用</h3>
        <p>&lt;q&gt;（インラインで引用）</p>
        <p>例：<q>&lt;q&gt; 引用文 &lt;/q&gt;</q></p>
        <h3>4-2.長い引用</h3>
        <p>&lt;blockquote&gt;（ブロックで引用）</p>
        <blockquote>
            「愛もHTMLも、きちんと閉じタグを忘れないことが大切だ」
            – 初心者のためのプログラミングテキスト＆問題集
        </blockquote>
    <h2>注意点</h2>
    <p>&lt;h1&gt;は1ページに1回のみ使用。</p>
    <p>&lt;p&gt;はテキストのまとまりごとに使う。</p>
    <p>強調タグの使用はSEO対策としても有効。</p>
    <p>引用タグを使用すると、著作権の配慮が必要。</p>

    <p>トップページへ戻る（Lesson1-3学習後に、実際にリンクで繋ぎましょう）</p>
</body>
</html>

このコードをコピーしてMyWebsite1-2.htmlに張り付けてください。