HTMLの基本構造

なぜ理解が必要なのか？

📌「Webページを作りたいけど、何から始めればいいのかわからない」
📌「コードって難しそう…」
📌「タグって何？」

そんな人にまず知ってほしいのが、HTMLの基本構造です。
HTMLは「文章の構造を記述する言語」で、Webページの“骨組み”を作る役割を持っています。

用語意味
HTMLWebページの構造を作る言語
タグ指示を出すための記号（例：<p>や<h1>）
ブラウザHTMLを読み込んで表示するソフト（例：Chrome、edge）

✅ 最初に正しい構造を覚えておくと、CSSの理解もスムーズになります。

操作の流れ

以下は最もシンプルなHTMLの基本構造です。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>はじめてのHTML</title>
  </head>
  <body>
    <h1>こんにちは！</h1>
    <p>これは最初のWebページです。</p>
  </body>
</html>

📌 よく使うタグの意味も覚えておきましょう

タグ役割
<html>HTML文書のスタートと終わり
<head>タイトルや設定などの情報
<body>実際に表示される内容
<h1>〜<h6>見出し
<p>段落（文章）

実際にやってみよう！

【課題：基本構造を使って自己紹介ページを作ろう】

  1. エディタ（例：メモ帳 ）を開いて、新しいファイルを作成
  2. 上記のHTML構造をベースに、以下の内容を追加：
  • タイトル：あなたの名前
  • <h1>：こんにちは、○○です！
  • <p>：趣味や得意なことを簡単に紹介
  1. 「rensyuu.html」として保存し、ブラウザで表示を確認

解答

よくあるミス・注意点

  • ❌ <!DOCTYPE html> を忘れてレイアウト崩れ → 必ず1行目に記述
  • ❌ <html> や <body> の閉じタグを忘れる → 正しく表示されない
  • ❌ 半角・全角の混同 → タグはすべて半角英数字！

補足動画（後日追加予定）

わからなかったらQ&Aへ

Q＆A入力フォームへ
ホーム
HTML＆CSS