HTMLの文法は、文章の役割をタグで囲み、要素を正しい順序で入れ子にするというルールが基本です。最初からすべてのタグを暗記する必要はありません。
開始タグ・内容・終了タグ、属性、空要素、文書全体のテンプレートを順番に理解すれば、自分で簡単なWebページを書けるようになります。この記事では、実際にindex.htmlを作りながらHTMLの基本文法を初心者向けに解説します。
HTMLはWebページの構造を表す言語
HTMLは「HyperText Markup Language」の略で、Webページにある文章や画像の役割と構造をブラウザへ伝えるマークアップ言語です。見出しならh1、段落ならp、リンクならaのように、内容に合う要素を使います。
HTMLが担当するのは、主に内容と構造です。文字色、余白、横並びなどの見た目はCSSで指定します。
<h1>はじめてのHTML</h1>
<p>タグの基本から学びます。</p>ブラウザはh1をページの主見出し、pを段落として解釈します。単に文字を大きくするためではなく、「この文章は何なのか」を表すことがHTMLの役割です。
HTML要素の基本文法
次のリンクを例に、HTML要素を構成する部分を確認します。
<a href="https://example.com">公式サイト</a>- 開始タグ：
<a href="https://example.com"> - 要素名：
a - 属性名：
href - 属性値：
https://example.com - 内容：公式サイト
- 終了タグ：
</a>
開始タグと終了タグで内容を囲む
多くのHTML要素は、開始タグと終了タグを1組にして内容を囲みます。終了タグは要素名の前にスラッシュ/を付けます。
<p>これは段落です。</p>
<strong>ここは重要です。</strong><p>から</p>までを、p要素と呼びます。タグは要素を作るための記号であり、開始タグ・内容・終了タグを含む全体が要素です。
属性で要素へ追加情報を付ける
属性は開始タグの中に書き、要素へ追加情報を与えます。属性名、等号、引用符で囲んだ属性値の順です。
<a href="about.html" class="button">詳しく見る</a>hrefはリンク先、classはCSSやJavaScriptから要素を選ぶための名前です。属性が複数ある場合は、半角スペースで区切ります。
引用符を省略できる場合もありますが、空白や特殊文字で意図しない解釈にならないよう、初心者は属性値をダブルクォートで囲む習慣を付けると安全です。
終了タグがない空要素もある
img、br、meta、linkなどは、中に内容を持たない空要素です。空要素には終了タグを書きません。
<img src="photo.jpg" alt="青い海の写真">
<br>HTMLでは<img ... />のように末尾へスラッシュを付ける必要はありません。付いていても解釈されますが、この記事では現在のHTMLらしい簡潔な書き方へ統一します。
画像のalt属性には、画像を見られない利用者にも内容が伝わる代替テキストを書きます。飾りだけの画像では空のalt=""を使います。
HTML要素を正しく入れ子にする
HTML要素の中には、別のHTML要素を入れられます。この構造を入れ子と呼び、外側を親要素、内側を子要素と呼びます。
<p>HTMLの<strong>基本文法</strong>を学びます。</p>この例ではp要素が親、strong要素が子です。後から開いたタグを先に閉じるようにします。
<!-- 正しい入れ子 -->
<p>HTMLの<strong>基本文法</strong>を学びます。</p>
<!-- 交差しているため誤り -->
<p>HTMLの<strong>基本文法</p></strong>誤った例では、p要素を閉じる前にstrong要素を閉じていません。ブラウザが補正して表示することはありますが、想定外の構造やCSSの崩れにつながります。
インデントで階層を見やすくする
HTMLの表示結果には、行頭の空白が直接影響しない場合が多くあります。入れ子の深さに合わせて半角スペース2つなどで字下げすると、親子関係が分かりやすくなります。
<article>
<h2>学習記録</h2>
<p>HTMLのタグを練習しました。</p>
</article>同じ階層のh2とpは同じ位置へそろえます。スペースとタブを混ぜず、プロジェクト内でルールを統一しましょう。
HTML文書の基本テンプレート
HTMLファイル全体には、ブラウザへ文書の種類や言語を伝える基本構造があります。index.htmlを作成し、次のコードを入力してください。
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>はじめてのHTML</title>
</head>
<body>
<h1>はじめてのHTML</h1>
<p>基本文法を学んでいます。</p>
</body>
</html>保存したindex.htmlをブラウザで開くと、「はじめてのHTML」という見出しと段落が表示されます。コードが表示されてしまう場合は、ファイル名がindex.html.txtになっていないか確認してください。
doctypeは現在のHTMLを使う宣言
<!doctype html>は、現在の標準的なHTMLとして文書を解釈するようブラウザへ伝える宣言です。HTML要素ではありませんが、ファイルの先頭へ書きます。
html要素は文書全体を囲む
html要素は、HTML文書のルートとなる最上位の要素です。日本語ページではlang="ja"を付け、文書の主な言語を検索エンジンや読み上げソフトへ伝えます。
headにはページの設定を書く
head要素には、文字コード、画面幅、ページタイトル、CSSファイルの読み込みなど、ページの設定を書きます。通常、headの内容は記事本文として画面には表示されません。
<meta charset="UTF-8">：日本語を含む文字の解釈方法を指定します。viewport：スマートフォンの画面幅に合わせて表示するための設定です。title：ブラウザのタブや検索結果などに使われるページタイトルです。
古いテンプレートで見かけるX-UA-Compatibleは、現在の一般的なページでは必要ありません。用途が分からない古い指定を増やさず、必要な設定から始めます。
bodyには画面へ表示する内容を書く
body要素には、見出し、段落、画像、リンク、リストなど、ページで読者が見る内容を書きます。基本的には、Webページを作る作業の多くがbodyの中で行われます。
内容に合うHTMLタグを使う
HTMLには多くの要素がありますが、最初はよく使うものから覚えれば十分です。見た目ではなく、内容の意味に合わせて選びます。
h1〜h6：見出しp：段落a：リンクimg：画像ul・ol・li：箇条書きと番号付きリストheader・nav・main・footer：ページの主な領域article・section：まとまりのある内容
たとえば、文字を大きくしたいという理由だけで見出しタグを使うのは避けます。文章の役割をHTMLで表し、文字サイズはCSSで変更します。
コメントと特殊文字の書き方
コメントはブラウザへ表示しないメモ
HTMLへ作業用のメモを残す場合は、<!--と-->で囲みます。コメントは通常のページには表示されません。
<!-- メインコンテンツの開始 -->
<main>
<h1>学習記録</h1>
</main>コメントはページのソースから確認できます。パスワード、個人情報、公開してはいけないメモは書かないでください。
タグと区別したい記号は文字参照を使う
HTMLのコードとして解釈される<や&を文章へそのまま表示したい場合は、文字参照を使います。
<p>5 < 10</p>
<p>HTML & CSS</p>ブラウザでは「5 < 10」と「HTML & CSS」と表示されます。<は小なり記号、&はアンパサンドを表します。
HTMLの基本文法を使ってページを作る
ここまでの文法を使い、プロフィールページを作ります。まず、テンプレートのbodyへ見出し、段落、リスト、リンクを追加してください。
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>私のプロフィール</title>
</head>
<body>
<header>
<h1>私のプロフィール</h1>
<p>HTMLを学習中です。</p>
</header>
<main>
<section>
<h2>学んだこと</h2>
<ul>
<li>タグと要素の違い</li>
<li>属性の書き方</li>
<li>正しい入れ子</li>
</ul>
</section>
<p><a href="https://example.com">参考サイトを見る</a></p>
</main>
</body>
</html>保存してブラウザを再読み込みすると、ページタイトル、説明、学習内容のリスト、リンクが順番に表示されます。これで、HTML文書の基本構造と入れ子を使った1ページが完成です。
次は文章や項目を自分の内容へ置き換えてみましょう。タグの組み合わせを少しずつ増やす方が、一覧を丸暗記するより文法を身に付けやすくなります。
HTMLが正しく表示されないときの確認点
- 終了タグを忘れている：開始タグと終了タグが1組になっているか確認します。
- 入れ子が交差している：後から開いた要素を先に閉じます。
- 全角記号が混ざっている：タグの
<、>、引用符は半角で入力します。 - 属性間のスペースがない：複数の属性は半角スペースで区切ります。
- ファイル名が違う：
index.htmlの拡張子が.htmlになっているか確認します。 - 変更を保存していない：ファイルを保存してからブラウザを再読み込みします。
ブラウザは多少の文法ミスを補正して表示するため、見た目だけでは誤りに気付かないことがあります。コードエディタの警告やHTML検証ツールも利用し、要素の階層を確認してください。
まとめ
HTMLの基本文法は、内容の役割に合う要素を選び、開始タグと終了タグで囲むことです。必要に応じて属性を追加し、子要素は親要素の中へ正しく入れ子にします。
まずは基本テンプレートへ見出し、段落、リスト、リンクを追加し、ブラウザで結果を確かめましょう。小さなページを何度か作ると、タグ・属性・文書構造の関係を自然に理解できます。