1. はじめに
HTML（HyperText Markup Language）は、ウェブページを作成するための基本的な言語です。HTMLタグを使って、文章や画像、リンク、リストなどをウェブページ上に表示します。この記事では、初心者の私でも理解できたよく使うHTMLタグを、役割ごとにわかりやすく紹介します。
これからHTMLを学ぶ方にとって、基本のタグを知ることはウェブデザインの第一歩。ぜひ参考にしてみてください！
2. よく使うHTMLタグとその役割
2.1 見出しタグ（<h1>〜<h6>）
役割：ページやセクションのタイトルを表すためのタグです。<h1>は最も大きく、重要な見出しに使い、<h6>は最も小さい見出しに使用します。
- 使い方：
<h1>ページのタイトル</h1> <h2>セクションの見出し</h2> <h3>サブセクションの見出し</h3>
- 例：
<h1>：ブログのタイトル<h2>：記事の各セクションタイトル
ポイント：SEO（検索エンジン最適化）の観点からも、見出しタグは重要です。<h1>はページに1つだけ使い、それ以降のタグは適切に使い分けましょう。
2.2 段落タグ（<p>）
役割：文章の一つのまとまり（段落）を表すタグです。文章をきちんと段落ごとに分けることで、ページが読みやすくなります。
- 使い方：
<p>これは段落です。</p>
- 例：
<p>タグで文章全体を区切り、改行を適切に挿入します。
ポイント：<p>タグは文のまとまりをつくるため、段落ごとにこのタグを使ってください。自動的に上下にスペースが加わり、読みやすくなります。
2.3 リンクタグ（<a>）
役割：別のページや外部サイトへのリンクを作成するためのタグです。ユーザーがクリックできるテキストや画像にリンクを設定できます。
- 使い方：
<a href="https://example.com">こちらをクリック</a>
- 例：
<a href="https://example.com">私のブログをチェック！</a>
→ 「私のブログをチェック！」がリンクになり、クリックすると指定したURLに飛びます。
ポイント：href属性にリンク先のURLを記載します。また、_blankオプションを使うと、新しいタブでリンクを開くことができます。
2.4 画像タグ（<img>）
役割：ウェブページに画像を表示するためのタグです。src属性で画像ファイルのパスを指定し、alt属性で代替テキストを記述します。
- 使い方：
<img src="image.jpg" alt="画像の説明">
- 例：
<img src="logo.png" alt="サイトのロゴ">
→ サイトのロゴ画像を表示します。
ポイント：alt属性は、画像が表示されないときや、スクリーンリーダーが画像の代わりに説明を読み上げるために使います。SEOにも有効です。
2.5 リストタグ（<ul>と<ol>）
役割：箇条書きや番号付きリストを表示するためのタグです。<ul>は順序のない箇条書きリスト、<ol>は番号付きのリストを作ります。
- 使い方：
<ul> <li>アイテム1</li> <li>アイテム2</li> <li>アイテム3</li> </ul> <ol> <li>ステップ1</li> <li>ステップ2</li> <li>ステップ3</li> </ol>
- 例：
<ul>：買い物リストやチェックリストを表示。<ol>：手順やランキングを表示する際に使用。
ポイント：リスト内の各項目は<li>（リスト項目）タグで囲みます。視覚的に整えやすく、特に箇条書きでの情報整理に便利です。
2.6 強調タグ（<strong>と<em>）
役割：文章の一部を強調するためのタグです。<strong>は太字で強く強調し、<em>は斜体で軽く強調します。
- 使い方：
<strong>重要なポイント</strong> <em>少し強調したい部分</em>
- 例：
<strong>：重要な情報や注目すべき部分。<em>：感情的なニュアンスを伝えたい部分。
ポイント：視覚的な強調だけでなく、スクリーンリーダーもこれらのタグを特別に扱います。強調したい部分に適切に使用しましょう。
3. まとめ
今回は、初心者でも使いやすいHTMLタグの基本を紹介しました。これらのタグを使いこなせば、ウェブページの構造やデザインを簡単に整えることができます。初めはシンプルなタグから始め、徐々に他のタグにも挑戦してみてください。
HTMLのタグを理解して使えるようになると、WordPressでのブログ作成や、ウェブデザインのカスタマイズがさらに楽しく、自由度が高まります。ぜひこの記事を参考に、タグの使い方を練習してみてください！
