メインコンテンツまでスキップ

HTML

HTMLは、Webページの構造を作るためのマークアップ言語です。文章、見出し、画像、リンク、入力フォームなどを「これは見出し」「これは画像」のように意味づけします。

何ができる？​

  • Webページの骨組みを作る
  • 見出し、段落、リスト、表を配置する
  • 画像や動画を表示する
  • 別ページへのリンクを作る
  • お問い合わせフォームの入力欄を作る

学習ゴール​

このページでは、次の状態を目指します。

  • HTMLファイルの基本構造を説明できる
  • 見出し、文章、画像、リンク、リストを使える
  • フォームの基本的な部品を配置できる
  • 見た目の調整はCSSの役割だと理解できる
  • 読みやすく、意味が伝わるHTMLを書ける

開発環境の準備​

HTMLは特別なサーバーがなくても学習できます。

必要なもの役割
ブラウザ作ったページを表示する
エディタHTMLを書く
index.html最初に作るHTMLファイル

おすすめの確認方法は、index.html を作ってブラウザで開くことです。VS Codeを使う場合は、Live Serverのような拡張機能を使うと、保存するたびに画面を確認しやすくなります。

基本の考え方​

HTMLは、タグで内容を囲んで意味を伝えます。

<h1>自己紹介</h1>
<p>こんにちは。Web制作を学んでいます。</p>

<h1> は大きな見出し、<p> は文章の段落です。ブラウザはタグの意味を読み取り、画面に表示します。

基本構造​

HTMLファイルは、次のような形から始めます。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>はじめてのHTML</title>
  </head>
  <body>
    <h1>はじめてのWebページ</h1>
    <p>ここに画面に表示したい内容を書きます。</p>
  </body>
</html>

head にはページの設定、body には実際に表示する内容を書きます。

よく使うタグ​

タグ役割
h1〜h6見出し
p段落
aリンク
img画像
ul / ol / liリスト
table / tr / th / td表
form / input / button入力フォーム
header / main / footerページの大きな構造

ページ構造を分かりやすくするタグ​

HTMLでは、ただ表示できればよいわけではありません。人にもブラウザにも「ここはヘッダー」「ここが本文」「ここは補足」と分かるように書くと、読みやすく保守しやすいページになります。

<header>
  <h1>Code Recipe</h1>
</header>

<main>
  <section>
    <h2>今日学ぶこと</h2>
    <p>HTMLの基本構造を学びます。</p>
  </section>
</main>

<footer>
  <p>© Code Recipe</p>
</footer>

div だけで全部を囲むより、意味のあるタグを使う方が、あとから見返したときに理解しやすくなります。

例: リンクと画像​

<a href="https://example.com">参考サイトを見る</a>

<img src="/img/sample.png" alt="サンプル画像" />

画像には alt を書きます。画像が表示されないときや、読み上げ機能を使う人に内容を伝えるためです。

一緒に使う技術​

技術役割
CSS見た目を整える
JavaScript動きをつける
Markdown文章中心のページを簡単に書く
Docusaurusドキュメントサイトを作る

最初に作るもの​

まずは自己紹介ページを作ってみましょう。

  • 名前やニックネーム
  • 好きなこと
  • 学んでいること
  • 画像
  • 参考リンク

実用的な例として、IT1-CODE-POCKET では、クイズ画面、選択肢、解説エリア、設定画面などの構造をHTMLで作っています。HTMLは、Webアプリの「どこに何を置くか」を決める土台になります。

ミニ演習: 自己紹介ページ​

次の条件を満たす index.html を作ってみましょう。

  • h1 でページタイトルを書く
  • p で自己紹介文を書く
  • ul と li で好きなことを3つ並べる
  • a で参考リンクを1つ作る
  • img で画像を1つ表示する
<!doctype html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>自己紹介</title>
  </head>
  <body>
    <h1>自己紹介</h1>
    <p>こんにちは。Web制作を学んでいます。</p>

    <h2>好きなこと</h2>
    <ul>
      <li>ゲーム</li>
      <li>音楽</li>
      <li>プログラミング</li>
    </ul>

    <a href="https://example.com">参考サイト</a>
  </body>
</html>

つまずきやすいところ​

  • 開始タグと終了タグの対応を忘れる
  • src や href のパスを間違える
  • 見た目をHTMLだけで調整しようとする
  • 見出しをデザイン目的だけで使ってしまう

よくあるエラーと直し方​

困ったこと原因の例確認すること
文字化けする文字コード指定がないmeta charset="UTF-8" があるか
画像が出ない画像パスが違うsrc の場所とファイル名
リンク先に飛べないhref が違うURLや相対パス
レイアウトが変HTMLではなくCSSの問題CSS側で余白や配置を確認
思った見出しにならない見出しレベルの使い方h1 から順番に使えているか

チェックリスト​

  • html、head、body の役割を説明できる
  • 見出しと段落を使い分けられる
  • 画像に alt を書ける
  • リンクを作れる
  • リストを作れる
  • フォーム部品の基本を知っている
  • 見た目の調整はCSSで行うと理解している

次に学ぶこと​

HTMLで構造を作れるようになったら、CSSで見た目を整えましょう。その後、JavaScriptで画面に動きをつけると、Webページがアプリに近づいていきます。