HTMLの基本構造とタグの書き方：最初の1ページを作る

HTMLのタグを暗記する前に、短いページを一つ作りましょう。この記事では見出し、段落、リンク、画像を配置し、ブラウザで確認するところまで進めます。装飾は別のCSSで行います。

HTMLとCSSの役割から確認したい場合は、HTML・CSS・JavaScriptの違いを先に読めます。

index.htmlを用意する

作業用フォルダを作り、VS Codeで開きます。まだ準備していない場合は、VS Codeの導入とファイル保存の手順から始めてください。新規ファイルの名前をindex.htmlにして、以下を保存してください。UTF-8で保存します。

index.html（全体を保存）

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>はじめてのWebページ</title>
</head>
<body>
  <h1>私のWeb制作ノート</h1>
  <p>今日はHTMLで、見出しと文章を配置しました。</p>
  <h2>次に作りたいもの</h2>
  <ul><li>自己紹介ページ</li><li>写真ギャラリー</li></ul>
  <p><a href="https://developer.mozilla.org/ja/">MDNでHTMLを調べる</a></p>
</body>
</html>

ファイルをブラウザで開くと見出しと文章が表示されます。コードがそのまま表示される場合は、拡張子が.html.txtになっていないか確認してください。変更後は保存してからブラウザを再読み込みします。

タグは見た目ではなく文章の役割を表す

h1はページの主題、h2はその下の節、pは段落、ulとliは順序のない一覧です。文字を大きくしたいという理由だけでh1を使うと、文書の構造が分かりにくくなります。大きさや色はCSSで調整します。

通常の要素は開始タグと終了タグで囲みます。imgなどは終了タグを持たない空要素です。タグの入れ子を崩さないことも大切です。

画像を追加する

index.htmlと同じフォルダに、自分で撮影したphoto.jpgを置く場合の例です。ファイル名は実際の名前に合わせてください。altには、その画像が伝える意味を書きます。装飾だけの画像は空のaltにします。

index.html（body内へ追加する画像の例）

<img src="photo.jpg" alt="作業机に置いたノートとパソコン" width="640" height="480">

コメントとDOCTYPE

コメントはページに表示されないメモです。コメント内に認証情報や個人情報を残してはいけません。DOCTYPEはブラウザに標準モードで解釈させるための宣言で、HTMLのタグではありません。

index.html（body内に書くコメントの例）

<!-- ここから自己紹介の節 -->

うまく表示されないときの確認順

1. 編集したファイルを保存したか。
2. ブラウザで同じファイルを開いているか。
3. タグの閉じ忘れや引用符の不足がないか。
4. 画像の名前・大文字小文字・置き場所が一致するか。

画像やCSSの参照で迷ったら相対パスの確認方法を使ってください。

この1ページから、次に何を作るか

表示できたら、h1を自分の名前、段落を自己紹介、一覧を作りたい作品へ書き換えてみてください。ブラウザのタブ名はtitle、ページ内の大見出しはh1です。片方だけを変えても、もう片方の文字は変わりません。

次はこのHTMLへCSSを読み込む練習へ進めます。色・写真・作品リンクまで付けた完成例は、自己紹介ページの作り方にまとめました。

ページを公開する段階では、タイトル・内部リンク・公開状態のSEOチェックも確認できます。

参考にした公式資料

• MDN：HTMLの基礎