この記事では、HTMLの基本的な構成要素である【p】、【img】、【h1】、【div】、【a】というタグについて解説します。それぞれのタグに関する基本情報はもちろん、実際の使用例を挙げながら、効果的な使い方と注意点を紹介します。

なぜこれら5つのタグに焦点を当てるのかというと、それはこれらがHTMLの基本であり、Webページ構築の基礎を形成しているからです。

私がHTMLを学び始めた頃、多くのタグが紹介され、それらすべてを覚えなければならないと感じ、混乱しました。しかし、10年以上のHTMLコーディング経験を経て、実際に頻繁に使用されるタグはそれほど多くはないことに気付きます。

WebサイトやWebアプリの作成に興味がある方々にとって、HTMLの基本を理解することは避けて通れません。まずはここから学びを始めてみましょう。

この5つのタグを覚えるだけで、Webページを作成できるようになるよ！さぁ、始めてみよう！

これからの内容は、以下の記事で解説している情報を踏まえた上での内容です。以下の記事をご覧いただいていない方は先に以下の記事をご覧いただいてからタグの解説を読むようにしてください。

WEBページを超簡単に作成する方法

pタグとは？

pタグは「paragraph」の略で、テキストを段落に区切る目的で使われます。Webページ上で読みやすいテキスト構造を作る際に重要な役割を果たします。

<p>ここに段落のテキストが入ります。</p>

文章内に改行を含む場合は、brタグを使うことで見た目を調整することができます。

See the Pen Using the <br> Tag in HTML for Line Breaks by YOCHITECH (@YOCHITECH) on CodePen.

▼ pタグの詳しい情報は以下のページで解説しています。

imgタグとは？

imgタグは、Webページに画像を埋め込むために使用されるHTMLのタグです。このタグを使って、Webページ上に直接画像を表示することができます。imgタグは閉じタグが不要です。

<img src="image.jpg" alt="画像の説明">
<img src="image.jpg" alt=""><!-- ◀︎ 画像に適切な説明がわからない場合は空でも大丈夫です -->

• src 属性 … これは「source」の略で、表示したい画像のURLを指定します。これが画像の実際の場所を示します。
• alt 属性 … これは「alternative text」の略で、画像が表示されない場合や視覚障害の方がスクリーンリーダーを使用し情報を得るために使用されます。この属性は、画像の内容をGoogleなどの検索エンジンに認識させるためにも、アクセシビリティの観点からも重要です。

画像を表示する方法は他にもありますが、特にHTML初心者にとって<img>タグは最も基本的で簡単な方法の一つです。

<img src="image.jpg">

▼ imgタグの詳しい情報は以下のページで解説しています。

h1 〜 h6 タグとは？

Webページにおける見出しタグの使用は、ページの内容を整理し、読みやすくする上で非常に重要です。h1タグはページのメインタイトルとして使用され、本のタイトルのように、そのページの最も重要な部分を表します。

通常、各ページには一つのh1タグが含まれます。続いて、h2タグ→h3タグ→h4タグなど。タイトルやより詳細なセクションの見出しとして使われます。これらのタグは階層的に使用されることが望ましいです。

このように段階的に見出しを配置することで、読者はページの構造を簡単に理解し内容を追いやすくなります。

また、Googleなどの検索エンジンもこの構造を利用してページの内容を適切に索引付けます。適切な見出しタグの使用は、ユーザーにとっても検索エンジンにとっても、Webページをよりアクセスしやすくなります。

<h1>ウェブページの主なタイトル</h1>

<section>
    <h2>セクションのタイトル</h2>
    <p>ここにはセクションに関する説明や情報が入ります。</p>

    <article>
        <h3>サブセクションのタイトル</h3>
        <p>このサブセクションでは、さらに詳細な情報を提供します。</p>
        
        <div>
            <h4>小見出し</h4>
            <p>ここには、特定のトピックや詳細についての説明が入ります。</p>
        </div>
    </article>
</section>

▼ h1 〜 h6タグの詳しい情報は以下のページで解説しています。

divタグとは？

divタグは、Webページを作るときによく使う基本的な箱のようなものです。このタグは特に決まった意味はありませんが、Webページの中でいろいろなものをひとまとめにするのに役立ちます。たとえば、写真や文章を一緒にグループ化したいときに使います。

<div>
  <h1>私のウェブサイトへようこそ</h1>
  <p>ここにウェブサイトの説明や情報が入ります。</p>
  <img src="example.jpg" alt="サンプル画像">
</div>

divタグは、特定の意味を持たない汎用的なコンテナタグです。このタグの主な役割は、Webページ内の要素をひとかたまりにまとめることにあります。divタグを使用しても、タグ自体が直接的な意味や機能を持たないため、検索エンジンのランキングに直接的な影響はありません。

divタグが意味を持たないことは、実はこのタグの大きなメリットです。意味が特定されたタグは、それを使うべき適切な状況や場所がありますが、divタグにはそのような制約がありません。そのため、様々な場所で柔軟に使用することができます。

SEO（検索エンジン最適化）の観点からは、divタグの多用は特に推奨されません。しかし、練習段階ではdivタグを用いてサイト多く作ることが学習の近道です。

divタグは、classを付けて使用する

divタグは、HTMLで最も一般的なコンテナ要素の一つで、通常、それに特定のスタイルや動作を適用するために class 属性を追加します。class 属性は、同じスタイルをページ内の複数の要素に適用するのに役立ちます。CSS（カスケーディングスタイルシート）を使って、これらのクラスにスタイルを定義し、Webページの見た目やレイアウトを制御します。

See the Pen Example of a Div Tag with a Class. by YOCHITECH (@YOCHITECH) on CodePen.

▼ divタグの詳しい情報は以下のページで解説しています。

aタグとは？

aタグはHTMLで非常に重要な要素の一つで、ハイパーリンクを作成するために使用されます。このタグを使うことで、Webページ上のテキストや画像にリンクを設定し、クリックすると他のWebページやWebサイト、ページ内の特定のセクションに移動できます。

<a href="リンク先のURL">リンクテキスト</a>

• href 属性 … これは「hypertext reference」の略で、リンク先のURLを指定します。

また、target="_blank" 属性を aタグに追加することで、「ターゲットブランク」として機能します。この属性を使うと、リンクをクリックしたときに新しいブラウザタブまたはウィンドウでリンク先を開くことができます。これは、特にユーザーが現在のページを離れることなく追加の情報を閲覧したい場合に便利です。

<a href="https://www.example.com" target="_blank">Exampleサイトを新しいタブで開く</a>

外部リンクを設置する場合に、target="_blank" 属性を使いましょう！

▼ aタグの詳しい情報は以下のページで解説しています。

まとめ

HTMLの基本的な構成要素として【p】、【img】、【h1】、【div】、【a】というといった重要なタグについて解説しました。

特に最後に紹介したaタグは、他のタグとは異なり「透過的コンテンツモデル」という特殊な特性を持っています。

この記事を通じて、HTMLタグそれぞれの持つ特性や、他のさまざまなタグについても興味を持っていただければ幸いです。より詳細な情報や複雑な概念については、別の記事でさらに深く掘り下げて解説していますので、ぜひご覧いただければと思います。

コンテンツモデルとは？HTML入れ子ルールを実例も含め解説