一つ前の章では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の見出しを作るヘッダータグを理解しよう
HTMLのヘッダータグ（<h1>〜<h6>）は、Webページに見出しを作成するためのタグです。
これらは重要な情報を階層的に整理するために使用され、視覚的な区別だけでなく、検索エンジン最適化（SEO）やアクセシビリティの観点からも重要な役割を果たします。
例えば、上の「HTMLの見出しを作るヘッダータグを理解しよう」という行は<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などの検索エンジンにサイト構成を正しく伝える役割もありますので、適切に配置しましょう。
Webページの構成に必須の段落タグと改行タグ
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タグをマスターしよう
HTMLでは文章の中で特定の部分を強調するために、強調タグ（<em> と <strong>）を使用します。
これらのタグは文字の見た目も強調されますが、それ以上に内容の重要性を意味する（Googleやbingに「ここが重要だ」と伝える）ものです。
文章を斜体で強調する「<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>は太字で表示されます。
文章を引用するための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>タグ: 長い引用や段落全体の引用に適しています。インデントが適用されます。
基本的なHTMLタグのまとめ
この章ではHTMLの基本的なタグの使い方を学びました。
それぞれのタグはWebページを構造化し、情報を整理するために欠かせない役割を果たします。
学んだ内容の復習
- ヘッダータグ（
<h1>〜<h6>）- Webページの構造を整理し、階層的に情報を表示する方法を学びました。
- 段落と改行タグ（
<p>と<br>）<p>タグは文章のまとまりを表し、改行と余白が自動的に適用されます。<br>タグは段落内での改行に使用しますが、乱用を避けましょう。
- 強調タグ（
<em>と<strong>）- 見た目だけでなく、意味的にも内容を強調するために使用します。
<em>は軽い強調、<strong>は重要性を示します。
- 引用タグ（
<q>と<blockquote>）- 短い引用には
<q>タグ、長い引用や段落全体の引用には<blockquote>タグを使用します。
- 短い引用には
HTMLのこれらの基本タグをマスターすることで、Webページの基盤を構築するスキルが身に付きます。
次のステップではさらに応用的なタグやレイアウトの方法を学び、より魅力的で効果的なWebページ作成に取り組みましょう！
練習問題1-2：ギタリスト風ブログ記事を書いてみよう
VSCで「training1-2.html」というファイルを作って保存してください。
そのファイルにhtmlコードを書き、以下のように表示させましょう。画像の下の詳細条件も確認してください。
- 使用するヘッダータグは<h1>と<h2>のみ
- <q>タグによる引用と<blockquote>タグによる引用が一つずつ
- 日本語フォントのため見た目が変わってないが、「ゆっくり丁寧に引くことが重要です！」の部分は強調されている。
初めてのWebサイトを作ろう1-2
このサイトの Lesson1-1（HTML学習の入り口） から順番に学習していくことで、HTMLとCSSの基本情報をまとめたあなたのWebサイトを作成できます。
サイトのタイトルは「自分で作る！HTML＆CSSの学習サイト」
この「初心者のためのプログラミングテキスト＆問題集」で紹介しているHTMLやCSSの情報・知識、覚えるべきタグなど簡潔にまとめ、後から辞書のように使えることを目標としています。
- Webサイト制作に挑戦する人はここをクリック！
-
自分だけのWebサイト制作にはベースとなる基本セットが必要になります。
まだ入手していない人はLesson1-1の記事下部からダウンロードして下さい。
Lesson1-2のまとめノートと練習問題を追加しよう
このLessonのまとめノートと練習問題の解答を、MyWebsiteフォルダに追加しましょう。
１．練習問題の解答を保存
練習問題1-2で作成した「training1-2.html」を、ダウンロードした「lesson1（学習フォルダ）」の中に保存してください。
トップページからリンクで飛べるようになりますので確認しましょう。
２．まとめノートを作成・保存
下記のHTMLコードは、このLesson1-2で紹介した内容を端的にまとめてブラウザ表示するためのコードです。
これをコピーして「MyWebsite1-2.html」という名前で保存し、「lesson1（学習フォルダ）」の中に保存してください。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Lesson1-2</title> <link rel="stylesheet" href="style/styles-lesson1.css"> </head> <body> <main class="container"> <h1>Lesson1-2：基本的なHTMLタグを理解しよう</h1> <h2>目的・要点</h2> <p>このレッスンでは、HTMLの基本的な構成要素であるタグについて学びました。特に、見出しを作るためのヘッダータグ（<code><h1>〜<h6></code>）、段落を構成するタグ（<code><p></code>）、改行を指定するタグ（<code><br></code>）、強調を表すタグ（<code><em></code>・<code><strong></code>）、そして引用を示すタグ（<code><q></code>・<code><blockquote></code>）を習得しました。これらのタグを適切に使うことで、読みやすく構造化されたWebページを作成する基礎を築きます。</p> <h2>このレッスンで学習した内容</h2> <h3>ヘッダータグ（<code><h1>〜<h6></code>）</h3> <p>文書の階層構造を整理し、視覚的・SEO的に重要な役割を果たします。</p> <h3>段落タグ（<code><p></code>）</h3> <p>文章を適切なまとまりに分け、読みやすさを向上させます。</p> <h3>改行タグ（<code><br></code>）</h3> <p>段落内での改行に使用しますが、多用は避けるべきです。</p> <h3>強調タグ（<code><em></code>・<code><strong></code>）</h3> <p><code><em></code> は内容の強調（斜体表示）、<code><strong></code> は重要な情報（太字表示）に使用します。</p> <h3>引用タグ（<code><q></code>・<code><blockquote></code>）</h3> <p><code><q></code> は短い引用、<code><blockquote></code> は長い引用に使用し、必要に応じて <code>cite</code> 属性で出典を明示します。</p> <h2>トピック・豆知識</h2> <ul> <li><strong>SEOにおけるヘッダータグの重要性：</strong> 検索エンジンは <code><h1></code> を最も重要なタイトルとして認識し、適切な見出し構造は検索結果の順位向上に寄与します。</li> <li><strong>改行タグの適切な使用：</strong> <code><br></code> タグは詩や住所などの特定のケースで使用し、レイアウト調整にはCSSを活用するのが推奨されます。</li> <li><strong>スクリーンリーダー対応：</strong> <code><em></code> や <code><strong></code> は音声読み上げ時に抑揚が変化し、視覚的な強調だけでなく、情報の重要度を伝えるのに役立ちます。</li> </ul> <h2>まとめ</h2> <p>基本的なHTMLタグを理解し、適切に活用することで、情報を整理しやすく、読みやすいWebページを作成できます。これらの知識を活かし、次のレッスンではリンクや画像の挿入について学び、さらにWebページの作成スキルを高めましょう。</p> <p><a href="../MyWebsite.html">トップページへ戻る</a></p> </main> <footer> <p>© 初心者のためのプログラミングテキスト＆問題集</p> </footer> </body> </html>※ MyWebsite1-2.htmlは先ほどのtraining1-2.htmlと違い、少しだけCSSを使用して見た目を整理しています。
これでLesson1-2の作業は完了です。
継続は力なり。次のLessonも、引き続き頑張ってください^^
<<前のページ
記事一覧
次のページ>>
FAQ｜HTMLの基本タグに関するよくある質問
- Q1. 見出しタグ（<h1>〜<h6>）は必ず使わないといけないのですか？
-
必ずしも全て使う必要はありませんが、<h1>タグはページのタイトルや最重要見出しとして必ず1ページに1つ使用するのが良いとされています。
SEO的にも重要です。また、適切な階層構造で見出しを使うと、読みやすいページを作れます。
- Q2. <p>タグと<br>タグはどう使い分ければ良いですか？
-
<p>タグは段落を作るために使い、文章のまとまりを示します。
一方<br>タグは段落内で改行が必要なときに使います。例えば、住所の表示などで部分的に改行したいときは<br>タグが適しています。
- Q3. <em>タグと<strong>タグは見た目が似ていますが、何が違うのですか？
-
見た目は<em>が斜体、<strong>が太字ですが、HTMLでは意味づけも異なります。
<em>は「強調したい部分」を示し、<strong>は「重要な部分」を示します。
SEO的にも意味が異なるため、使い分けが大切です。
- Q4. <q>タグと<blockquote>タグはどう違いますか？
-
<q>タグは短い引用（1行程度）に使い、引用部分が「“」で囲まれます。
<blockquote>タグは複数行の長い引用に使い、引用部分全体をインデントして表示します。
内容の長さで使い分けるのがポイントです。
- Q5. HTMLタグを書くとき、必ず閉じタグが必要ですか？
-
ほとんどのHTMLタグは開きタグと閉じタグが必要ですが、<br>や<img>のような「空要素」タグは閉じタグがありません。
初心者は特に忘れやすいので、しっかり確認しながらコーディングしましょう。
この記事への質問・コメント
この記事を作成するにあたりAIの力を借りています。
問題ないことは確認していますが、もし間違いや表現の違和感などありましたら、ご指摘頂けると大変助かります。