HTMLタグとは？見出し・段落・リンク・画像の書き方を初心者向けに解説

2026年8月23日2026年10月6日

HTMLを学び始めると、<h1>、<p>、<a>、<img>など、山かっこで囲まれた記号が次々に出てきます。「タグを全部覚えなければページを作れないのでは」と不安になる方もいるでしょう。

HTMLタグは、文章や画像の役割をブラウザーへ伝えるための記述です。最初からすべてを暗記する必要はありません。見出し・段落・リンク・画像の4種類から、短いページを作り始められます。

この記事では、タグ・要素・属性の違いと、基本タグの書き方をコード例で解説します。MDNの日本語資料も参照しながら、後半ではプロフィールページを作ります。

読み終えたら、自分の文章や写真をページに配置し、保存と表示確認を繰り返せることが目標です。まずは、タグが何を表すのかから見ていきましょう。

この記事で分かること

HTMLタグ・HTML要素・属性の違い
見出しタグと段落タグの書き方
リンクタグで別ページへ移動させる方法
画像タグで画像と代替テキストを指定する方法
4種類のタグでプロフィールページを作る手順

HTMLタグの役割と基本の書き方

HTMLは、Webページの文章や画像を「これは見出し」「これは段落」「これはリンク」のように構造化するマークアップ言語です。その役割を指定するときに使うのがタグです。

たとえば、次のコードは「HTMLタグを学んでいます。」という文章を段落として表します。

<p>HTMLタグを学んでいます。</p>

ブラウザーは<p>を見て、囲まれた文章が一つの段落であると解釈します。文字を大きくする、色を変える、余白を広げるといった見た目は、基本的にCSSで指定します。

タグ・要素・属性の違い

普段の会話では、<a href="about.html">自己紹介</a>全体を「aタグ」と呼ぶこともあります。ただし、厳密にはタグ、要素、属性が組み合わさっています。ここでのabout.htmlは、同じフォルダーに置く別ページのファイル名の例です。移動を試すには、その場所に実際のabout.htmlを用意する必要があります。

用語	指すもの	例
タグ	要素の始まりや終わりを示す記述	`<a>`、`</a>`
要素	タグと内容を含む全体（空要素には終了タグ・内容がない）	`<a href="...">自己紹介</a>`
属性	要素へ追加する設定や情報	`href="..."`

たとえば、a要素ではhref属性に移動先を指定します。属性は開始タグの中に書きます。タグ名の後ろへ半角スペースを入れ、属性名、=、引用符で囲んだ値の順に並べます。複数の属性も半角スペースで区切ります。

a要素全体を囲む枠の中に開始タグ・内容・終了タグがあり、href属性が開始タグの中にある関係図 — href属性は開始タグの中に書きます。

HOAI Point

「タグ」という言葉が要素全体の意味で使われる場面もあります。学習中は言い間違いを過度に気にせず、コードを読むときに「タグは境界、要素は全体、属性は追加情報」と区別できれば十分です。

開始タグ・終了タグと空要素

見出しや段落、リンクの多くは、開始タグと終了タグを対にして内容を囲みます。終了タグには要素名の前に/が付きます。

<h1>私のプロフィール</h1>
<p>Web制作を学んでいます。</p>
<a href="https://developer.mozilla.org/ja/">MDN Web Docs</a>

タグの中へ別の要素を入れることを「入れ子」といいます。内側に置いた要素から先に閉じるように書きます。

<p><strong>HTMLの基本</strong>を学んでいます。</p>

一方、画像を表すimg要素は、内部に文章を持たない空要素です。終了タグは書かず、必要な情報を属性で指定します。

<img src="images/profile.jpg" alt="笑顔で写るプロフィール写真">

最初に覚える4種類のタグ

この記事で使う基本タグは次の4種類です。

役割	タグ	基本の書き方
見出し	`h1`〜`h6`	`<h1>ページの題名</h1>`
段落	`p`	`<p>一つの話題を表す文章</p>`
リンク	`a`	`<a href="URL">リンク先の名前</a>`
画像	`img`	`<img src="画像の場所" alt="画像の説明">`

この4種類だけでも、ページの題名、説明文、画像、別ページへの移動を用意できます。タグの種類を増やす前に、まずは役割に合うタグを選び、開始と終了、属性の位置を正しく書くことを目標にしましょう。

MDNへの資料リンクは新しいタブで開きます。HTMLの基本構文をさらに確認したい場合は、MDN「基本的なHTMLの構文」が日本語で読めます。

練習コードを書く場所

練習には、コードを書くテキストエディターと、表示を確かめるブラウザーを使います。短いコード例は、作業用HTMLファイルの<body>と</body>の間へ書いてください。後半の完成コードは、新しく用意したindex.htmlの全内容として使います。ファイルの作り方は、HTMLの基本構造と最初のWebページの作り方で確認できます。

見出しタグ（h1〜h6）の書き方

見出しにはh1からh6まで6段階があります。数字が小さいほど上位の見出しです。ページの題名をh1、大きな章をh2、章の中の小見出しをh3と考えると整理しやすくなります。

<h1>私のプロフィール</h1>

<h2>自己紹介</h2>
<p>Web制作を学んでいます。</p>

<h2>好きなこと</h2>
<h3>写真</h3>
<p>街を歩きながら写真を撮ることが好きです。</p>

h1・h2・h3の使い分け

初心者が作る一般的な1ページでは、h1をページの主題として一つ置き、その下へh2、必要に応じてh3を使うと分かりやすい構造になります。

h1：ページ全体の題名
h2：ページ内の大きな章
h3：h2の章をさらに分ける小見出し
h4〜h6：より深い階層が本当に必要なとき

重要なのは、見出しの数字を文字サイズで選ばないことです。h2の見た目を小さくしたい場合でも、情報の階層がh2ならHTMLはh2を使い、文字サイズはCSSで調整します。

見出しレベルを飛ばさず、ページの目次として読んでも意味が通る順番にすると、読み手にもブラウザーにも構造が伝わりやすくなります。

見出しの役割と見た目の違い

文字を太くしたり、行を改めるbrタグで改行を重ねたりしても、見た目を見出しらしくすることはできます。しかし、それだけでは「見出し」という意味を持ちません。

<!-- 見た目だけを見出しらしくした例 -->
<p><strong>自己紹介</strong></p>

<!-- 役割を正しく示した例 -->
<h2>自己紹介</h2>

適切な見出しは、ページを目で追う人だけでなく、見出し単位で移動するスクリーンリーダー利用者にとっても手がかりになります。詳しくはMDN「見出しと段落」で確認できます。

HOAI Point

見出しタグは文字の大きさを選ぶためではなく、文章の階層を示すために使います。まずh1、h2、h3までで構造を組み、深くなりすぎる場合は内容の分け方を見直しましょう。

段落タグ（p）の書き方

本文のまとまりにはpタグを使います。pはparagraph（段落）の頭文字です。一つの話題や意味のまとまりを、一組のpタグで囲みます。

<p>HTMLはWebページの内容に役割を与える言語です。</p>
<p>CSSは文字色や余白などの見た目を指定する言語です。</p>

コード内の改行と段落の違い

HTMLでは、コード内でEnterキーを押しただけでは、新しい段落として扱われません。ブラウザーは多くの場合、連続する空白や改行を一つの空白として表示します。

<!-- 一つのp要素なので一つの段落として扱われる -->
<p>
  HTMLタグを使うと、
  文章に役割を与えられます。
</p>

新しい話題へ移るときは、p要素を分けます。見た目の空きを増やすために空のpタグやbrタグを重ねるのではなく、余白はCSSで整えます。

pの中に別のpや見出しのh2を入れることはできません。見出しは段落を閉じた後に書きます。誤って入れると、ブラウザーが段落を途中で閉じ、意図と違う構造にすることがあります。

<p>最初の段落です。</p>
<p>ここから別の話題です。</p>

重要な文章を示すstrongタグ

文章の一部を重要な内容として示す場合は、strong要素をp要素の中へ入れられます。

<p>最初は<strong>4種類の基本タグ</strong>から練習しましょう。</p>

多くのブラウザーでは太字で表示されますが、strongの本来の役割は重要性を示すことです。単に文字を太くしたいだけなら、見た目はCSSで指定します。

リンクタグ（a）とhref属性の書き方

別のページやファイルへ移動できるリンクはa要素で作ります。リンク先はhref属性へ、クリックする文字は開始タグと終了タグの間へ書きます。

<a href="https://developer.mozilla.org/ja/">MDN Web Docs</a>

この例では、hrefが移動先、MDN Web Docsが画面に表示されるリンクテキストです。

分かりやすいリンクテキスト

「こちら」「詳しく見る」だけでは、リンクだけを拾い読みしたときに移動先が分かりません。リンク先の内容を短く表す文字を使います。

<!-- 移動先が分かりにくい -->
<a href="https://developer.mozilla.org/ja/">こちら</a>

<!-- 移動先が分かりやすい -->
<a href="https://developer.mozilla.org/ja/">MDN Web DocsでHTMLを調べる</a>

リンクテキストは、前後の文章を読まなくても移動先を想像できる表現にすると、読み手が判断しやすくなります。

絶対URLと相対パスの使い分け

hrefには、https://から始まる絶対URLだけでなく、同じWebサイト内のファイルを示す相対パスも書けます。

リンク先	書き方の例	向いている場面
外部サイト	`https://example.com/`	別のWebサイトへ移動する
同じフォルダー	`about.html`	隣にあるHTMLファイルへ移動する
一つ下のフォルダー	`pages/about.html`	子フォルダー内のファイルへ移動する

最初の練習では、外部サイトには絶対URL、同じ作業フォルダー内のページには相対パス、と使い分ければ十分です。ファイル名の大文字・小文字やフォルダー名が実物と一致しているかも確認してください。

新しいタブで開く指定と使いどころ

リンクは通常、同じタブで開きます。新しいタブで開く必要がある場合はtarget="_blank"を追加できます。ブラウザーの設定によっては別ウィンドウで開きます。次の例では、参照元ページとの関係を指定するrel属性も加えています。

<a
  href="https://developer.mozilla.org/ja/"
  target="_blank"
  rel="noopener noreferrer"
>
  MDN Web Docs
</a>

すべてのリンクを新しいタブにすると、タブが増えて操作しにくくなることがあります。読者が元のページを残して参照する必要があるなど、目的がある場合に使いましょう。

noopenerは開いたページから元ページを操作する経路を切り、noreferrerは移動元URLを通知しない指定です。どちらもリンク先を指定するための必須属性ではありません。なお、この記事内のMDNへの資料リンクは、参照しやすいよう新しいタブで開きます。

リンクの基本、絶対パスと相対パス、分かりやすいリンクテキストは、MDN「リンクの作成」で詳しく確認できます。

HOAI Point

a要素で迷ったら、「どこへ移動するか」はhref属性、「何へのリンクか」はリンクテキストで伝える、と分けて確認してください。

画像タグ（img）の書き方

画像はimg要素で表示します。imgは空要素なので終了タグを持ちません。画像ファイルの場所をsrc属性、画像の代わりになる説明をalt属性へ書きます。

<img src="images/profile.jpg" alt="笑顔で写るプロフィール写真">

src属性と画像ファイルの場所

HTMLファイルと画像の置き場所が次の構成なら、src="images/profile.jpg"と指定します。

作業用のprofile-siteフォルダーに、index.htmlとimagesフォルダーを並べます。画像のprofile.jpgは、そのimagesフォルダーの中へ入れます。

画像が表示されないときは、srcの文字列と実際のフォルダー名・ファイル名・拡張子を一文字ずつ比べます。profile.jpgとProfile.jpgは、環境によって別の名前として扱われます。

画像の幅と高さが分かっている場合は、width属性とheight属性も指定できます。次の800と600は、幅800ピクセル・高さ600ピクセルの画像を使う例です。自分の画像の実際の寸法に合わせて数値を変えます。HTMLのこの属性値にはpxや%を付けません。

<img
  src="images/profile.jpg"
  alt="笑顔で写るプロフィール写真"
  width="800"
  height="600"
>

幅と高さを先に伝えると、画像を読み込む前からブラウザーが表示領域を確保しやすくなります。実際の画面幅に合わせた大きさの調整はCSSで行います。

alt属性と代替テキスト

alt属性には、ファイル名ではなく、画像が伝えている内容を短く書きます。画像が表示されない場合や、スクリーンリーダーでページを読む場合に使われます。

内容を伝える画像：alt="ノートパソコンでHTMLを編集している様子"
商品や作品の画像：名称と識別に必要な特徴を書く
リンクになっている画像：リンク先が分かる内容を書く
意味を持たない装飾画像：alt=""と空にする

「画像」「写真」「image.jpg」のような説明だけでは、画像が伝える内容が分かりません。一方で、本文と同じ説明を長く繰り返す必要もありません。

画像が見えない状態で、読み手が失う情報を補うと考えると、alt属性に何を書くか判断しやすくなります。

img要素、src、alt、画像サイズの考え方は、MDN「HTMLの画像」で日本語の解説を読めます。

HOAI Point

画像が表示されない場合は、imgタグ全体を書き直す前に、srcのフォルダー名、ファイル名、大文字・小文字、拡張子の4点を確認しましょう。

4種類のタグでプロフィールページを作る

ここまでの見出し、段落、リンク、画像を組み合わせ、短いプロフィールページを作ります。名前の「山田花子」は架空の例です。画像ファイルはコードを貼るだけでは用意されないため、自分で撮影した写真などを1枚準備してください。

見出し・写真・自己紹介・文章・資料リンクと、h1・img・h2・p・aの対応をプロフィールページ上で示した模式図 — 主な要素と表示順を示す模式図です。実際の文字サイズ・見た目は異なり、途中の節や文章の一部は省略しています。

完成コードを確認する

次のコード全体を、新しいindex.htmlへ入力します。headは文字コードやタブのタイトルなどの情報、bodyは画面に表示する内容です。WordPressの段落ブロックへこの文書全体を貼る練習ではなく、手元のHTMLファイルを開いて確認します。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>山田花子のプロフィール</title>
    <style>
      img {
        max-width: 100%;
        height: auto;
      }
    </style>
  </head>
  <body>
    <h1>山田花子のプロフィール</h1>

    <img
      src="images/profile.jpg"
      alt="街の公園で撮影した山田花子のプロフィール写真"
      width="800"
      height="600"
    >

    <h2>自己紹介</h2>
    <p>Web制作を学んでいます。写真と散歩が好きです。</p>

    <h2>学んでいること</h2>
    <p>HTMLタグを使い、文章や画像へ役割を与える練習をしています。</p>

    <h2>参考にしているサイト</h2>
    <p>
      <a href="https://developer.mozilla.org/ja/">
        MDN Web DocsでHTMLを調べる
      </a>
    </p>
  </body>
</html>

名前、自己紹介、altの説明は、自分の内容に置き換えます。profile.jpgはJPEG画像のファイル名の例です。PNG画像ならprofile.pngなど実物の名前をsrcへ書き、拡張子だけを.jpgに変えないでください。画像のwidthとheightも実際の寸法に合わせます。

head内のstyleには、画像のはみ出しを防ぐためのCSSを2つだけ書いています。max-width: 100%;で画像を含む領域の幅以下に収め、height: auto;で画像の縦横比を保ちます。HTMLの寸法属性と異なり、CSSではこの例の%やautoまで含めて書きます。

保存してブラウザーで確認する

STEP

画像を作業用フォルダーへ入れる

profile-siteフォルダーを作り、その中へimagesフォルダーを作ります。準備した画像をimagesへ入れ、実際のファイル名と画像の幅・高さを確認します。index.htmlは次のステップで保存します。

STEP

完成コードをindex.htmlとして保存する

テキストエディターの新規ファイルへ完成コード全体を入力し、画像のファイル名・寸法・altを合わせます。profile-siteの中へ、文字コードUTF-8、ファイル名index.htmlで保存します。末尾がindex.html.txtになっていないか確認してください。

STEP

index.htmlをブラウザーで開く

index.htmlをブラウザーへドラッグするか、「プログラムから開く」などでブラウザーを選びます。タブにtitleの名前が出て、本文にはh1の見出し、画像、自己紹介以降の各節が上から順に表示されれば成功です。

STEP

リンクと画像を確かめる

「MDN Web DocsでHTMLを調べる」を押し、MDNの日本語ページへ移動したら、ブラウザーの戻る操作でプロフィールへ戻ります。画像が出ない場合は、srcと実物の名前を比較します。写真が縦や横に伸びて見えないことも確認します。

STEP

一か所変更して再読み込みする

テキストエディターで、自己紹介のpにある「Web制作を学んでいます。」を「HTMLでページを作っています。」へ変え、上書き保存します。ブラウザーで同じindex.htmlを再読み込みし、その文章が変わって画像や見出しも表示されていれば完了です。

最後に、コードの役割も確認しましょう。

ページの主題がh1になっている
大きな話題がh2で分かれている
本文がpでまとまっている
リンクテキストから移動先が分かる
画像に内容に合うaltがある

見た目が簡素でも問題ありません。この段階の目的は、HTMLで内容の役割と順番を作り、保存と表示確認を自分で繰り返せるようになることです。

HTMLタグが効かないときの確認方法

ブラウザーへ意図どおりに表示されない場合でも、すべてを書き直す必要はありません。症状に合わせて、変更した場所から一つずつ確認します。

症状	よくある原因	確認方法
タグが文字のまま表示される	全角の山かっこ、`.txt`保存、文字参照のまま貼り付け	半角の`<`と`>`、`.html`を確認。`<`は表示用の文字参照
見出し以降の表示がおかしい	終了タグの不足、タグ名の打ち間違い	開始タグと終了タグを上から対にして確認する
リンクを押しても移動できない	`href`のURLやファイル名が違う	引用符の内側と実際のリンク先を比較する
画像が表示されない	`src`のパスや拡張子が違う	フォルダー名、ファイル名、大文字・小文字を確認する
修正前の内容が表示される	保存または再読み込みができていない	上書き保存し、同じファイルを開いて再読み込みする

入れ子と終了タグの確認

入れ子の順番が崩れると、ブラウザーが意図と異なる構造へ補正することがあります。最後に開始した要素から順に閉じます。

<!-- 誤り：pを閉じる前にstrongを閉じていない -->
<p><strong>重要な文章です。</p></strong>

<!-- 正しい：内側のstrongから閉じる -->
<p><strong>重要な文章です。</strong></p>

修正・保存・再読み込みの順番

原因が分からないときに複数のタグやファイル名を同時に変えると、どの修正が有効だったか分からなくなります。

直前に変更した一か所を確認する
保存する
ブラウザーを再読み込みする
表示が変わったか確認する

この短い流れを繰り返すと、原因を絞り込みやすくなります。より詳しい確認方法は、MDN「HTMLのデバッグ」でも学べます。

HOAI Point

エラーは最初に見つけた一か所から直しましょう。前半の閉じ忘れが後半の表示へ影響することがあるため、上から順に確認すると原因を追いやすくなります。

よくある質問

HTMLタグは全部暗記する必要がありますか？: いいえ。最初は見出し、段落、リンク、画像など、よく使う少数のタグで1ページを作れれば十分です。必要な役割が増えたときに、日本語版のMDN「HTML要素リファレンス」で調べる習慣を付けましょう。
h1タグは1ページに一つだけですか？: 一般的なページでは、主題を表すh1を一つ置くことをおすすめします。複数のh1が許容される書き方もありますが、見出しの階層を理解しやすくするため、この記事の練習ではh1を一つ、章をh2、章の中をh3にそろえます。
imgタグに終了タグは必要ですか？: 必要ありません。img要素は内部に文章を持たない空要素です。srcやaltなど、画像の表示に必要な情報は開始タグに相当する一つの記述へ属性として書きます。
リンクはすべて新しいタブで開くべきですか？: いいえ。通常のリンクは同じタブで開きます。元のページを残しながら外部資料を参照してもらうなど、新しいタブにする目的がある場合だけtarget="_blank"を使い、rel="noopener noreferrer"も指定します。
WordPressを使う場合もHTMLタグを学ぶ必要がありますか？: ブロックエディターでは、見出しブロックや段落ブロックを選ぶと、多くのHTMLが自動で作られます。そのため、すべてを手入力する必要はありません。ただし、コードエディターで内容を確認するときや、リンク・画像・見出しの表示を直すときに、タグの役割を知っていると原因を判断しやすくなります。