3-1 HTMLとは何か｜Webページの構造を作る言語

Webページを作るうえで、最初に学ぶべき言語が HTML です。
CSSやJavaScript、PHPといった技術はすべて、HTMLを土台として成り立っています。

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

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

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

この記事で学べること
HTMLとは何か
なぜHTMLが必要なのか
HTMLでできること・できないこと
HTMLの基本構造
1. 各部分の役割
タグとは何か
よく使う基本タグ
実際にHTMLを書いてみよう
HTMLが正しく書けているか確認するコツ
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の基本構造と必須タグを理解しよう

▶ 関連記事：