Webサイト制作を始めたばかりの方が最初につまずきやすいのが、「HTMLの正しい文書構造」です。HTMLは“見た目を作る”ための言語だと思われがちですが、本来の役割は文書の意味を正しく伝えること。構造が整っていないと、デザインが崩れたり、SEO評価が下がったり、後々の修正が大変になったりします。この記事では、初心者が最初に理解しておくべき文書構造の基本をまとめて紹介します。

HTMLは「意味を伝える言語」

まず押さえたいのは、HTMLは「何を示すか」をタグで表現する言語だということです。太字にしたいからh1を使う、余白を開けたいからbrを連打する、といった使い方は本来の目的とは異なります。見た目の調整はCSS、動きはJavaScript、構造はHTMLと役割分担を意識しておくと、後々の作業が格段にラクになります。

headタグに必要な要素とmetaタグの重要性

文書構造を正しく書くためには、headタグの役割を理解することも大切です。headにはサイトの情報やブラウザに伝える設定をまとめます。最低限入れておきたいのは次の３つです。

1. charset（文字コード）
   日本語サイトの場合は「UTF-8」を指定します。
2. viewport（スマホ対応の基本）
   スマホ表示で崩れないためには必須です。
3. meta description
   検索結果に表示される要約で、SEOにも関わります。

また、SNSでシェアしたときに表示される画像やタイトルを設定できるOGPタグも、サイトの印象に大きく関わります。初心者が意外と抜かしやすいので、head内の設定は丁寧に整えておきましょう。

意味に合ったタグを選ぶ（div乱用を卒業）

初心者に多いのが「とりあえずdivで囲む」書き方です。divには意味がなく、ただの箱としての役割しかありません。構造を正しく伝えるには、header、main、section、article、footer などのセマンティックタグを目的に応じて使い分けることが大切です。

たとえばページの大枠は header / main / footer で構成し、その中のまとまりに section を使います。記事やブログのように“独立した内容”には article が最適です。意味に沿ったタグを使うことで、検索エンジンにもユーザーにも理解しやすい構造になります。

また、見出しタグ（h1〜h6）はデザインではなく“文章の階層”を示すもの。ページのタイトルにはh1、セクションのタイトルにはh2、その下の小見出しにはh3というように使い分け、文字サイズはCSSで調整しましょう。

ここまで紹介した「header / main / section / article」「h1〜h3 の使い方」をまとめた、シンプルな文書構造のサンプルです。
実際にどのように書くのか見てみましょう。

See the Pen Untitled by kotetsu (@zupshihe-the-encoder) on CodePen.

正しい入れ子（ネスト）が文書を壊さない

もうひとつ重要なのが、タグの入れ子構造です。開いたら必ず閉じる、親子関係を守る、入れられないタグの中にブロック要素を入れないなど、基本ですが非常に大切なポイントです。特に <p> の中に <div> を入れてしまうミスは初心者に多いので要注意。ネストが崩れるとレイアウトが予期せず壊れ、原因の特定にも時間がかかります。

インデントをそろえるだけでも、タグの階層が見やすくなりミスを大きく減らせます。可読性は自分の作業効率にも直結するので、初期段階から意識しておくのがおすすめです。

まとめ

HTMLは「意味」や「構造」を伝えるための言語です。headタグの設定、セマンティックタグの使い分け、見出しタグの役割、正しい入れ子構造など、基本を押さえるだけでサイトの品質は大きく向上します。最初は難しく感じても、一度理解すれば今後の制作が圧倒的にスムーズになります。ぜひ今回紹介したポイントを意識しながら、正しい文書構造でHTMLを書いてみてください。

Webサイト、LP制作やお仕事の依頼、ご相談など
お気軽にお問い合わせください。