HTML入門 #2 - 見出し・段落・リンク・画像

入門 | 11分 で読める | 2026.07.12

公式ドキュメント
HTML

今回やること

HTMLでは、文章の意味に合わせてタグを選びます。

見た目ではなく、「これは見出し」「これは本文」「これはリンク」のように役割で考えることが重要です。

今回は自己紹介ページを例に、よく使う基本タグを練習します。

見出しを書く

見出しには h1 から h6 までがあります。数字が小さいほど重要な見出しです。

<h1>山田太郎の自己紹介</h1>
<h2>好きなこと</h2>
<h3>プログラミング</h3>

通常、1ページの中心テーマには h1 を使います。細かいセクションには h2 や h3 を使います。

段落を書く

文章のまとまりには p を使います。

<p>高校生です。Web制作とアプリ開発に興味があります。</p>
<p>まずはHTML、CSS、JavaScriptを学んでいます。</p>

改行したいだけで何でも br を使うのではなく、文章のまとまりは p で分けます。

リンクを書く

リンクには a を使います。リンク先は href 属性に書きます。

<p>
  学習記録は
  <a href="https://github.com/">GitHub</a>
  にまとめています。
</p>

別サイトへのリンクでは、リンク先が信頼できるか確認してから載せます。

画像を表示する

画像には img を使います。

<img src="./profile.png" alt="プロフィール画像" />

alt は画像の説明です。画像が表示されない時や、読み上げ環境で使われます。

装飾目的ではない画像には、内容が伝わる説明を書きます。

自己紹介ページを作る

index.html の body を次のように書き換えます。

<body>
  <h1>山田太郎の自己紹介</h1>

  <p>Web制作を学んでいる高校生です。</p>

  <h2>学習中のこと</h2>
  <p>HTML、CSS、JavaScriptを順番に学んでいます。</p>

  <h2>目標</h2>
  <p>自分で作ったWebアプリをGitHubに公開することです。</p>

  <p>
    学習メモは
    <a href="https://github.com/">GitHub</a>
    にまとめる予定です。
  </p>
</body>

ブラウザで表示し、見出しと段落の階層が自然か確認します。

よくあるミス

ミス問題修正
h1 を何度も使うページの主題が分かりにくい中見出しは h2 にする
href を書き忘れるリンクとして機能しないhref="..." を追加
img に alt がない内容が伝わりにくい画像の説明を書く
画像パスが違う画像が表示されないファイル名と場所を確認

練習

自己紹介ページに次を追加してください。

  1. 「好きな技術」という h2
  2. その説明文を p
  3. 自分が参考にしているサイトへのリンク
  4. 画像がある場合は img と alt

次のステップ

HTML入門 #3 - リスト・表・フォームの基本 で、情報を整理して入力できる形にします。

参考リソース

おすすめ記事

← 一覧に戻る
PR
PR
PR
PR