フォームを作れるようになると、
次に必ず出てくる疑問があります。

・送信ボタンを押すと、裏側で何が起きているのか
・GET と POST は何が違うのか
・URLに文字が付くのはなぜか

この仕組みを理解せずに進んでしまうと、
PHPの学習で確実につまずきます。

この記事では、
HTMLフォーム送信の仕組みを「概念レベル」で整理し、
GET / POST の違いを初心者向けに解説します。

この記事で学べること

・フォーム送信時に起きていること
・GETとPOSTの役割の違い
・URLとデータの関係
・PHP学習につながる考え方

フォーム送信時に何が起きているのか

フォーム送信とは、
ブラウザからサーバーへデータを送る処理です。

流れを大まかに整理すると、次のようになります。

・ユーザーが入力する
・送信ボタンを押す
・ブラウザがデータをまとめる
・サーバーにリクエストを送る

HTMLは、
この「送るきっかけ」を作っているだけです。

formタグの役割を思い出す

formタグは、
次の情報をブラウザに伝えています。

・どこに送るか（action）
・どうやって送るか（method）

この2つによって、
送信の動作が決まります。

actionとは何か

actionは、
送信先のURL を指定する属性です。

送信ボタンが押されると、
ブラウザは action に指定されたURLへ
データを送信します。

この送信先で、
PHPなどのサーバー処理が行われます。

methodとは何か

methodは、
データの送り方 を指定する属性です。

HTMLフォームでは、
主に次の2種類が使われます。

・GET
・POST

この違いを理解することが、
この記事の最大の目的です。

GETとは何か

GETは、
URLにデータを付けて送信する方法です。

特徴としては、

・送信内容がURLに表示される
・ブックマークや共有が可能
・データ量に制限がある

といった点があります。

GETが使われる場面

GETは、
次のような場面で使われます。

・検索フォーム
・ページ切り替え
・条件指定

「データを取得するだけ」
という用途に向いています。

POSTとは何か

POSTは、
URLとは別にデータを送信する方法です。

特徴としては、

・URLに内容が表示されない
・大量のデータを送れる
・セキュリティ面で有利

という点があります。

POSTが使われる場面

POSTは、
次のような場面で使われます。

・お問い合わせフォーム
・ログイン処理
・登録・更新処理

「データを送って処理する」
場面で使われます。

GETとPOSTの違いまとめ

ここで、
両者の違いを整理します。

・GET
　URLにデータが付く
　取得・検索向き

・POST
　URLに表示されない
　送信・登録向き

迷った場合は、
個人情報や重要なデータを含むならPOST
と覚えておけば問題ありません。

なぜURLにデータが見えるのか

GETで送信すると、
URLの後ろに
「?」や「&」を含む文字列が付きます。

これは、
クエリ文字列 と呼ばれる仕組みです。

この文字列には、
name属性と入力値の組み合わせが含まれています。

name属性が重要な理由

フォーム送信では、
name属性がデータのキー になります。

サーバー側では、

・どの入力欄の値か
・どの名前で送られてきたか

を name を元に判断します。

nameがなければ、
入力されていても
データとして認識されません。

HTMLは「送る」までが役割

ここで重要な考え方です。

HTMLは、

・入力画面を作る
・データを送る

ここまでが役割です。

・受け取る
・処理する
・保存する

これらは、
PHPなどのサーバー側言語の役割になります。

PHP学習への橋渡し

ここまで理解できていれば、
次のステップは明確です。

・サーバーは何を受け取っているのか
・送られたデータはどこにあるのか
・どうやって表示・処理するのか

これらを扱うのが、
次章の PHP基礎 です。

よくある勘違い

最後に、
初心者がよく混乱する点を整理します。

・GETが危険、POSTが安全というわけではない
・POSTでも暗号化されるわけではない
・セキュリティは別途対策が必要

GET / POST は、
用途による使い分け が重要です。

まとめ

HTMLフォーム送信は、
ブラウザとサーバーをつなぐ重要な仕組みです。

・action：送信先
・method：送り方
・GET：取得向き
・POST：送信向き

この仕組みを理解できれば、
PHPの学習が「意味の分からない作業」ではなく
つながりのある理解 に変わります。

これで、
3章 HTML基礎は完全に終了です。

次に読むべき記事

▶ 次の記事
4-1 CSSとは何か｜HTMLとCSSの役割分担

▶ 関連記事
3-6 フォームの基本構造とinputタグの使い方

ここから先、
Webページを「見るだけのもの」から
「ユーザーが操作できるもの」 に変えるために必要なのが
フォーム（form） です。

・お問い合わせフォーム
・ログイン画面
・検索フォーム

これらはすべて、HTMLフォームを基盤として作られています。

この記事では、
フォームの基本構造と、inputタグの正しい使い方を
初心者向けに整理して解説します。

この記事で学べること

・HTMLフォームの役割
・formタグの基本構造
・inputタグの種類と使いどころ
・labelの重要性
・フォームが次のPHP学習につながる理由

フォームとは何か

フォームとは、
ユーザーからの入力を受け取るための仕組みです。

フォームを使うことで、

・文字を入力する
・ボタンを押す
・選択肢を選ぶ

といった操作が可能になります。

入力されたデータは、
最終的に サーバー側（PHPなど） に送られます。

フォームの基本構造

HTMLフォームは、
大きく次の要素で構成されます。

・formタグ
・入力欄（inputなど）
・送信ボタン

これらがセットになって、
初めてフォームとして機能します。

formタグの役割

formタグは、
「ここからここまでがフォームです」
とブラウザに伝えるためのタグです。

formタグ自体は見た目を持ちませんが、
内部にある入力欄やボタンをまとめる重要な役割を持ちます。

formタグで重要な属性

formタグには、
特に重要な属性が2つあります。

・action
・method

これらは、
次の記事（フォーム送信の仕組み）で詳しく解説しますが、
ここでは「存在を知っておく」だけで十分です。

inputタグとは何か

inputタグは、
ユーザーが実際に入力するためのタグです。

1つのinputタグで、
さまざまな入力欄を表現できます。

入力の種類は、
type属性によって決まります。

よく使うinputタグの種類

ここでは、
Web開発で特によく使われる type を紹介します。

text（テキスト入力）

文字を入力するための最も基本的な入力欄です。

使いどころ
・名前
・タイトル
・自由入力欄

password（パスワード）

入力内容が伏字になる入力欄です。

使いどころ
・ログイン画面
・パスワード設定

email（メールアドレス）

メールアドレス入力専用の入力欄です。

特徴
・入力形式のチェックが行われる
・スマートフォンでは専用キーボードが表示される

submit（送信ボタン）

フォームの内容を送信するためのボタンです。

このボタンが押されることで、
フォーム送信が行われます。

textarea（複数行入力）

textareaは、
複数行の文章を入力するためのタグです。

使いどころ
・お問い合わせ内容
・コメント欄

短い入力は input、
長文は textarea
と使い分けるのが基本です。

labelタグの重要性

labelタグは、
入力欄の説明をするためのタグです。

見た目だけでなく、
操作性・アクセシビリティの面でも非常に重要です。

labelを正しく使うことで、

・入力欄をクリックしやすくなる
・何の入力欄か分かりやすくなる
・音声読み上げにも対応できる

といったメリットがあります。

name属性は必須

フォームを扱ううえで、
絶対に忘れてはいけないのが name属性 です。

name属性は、
入力されたデータの「名前」 になります。

この name を使って、
PHPなどのサーバー側で値を受け取ります。

nameがなければ、
入力されていてもデータは送られません。

フォームは「HTMLだけでは完結しない」

ここで重要なポイントです。

HTMLフォームは、
入力画面を作るだけです。

・入力チェック
・データ保存
・メール送信

これらは、
PHPやJavaScriptと組み合わせて初めて実現します。

そのため、
フォームは
HTMLとサーバー処理をつなぐ架け橋
と言えます。

初心者がよくやる間違い

フォームでありがちなミスを整理します。

・name属性を付け忘れる
・labelを使わない
・inputのtypeを意識していない
・見た目だけ整えて満足してしまう

フォームは、
「送信されて初めて完成」
という意識を持つことが大切です。

次の学習につながるポイント

ここまで理解できれば、
次は次の疑問が自然に出てきます。

・送信すると何が起きているのか
・GETとPOSTの違いは何か
・URLに何が含まれているのか

次の記事では、
フォーム送信の仕組みそのもの
を詳しく見ていきます。

まとめ

HTMLフォームは、
Web開発における非常に重要な要素です。

・formが全体をまとめる
・inputやtextareaで入力を受け取る
・name属性がデータの鍵になる

この理解があることで、
次のPHP学習がスムーズにつながります。

次に読むべき記事

▶ 次の記事
3-7 HTMLフォーム送信の仕組みを理解する（GET / POST）

▶ 関連記事
3-3 HTML属性とは？class・id・nameの違い
3-5 セマンティックHTMLとは？正しい構造を書く理由

・とりあえず div で囲っていけば動く
・見た目は問題ないけど、これで正しいのか不安
・なぜ header や footer を使う必要があるのか

この疑問に答えるのが、
セマンティックHTML（Semantic HTML） という考え方です。

この記事では、
セマンティックHTMLとは何か
なぜ正しい構造を書く必要があるのか
を、初心者向けに整理して解説します。

この記事で学べること

・セマンティックHTMLの意味
・セマンティックでないHTMLとの違い
・よく使うセマンティックタグ
・正しい構造を書くメリット

セマンティックHTMLとは何か

セマンティックHTMLとは、
「見た目」ではなく「意味」でHTMLを書く考え方です。

HTMLタグには、それぞれ
「これは見出し」
「これはナビゲーション」
「これは本文」
といった意味があります。

その意味を正しく使って構造を作ることを、
セマンティックHTMLと呼びます。

セマンティックでないHTMLの例

HTMLを書き始めたばかりの頃は、
次のような構造になりがちです。

・すべて div で囲む
・クラス名だけで役割を表現する
・HTMLを見ても構造が分かりにくい

見た目はCSSで整えれば問題ありませんが、
HTML自体が何を表しているのか分かりにくい
という問題があります。

セマンティックHTMLの例

セマンティックHTMLでは、
要素の役割に応じたタグを使います。

・ページのヘッダー → header
・ナビゲーション → nav
・メインコンテンツ → main
・セクション → section
・フッター → footer

HTMLを見るだけで、
ページ構造が把握できる状態を目指します。

よく使うセマンティックタグ一覧

ここでは、
特によく使われるセマンティックタグを整理します。

header

ページやセクションの
導入部分を表します。

使いどころ
・サイトロゴ
・ページタイトル
・ヘッダー内の要素

nav

ナビゲーションを表します。

使いどころ
・グローバルメニュー
・ページ内リンク一覧

すべてのリンクを nav に入れる必要はありません。
「ナビゲーションとしての役割」を持つ部分に使います。

main

ページの
主なコンテンツ部分を表します。

原則
・1ページに1つ
・ページの中心となる内容

section

意味のある
ひとまとまりの内容を表します。

使いどころ
・章
・トピックごとの区切り

section の中には、
見出しを含めるのが基本です。

article

独立して成立するコンテンツを表します。

使いどころ
・ブログ記事
・ニュース記事
・カード型コンテンツ

「この部分だけ切り出しても意味が通じるか」
が判断基準になります。

footer

ページやセクションの
補足情報を表します。

使いどころ
・著作権表記
・関連リンク
・補足情報

なぜセマンティックHTMLが重要なのか

「divでも動くのに、
なぜわざわざタグを使い分けるのか」
と感じるかもしれません。

理由は、大きく3つあります。

理由① SEOに強くなる

検索エンジンは、
HTML構造を解析して
ページ内容を理解しています。

セマンティックHTMLを書くことで、

・どこが本文か
・どこがナビゲーションか

を正しく伝えられ、
SEO評価が安定しやすくなります。

理由② コードが読みやすくなる

セマンティックタグを使うと、
HTMLを見るだけで構造が分かります。

・自分が後から見返したとき
・他人がコードを読むとき

どちらの場合でも、
理解しやすいコードになります。

理由③ CSS・JavaScriptが書きやすくなる

構造が整理されていると、

・CSSの指定範囲が明確になる
・JavaScriptで要素を取得しやすくなる

結果として、
修正や追加がしやすくなります。

セマンティックHTMLとdivの関係

ここで重要なのは、
divが不要になるわけではない という点です。

考え方としては、

・意味がある → セマンティックタグ
・意味がない / レイアウト用 → div

という使い分けになります。

すべてをセマンティックタグで書こうとせず、
適材適所で使うことが大切です。

初心者が意識すべきポイント

最初から完璧を目指す必要はありません。

まずは次の点を意識してください。

・header / main / footer を使う
・ナビゲーションは nav にする
・意味のあるまとまりは section にする

これだけでも、
HTMLの質は大きく向上します。

まとめ

セマンティックHTMLは、
正しい構造でWebページを書くための考え方です。

・見た目ではなく意味でタグを選ぶ
・HTMLだけで構造が伝わる
・SEO・保守性・可読性が向上する

この考え方を身につけることで、
「とりあえず動くHTML」から
「正しく書かれたHTML」 へとレベルアップできます。

次は、
ユーザー入力を扱うためのHTMLフォーム
について学んでいきましょう。

次に読むべき記事

▶ 次の記事
3-6 フォームの基本構造とinputタグの使い方

▶ 関連記事
3-4 HTMLでよく使うタグ一覧と基本的な使い方

HTMLには多くのタグがありますが、
日常的に使うものは限られています。

・どのタグを使えばいいか分からない
・divばかり使ってしまう
・正しいタグ選びに自信がない

こうした状態を抜け出すために、
この記事では Web開発で頻繁に使われるHTMLタグ を厳選し、
「どんな場面で使うのか」を中心に整理します。

この記事で学べること

・HTMLでよく使う基本タグ一覧
・各タグの役割と使いどころ
・divとspanの考え方
・正しいタグ選びの基準

見出し系タグ

h1 〜 h6

見出しを表すタグです。

役割
・ページやセクションの見出しを表す
・内容の階層構造を作る

使い分けの考え方
・h1：ページ全体のタイトル
・h2：大きな章
・h3：章の中の見出し

見た目の大きさではなく、
意味の階層で選ぶことが重要です。

文章・テキスト系タグ

p（段落）

文章を表す最も基本的なタグです。

使いどころ
・説明文
・本文
・文章のまとまり

改行目的で使うのではなく、
意味のある文章単位で使います。

br（改行）

文章内での改行を表します。

使いどころ
・住所
・詩や改行が意味を持つ文章

多用すると構造が分かりにくくなるため、
基本は p タグを優先します。

リンク・画像系タグ

a（リンク）

別ページや別サイトへ移動するためのタグです。

使いどころ
・ページ遷移
・外部リンク

リンクの文字は、
「ここをクリック」ではなく
内容が分かる文章にするのが望ましいです。

img（画像）

画像を表示するためのタグです。

重要ポイント
・alt属性は必ず指定する
・画像の内容を簡潔に説明する

altは、
SEOやアクセシビリティに大きく影響します。

グループ化・レイアウト用タグ

div（ブロック要素）

意味を持たない汎用的なコンテナです。

使いどころ
・レイアウト調整
・複数要素のグループ化
・CSS指定の単位

「意味がない」からこそ、
使いすぎない意識も重要です。

span（インライン要素）

文章の一部分を囲むためのタグです。

使いどころ
・文章中の一部を装飾
・特定の文字だけCSSを当てたい場合

divが「箱」なら、
spanは「マーカー」のような存在です。

リスト系タグ

ul / ol / li

複数の項目を一覧表示するためのタグです。

役割
・ul：順序なしリスト
・ol：順序ありリスト
・li：項目

ナビゲーションメニューや
手順一覧などで頻繁に使われます。

テーブル系タグ（基本理解）

table / tr / th / td

表形式で情報を整理するためのタグです。

使いどころ
・表データ
・比較表

レイアウト目的で使うのは避け、
データ表現専用として使います。

フォーム系タグ（概要）

フォームに関するタグは、
次章以降で詳しく扱いますが、
ここでは全体像だけ押さえておきます。

代表例
・form
・input
・textarea
・button

フォームは、
PHPやJavaScriptと強く結びつく重要な要素です。

タグ選びで迷ったときの基準

タグ選びで迷ったら、
次の順番で考えてください。

・この要素は何を表しているか
・見出しか、文章か、グループか
・意味のあるタグが存在するか

「とりあえずdiv」は避け、
意味を持つタグを優先することが
良いHTMLを書く第一歩です。

なぜタグ選びが重要なのか

正しいタグ選びは、
次の点に大きく影響します。

・CSSが書きやすくなる
・JavaScriptで操作しやすくなる
・SEO評価が安定する
・コードが読みやすくなる

HTMLは、
後工程すべての土台です。

まとめ

HTMLでよく使うタグは、
役割ごとに整理すると理解しやすくなります。

・見出し系
・文章系
・リンク・画像
・グループ化
・リスト

すべてを暗記する必要はありませんが、
「この場面ではこのタグ」
という判断ができるようになることが目標です。

次は、
HTMLの構造をさらに洗練させる書き方
を学んでいきましょう。

次に読むべき記事

▶ 次の記事
3-5 セマンティックHTMLとは？正しい構造を書く理由

▶ 関連記事
3-3 HTML属性とは？class・id・nameの違い

・class
・id
・name

「何となく見たことはあるけど、
何が違うのかよく分からない」
という状態になりやすい部分です。

しかし、
この 属性の理解 は、
CSS・JavaScript・PHPすべてに直結します。

この記事では、
HTML属性とは何かから始めて、
class・id・name の役割と使い分けを
初心者向けに整理して解説します。

この記事で学べること

・HTML属性とは何か
・class の役割
・id の役割
・name の役割
・それぞれの正しい使い分け

HTML属性とは何か

HTML属性とは、
タグに追加情報を与えるためのものです。

タグだけでは表現できない情報を、
属性として指定します。

例としては、

・どこにリンクするか
・どのグループに属するか
・どの名前でデータを送るか

といった情報を属性で指定します。

属性はタグの「補足情報」

HTMLタグが「名詞」だとすると、
属性は「説明文」のようなものです。

・タグ：要素の種類
・属性：その要素の性質や役割

という関係になります。

class属性とは何か

class は、
複数の要素をまとめて扱うための属性です。

主に次の用途で使われます。

・CSSでデザインを指定する
・JavaScriptで要素を取得する

classの特徴

class には、次の特徴があります。

・同じ名前を複数の要素に使える
・デザイン指定に最もよく使われる
・1つの要素に複数指定できる

「この見た目のグループ」
を作るイメージです。

id属性とは何か

id は、
ページ内で唯一の要素を識別するための属性です。

idの特徴

id には、次のルールがあります。

・同じページ内で1回しか使えない
・特定の1要素を指定する
・JavaScriptやアンカーリンクで使われる

「このページでこの1つ」
を指し示すための属性です。

class と id の違いまとめ

ここで、
class と id の違いを整理します。

・class
　複数要素に使える
　主にデザインやグループ指定

・id
　1ページに1つだけ
　特定要素の識別

初心者のうちは、
迷ったら class を使う
くらいの感覚で問題ありません。

name属性とは何か

name は、
フォーム送信時に使われる属性です。

特に、
PHPなどのサーバー側処理と強く関係します。

nameの役割

フォームで入力された値は、
name 属性をキーとして
サーバーに送信されます。

そのため、
name がなければ、
入力された値を受け取ることができません。

class・id・name の使い分けイメージ

役割を簡単に整理すると、次のようになります。

・class
　見た目・グループ分け

・id
　ページ内の目印

・name
　データ送信用の名前

それぞれ目的が違うため、
同じ名前を付ける必要はありません。

初心者がよくやる間違い

ここで、
よくあるミスを押さえておきましょう。

idを何度も使ってしまう

idは、
ページ内で1回だけが原則です。

複数使いたい場合は、
classを使いましょう。

デザイン目的でnameを使う

nameは、
見た目指定には使いません。

CSSやJavaScriptで扱う場合は、
class や id を使います。

何となく全部付けてしまう

必要のない属性を
何となく付けると、
後で管理が大変になります。

「何のために使うのか」
を意識して付けることが大切です。

なぜ属性の理解が重要なのか

この理解があいまいだと、

・CSSが思った通りに効かない
・JavaScriptで要素が取得できない
・PHPでフォームの値が受け取れない

といった問題が起きます。

逆に言えば、
ここを理解できれば
Web開発の基礎が一気に安定します。

まとめ

HTML属性は、
タグに意味と役割を追加する重要な要素です。

・class：グループ・デザイン用
・id：ページ内で唯一の識別子
・name：データ送信用

この使い分けを意識することで、
CSS・JavaScript・PHPの理解が
自然につながっていきます。

次は、
HTMLでよく使うタグを実際に組み合わせる方法
を学んでいきましょう。

次に読むべき記事

▶ 次の記事
3-4 HTMLでよく使うタグ一覧と基本的な使い方

▶ 関連記事
3-2 HTMLの基本構造と必須タグを理解しよう

ここでは、実際にHTMLを書くために必要な
基本構造と、必ず使うタグを整理していきます。

この内容は、CSS・JavaScript・PHPすべての土台になります。
細かく暗記する必要はありませんが、
「こういう形がある」という理解を持つことが重要です。

HTMLの基本構造を理解する

HTMLには、必ず守るべき基本構造があります。

最小構成のHTMLは、次のような形です。

・DOCTYPE宣言
・htmlタグ
・headタグ
・bodyタグ

これらが揃って、1つのHTMLページになります。

※ 実際のHTMLファイルでは、タグの < > をそのまま使用します

HTML文書の全体像

HTMLファイルは、次のような構造になっています。

・文書の種類を宣言
・HTML全体を囲む
・画面に表示されない情報
・画面に表示される内容

この「役割分担」を理解することが大切です。

DOCTYPE宣言とは

DOCTYPE宣言は、

「このHTMLはHTML5で書かれています」

とブラウザに伝えるための宣言です。

これがないと、
ブラウザが古い仕様で解釈してしまうことがあります。

htmlタグの役割

htmlタグは、
HTML文書全体を囲むためのタグです。

この中に、
head と body が入ります。

headタグの役割

headタグには、
画面には直接表示されない情報を書きます。

主な内容は次のとおりです。

・文字コードの指定
・ページタイトル
・CSSやJavaScriptの読み込み

headは、
「ページの設定を書く場所」
と考えると分かりやすいです。

bodyタグの役割

bodyタグの中に書いた内容が、
実際にブラウザに表示されます。

見出し、文章、画像、リンクなど、
ユーザーが目にするものは、すべて body の中です。

見出しタグ（h1〜h6）

見出しを表すタグが、h1〜h6です。

・h1：ページ全体の見出し
・h2：章の見出し
・h3：節の見出し

数字が小さいほど重要度が高くなります。
サイズ目的で使うのではなく、
意味の階層として使うことが重要です。

段落タグ（p）

文章を書くときは、pタグを使います。

段落ごとに意味のあるまとまりを作ることで、
読みやすく、構造の分かりやすいHTMLになります。

リンクタグ（a）

リンクを作るときは、aタグを使います。

リンク先のURLは、
href属性で指定します。

画像タグ（img）

画像を表示するには、imgタグを使います。

画像には、
必ず説明文（alt）を付ける
という点を覚えておきましょう。

これは、SEOやアクセシビリティの面でも重要です。

divタグとは何か

divタグは、
意味を持たない汎用的な箱です。

複数の要素をまとめたり、
CSSでレイアウトを指定するために使われます。

HTMLを書くときの考え方

HTMLを書くときは、
次の点を意識してください。

・見た目ではなく意味でタグを選ぶ
・正しい構造を作る
・後からCSSやJavaScriptで扱いやすくする

HTMLは、
Webページの「設計図」のような存在です。

よくある間違い

初心者がつまずきやすいポイントです。

・タグの閉じ忘れ
・入れ子構造のミス
・全角文字の使用
・拡張子が .html になっていない

表示がおかしい場合は、
まずこのあたりを確認しましょう。

まとめ

HTMLの基本構造と必須タグは、
Web開発のすべての土台です。

・決まった構造がある
・タグには役割がある
・正しいHTMLが後の学習を楽にする

次は、
HTML属性（class・idなど）の役割
について学んでいきます。

次に読むべき記事

▶ 次の記事
3-3 HTML属性とは？class・id・nameの違い

・HTMLは何をするためのものなのか
・なぜ最初にHTMLを学ぶ必要があるのか
・CSSやJavaScriptとは何が違うのか

これを曖昧なまま進むと、
「何となく動くけど、よく分からない」状態になりやすくなります。

この記事では、
HTMLの役割と考え方を、実際のコードを交えながら初心者向けに解説します。

この記事で学べること

・HTMLとは何か
・HTMLが担っている役割
・Webページの基本構造
・CSSやJavaScriptとの関係

HTMLとは何か

HTMLとは、
Webページの構造を定義するための言語です。

正式名称は
HyperText Markup Language
ですが、難しく考える必要はありません。

HTMLは、
「この文章は見出し」
「ここは本文」
「これはリンク」
といった 意味や構造をブラウザに伝える役割 を持っています。

なぜHTMLが必要なのか

もしHTMLがなければ、
ブラウザは
「どこが見出しで、どこが本文なのか」
を判断できません。

HTMLを使うことで、
Webページの骨組みを作り、
その上にCSSやJavaScriptを乗せていきます。

よくある例えとしては、
・HTML：骨組み
・CSS：見た目
・JavaScript：動き
という関係です。

HTMLでできること・できないこと

ここで、HTMLの役割をはっきりさせておきましょう。

HTMLでできること
・文章の構造を作る
・見出しや段落を定義する
・リンクや画像を配置する
・フォームを作る

HTMLではできないこと
・デザインを細かく整える
・画面に動きを付ける
・データを保存・処理する

これらは、
CSS・JavaScript・PHPの役割になります。

HTMLの基本構造

HTMLには、
必ず決まった基本構造があります。

最小構成のHTMLは、次のようになります。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>サンプルページ</title>
  </head>
  <body>
    <h1>Hello HTML</h1>
    <p>これはHTMLのサンプルです。</p>
  </body>
</html>

各部分の役割

・<!DOCTYPE html>
→ HTML5で書かれていることを宣言

・<html>
→ HTML全体の範囲

・<head>
→ ページの設定情報

・<body>
→ 実際に画面に表示される内容

最初は、
「こういう形がある」
と理解できていれば十分です。

タグとは何か

HTMLは、
タグと呼ばれる記号で構成されています。

例

<p>文章</p>

・<p>：開始タグ
・</p>：終了タグ

このように、
囲むことで意味を持たせるのがHTMLの基本です。

よく使う基本タグ

ここでは、
必ず使う基本タグだけを紹介します。

・h1〜h6：見出し
・p：段落
・a：リンク
・img：画像
・div：まとまり

詳細は、
次の記事から一つずつ解説していきます。

実際にHTMLを書いてみよう

ここで、
実際にHTMLファイルを作ってみましょう。

① ファイルを作成

ドキュメントルート（htdocs）の中に、
次のファイルを作成します。

index.html

② 中身を書く

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>はじめてのHTML</title>
  </head>
  <body>
    <h1>はじめてのHTML</h1>
    <p>HTMLの学習を始めました。</p>
  </body>
</html>

③ ブラウザで確認

ブラウザで、
次のURLにアクセスします。

http://localhost/

文字が表示されれば成功です。

HTMLが正しく書けているか確認するコツ

初心者がつまずきやすいポイントです。

・タグの閉じ忘れ
・全角文字の混入
・ファイル拡張子が .html になっていない

エラーが出ない代わりに、
表示が崩れる形で問題が現れます。

HTMLは「正しさ」が重要

HTMLは、
見た目よりも 構造と意味 が重要です。

正しいHTMLを書くことで、
・CSSが当てやすくなる
・JavaScriptで操作しやすくなる
・検索エンジンに評価されやすくなる

というメリットがあります。

学習の進め方について

この後の記事では、
HTMLタグを一つずつ学びながら、
実際にページを組み立てていきます。

最初は、
完璧に覚えようとしなくて大丈夫です。

「こういう役割がある」
という感覚を大切にしてください。

まとめ

HTMLは、
Webページの構造を作るための最も重要な言語です。

・HTMLは骨組み
・CSSやJavaScriptの土台
・正しい構造が後の学習を楽にする

次は、
HTMLの基本構造と必須タグについて、
もう少し詳しく見ていきましょう。

次に読むべき記事

▶ 次の記事：
3-2 HTMLの基本構造と必須タグを理解しよう

▶ 関連記事：