6日でできる 新HTML&CSS入門｜HTMLページの基本構成

6日でできる 新HTML&CSS入門｜HTMLページの基本構成

HTMLページは、見えない骨格から作られる。基本構成を理解して、正しく読みやすいWebページ制作の土台を身につけよう。

Webページを作るとき、最初に身につけておきたいのがHTMLページの基本構成です。HTMLは、ブラウザに対して「ここは見出しです」「ここは段落です」「ここはリストです」といった意味を伝えるための言語です。

普段ブラウザで見ているWebページは、文字や画像がきれいに並んで表示されています。しかし、その裏側にはHTMLで作られた構造があります。HTMLの構造が整っていると、ブラウザが内容を正しく読み取りやすくなり、あとから文章を追加したり、デザインを調整したりするときにも作業しやすくなります。

HTMLページの基本は、大きく分けるととてもシンプルです。最初に文書の種類を宣言し、HTML文書全体をhtmlで包み、その中にheadとbodyを配置します。headにはページの設定情報を書き、bodyにはブラウザ画面に表示したい内容を書きます。

はじめは記号が多く見えるため難しく感じるかもしれませんが、役割ごとに分けて考えると理解しやすくなります。この記事では、HTMLページの基本構成を、図や表、サンプルHTMLを使いながら、やさしく順番に確認していきます。

図1：HTMLページを支える基本構造

この図から分かること

この図は、HTMLページがいくつかの大きな部品で成り立っていることを表しています。HTMLページは、いきなり本文を書き始めるのではなく、まずページ全体の枠組みを作ります。

DOCTYPE htmlは、このファイルがHTML5の文書であることをブラウザに伝えるための宣言です。その下にhtmlがあり、HTML文書全体を包みます。htmlの中には、ページの設定を書くheadと、画面に表示する内容を書くbodyが入ります。

家を建てるときに土台や柱が必要なように、Webページにも基本となる骨格があります。この骨格を理解しておくと、今後さまざまなタグを追加するときにも、どこに何を書くべきか判断しやすくなります。

HTML文書は大きな枠組みから考える

HTML文書は、ページ全体をひとつの文書として整理するために、決まった基本構成を持っています。最初にDOCTYPE htmlを書き、その後にhtmlを置きます。htmlの中にはheadとbodyを入れます。

headは、ページの設定情報を書く場所です。ここに書いた内容は、基本的にブラウザ画面の本文としては表示されません。文字コードを指定するmeta charset="UTF-8"や、ブラウザのタブに表示されるtitleなどはheadの中に書きます。

bodyは、実際にブラウザ画面に表示される内容を書く場所です。見出し、段落、リストなど、ユーザーが読む内容はbodyの中に配置します。

HTMLの基本構成で大切なのは、ページの設定と表示する内容を分けて考えることです。headには裏側の情報、bodyには画面に見せる情報を書くと覚えておくと、HTMLの全体像がつかみやすくなります。

DOCTYPE htmlはHTML5で書くための宣言

HTMLファイルの一番上には、DOCTYPE htmlを書きます。これは、ブラウザに対して「この文書はHTML5として読み込んでください」と伝えるための宣言です。

DOCTYPE htmlは、画面上に文章として表示されるものではありません。しかし、ブラウザがHTMLを正しく解釈するために大切な役割を持っています。

この宣言がない場合でも、ページが表示されることはあります。ただし、ブラウザが古い解釈方法で表示してしまい、思った通りの表示にならない可能性があります。そのため、HTMLファイルを作るときは、最初の1行にDOCTYPE htmlを書く習慣をつけておくと安心です。

htmlはHTML文書全体を包む要素

htmlは、HTML文書全体を包む一番大きな要素です。ページの設定を書くheadも、画面に表示するbodyも、すべてhtmlの中に入ります。

日本語のページでは、html lang="ja"のようにlang属性を指定します。langはページの主な言語を表す属性です。lang="ja"と指定すると、このページは日本語で書かれていることを示せます。

この指定は、文字の大きさや色を変えるためのものではありません。検索エンジンや音声読み上げソフト、ブラウザなどがページの言語を理解しやすくするために役立ちます。

HTMLを書くときは、htmlをページ全体の大きな箱として考えると分かりやすくなります。その箱の中に、設定用のheadと、表示内容用のbodyを入れていくイメージです。

headにはページの設定情報を書く

headは、ページそのものに関する設定情報を書く場所です。ここに書いた内容は、通常、ブラウザの本文エリアには直接表示されません。けれども、ページを正しく表示したり、ページの題名を伝えたりするために欠かせない大切な部分です。

headの中でまず覚えておきたいのは、meta charset="UTF-8"とtitleです。

meta charset="UTF-8"は、文字コードを指定するために使います。日本語のWebページではUTF-8を使うことが一般的です。文字コードの指定が合っていないと、日本語が文字化けすることがあります。

titleは、ブラウザのタブやブックマークに表示されるページ名を指定します。ページの内容が伝わるように、分かりやすいタイトルを付けることが大切です。

titleは、bodyの中に表示される見出しとは役割が違います。画面内に大きく表示したい見出しはh1などで書き、ブラウザのタブに表示したい題名はtitleで指定します。

bodyにはブラウザに表示したい内容を書く

bodyは、ユーザーがブラウザで実際に見る内容を書く場所です。Webページの本文、見出し、リストなどは、基本的にbodyの中に書きます。

たとえば、ページの大きな見出しを表示したい場合はh1を使います。文章のまとまりを書きたい場合はpを使います。複数の項目を並べたい場合はul、ol、liを使います。

HTMLを学び始めたばかりのころは、headとbodyの違いを意識することがとても大切です。headはページの設定、bodyは表示される内容。この2つを分けて考えるだけでも、HTMLの読みやすさがぐっと上がります。

図2：headとbodyの役割の違い

この図から分かること

この図は、headとbodyの役割がはっきり分かれていることを示しています。

headは、ページの裏側で働く設定情報をまとめる場所です。文字コードやページタイトルなど、ページを正しく扱うための情報を書きます。

bodyは、ユーザーがブラウザ画面で見る内容を書く場所です。見出し、段落、リストなど、ページの中心となる情報を配置します。

HTMLで迷いやすいポイントのひとつが、「このタグはどこに書くのか」という点です。まずは、設定はhead、表示内容はbodyと整理して考えると、HTMLの構造を理解しやすくなります。

見出しタグはページの内容を整理するために使う

HTMLには、見出しを表すタグとしてh1からh6までが用意されています。数字が小さいほど重要度が高く、一般的には大きく表示されます。

見出しタグは、文字を大きくするためだけのものではありません。ページの内容を整理し、文章の流れを分かりやすくするために使います。

たとえば、ページ全体のテーマをh1で示し、その下に大きな項目としてh2を置き、さらに詳しい内容をh3で分けると、読み手が内容を追いやすくなります。

見出しの階層が整っているページは、ブラウザや検索エンジン、音声読み上げソフトにとっても理解しやすい構造になります。見た目だけでなく、内容の意味を伝えるために見出しを使うことが大切です。

段落タグpと改行タグbrの違い

文章を書くときによく使うのがpです。pは段落を表すタグで、文章のまとまりごとに使います。ひとつの考えや説明をひとつの段落として整理したいときに便利です。

brは、文章の途中で改行したいときに使います。brは単体で使うタグで、閉じタグはありません。

ただし、文章を何でもbrで区切ればよいわけではありません。内容のまとまりが変わる場合はpを使い、同じ段落の中で行だけを変えたい場合にbrを使うと、HTMLとして分かりやすくなります。

たとえば、説明文をいくつかのまとまりに分ける場合は、それぞれをpで分けます。住所や短いあいさつ文のように、同じ意味のまとまりの中で行だけを変えたい場合はbrを使うと自然です。

リストタグは情報を見やすく並べるために使う

複数の項目を並べたいときは、リストタグを使います。リストを使うと、文章だけで説明するよりも情報が整理され、読み手にとって分かりやすくなります。

リストには、順番のないリストと順番のあるリストがあります。

ulは、項目の順番が重要ではない場合に使います。たとえば、持ち物リスト、買い物リスト、サービスの特徴などに向いています。

olは、順番が大切な場合に使います。たとえば、作業手順、ランキング、学習の流れなどに向いています。

liは、ulやolの中に入れて、ひとつひとつの項目を表します。liだけを単独で使うのではなく、ulまたはolの中に入れて使う点を覚えておきましょう。

コード例でHTMLページの基本形を確認する

ここからは、HTMLページの基本構成をサンプルで確認していきます。サンプルは3つ用意します。どの例もCSSは使わず、HTMLだけで作成します。

まずは見た目を細かく整えることよりも、HTMLの構造そのものに慣れることを大切にしましょう。

ファイル名： lesson11_1.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>はじめてのページ</title>
</head>
<body>
  <h1>こんにちは、HTML!</h1>
  <p>これは最小構成の HTML 文書です。<br>一歩ずつ理解していきましょう。</p>
</body>
</html>

ブラウザの表示例

ブラウザで開くと、最初に大きな見出しとして「HTMLの学習を始めます」が表示されます。その下には、学習内容を説明する文章が段落として表示されます。

brを入れた位置で文章が改行されるため、段落の中では次のように2行に分かれて表示されます。

この例では、HTMLページに必要な基本の形を確認できます。DOCTYPE html、html、head、bodyがそろっていて、bodyの中に見出しと段落が入っています。

最初のうちは、この基本形を何度か書いてみることが大切です。構造に慣れてくると、新しいタグを追加するときにも迷いにくくなります。

ファイル名： lesson11_2.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>見出しの練習ページ</title>
</head>
<body>
  <h1>Web制作ノート</h1>
  <h2>HTMLの基本</h2>
  <h3>ページ構成の考え方</h3>
</body>
</html>

ブラウザの表示例

ブラウザで開くと、3段階の見出しが表示されます。一般的には、h1が最も大きく、h2、h3の順に少しずつ小さく表示されます。

この例で大切なのは、見出しを順番に使って情報の階層を作ることです。

h1はページ全体のテーマ、h2はその中の大きな話題、h3はさらに詳しい内容を示します。見出しを正しく使うと、ページ全体の流れが分かりやすくなります。

ファイル名： lesson11_3.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>学習準備リスト</title>
</head>
<body>
  <h1>HTML学習の準備</h1>
  <ul>
    <li>パソコンを起動する</li>
    <li>作業用フォルダを開く</li>
    <li>HTMLファイルを作成する</li>
  </ul>
</body>
</html>

ブラウザの表示例

ブラウザで開くと、「HTML学習の準備」という大きな見出しの下に、3つの項目が箇条書きで表示されます。

この例では、ulとliを使って箇条書きを作っています。

項目の順番が必ずしも重要ではないため、順序なしリストであるulを使っています。もし「1番目、2番目、3番目」のように作業順を強調したい場合は、olを使うとよいでしょう。

図3：ブラウザでページのソースを確認する流れ

この図から分かること

この図は、ブラウザで表示結果とHTMLソースを見比べる流れを表しています。

HTMLを書いたら、ブラウザで見た目を確認するだけでなく、ソースも確認してみると理解が深まります。画面に表示されている内容が、HTMLのどのタグによって作られているのかを見比べることで、タグの役割が分かりやすくなります。

Webページは、見た目だけを見ると完成しているように感じます。しかし、その裏側にはHTMLの構造があります。ソースを確認することで、headにはページ情報があり、bodyには表示内容があることを実際に確かめられます。

ブラウザでHTMLのソースを確認する

HTMLファイルを作成したら、ブラウザで開いて表示を確認します。表示に問題がないかを見ることはもちろん大切ですが、あわせてページのソースも確認してみましょう。

ソースを確認すると、自分が書いたHTMLがどのような構造になっているかを見直すことができます。

ページのソースを表示すると、HTMLファイルの内容をそのまま確認できます。インデントがそろっているか、開始タグと終了タグの対応が分かりやすいか、headとbodyの中身が正しく分かれているかを見てみましょう。

HTMLを書き始めたばかりのころは、閉じタグの書き忘れや、タグを書く位置の間違いが起こりやすいものです。表示結果だけで判断するのではなく、ソースを見ながら構造を確認する習慣をつけると、ミスに気づきやすくなります。

ブラウザでソースを確認する手順

１．作成した HTML ファイルをブラウザで開く

２．ページ上で右クリック→「ページのソースを表示」 を選択

３．新しいタブにフルソースが表示されるので、インデントやタグの入れ子を再確認

使用する基本タグを整理する

HTMLページの基本構成で使うタグを、役割ごとに整理しておきましょう。

最初からすべてを暗記しようとしなくても大丈夫です。まずは、HTML文書全体の流れと、よく使うタグの役割を理解することを目標にしましょう。

特に、DOCTYPE html、html、head、bodyは、HTMLページを作るたびに登場する基本構成です。h1、p、ul、liなどは、ページの内容を作るときによく使います。

タグの入れ子を意識するとHTMLは読みやすくなる

HTMLでは、あるタグの中に別のタグを入れることがあります。これを入れ子構造といいます。

たとえば、htmlの中にheadとbodyが入り、bodyの中にh1やpが入ります。リストの場合は、ulやolの中にliが入ります。

この構造を分かりやすくするためには、インデントをそろえることが大切です。インデントとは、行の先頭にスペースを入れて、階層を見やすくする書き方です。

HTMLは、インデントが多少ずれていても表示されることがあります。しかし、あとからコードを読み返したり、間違いを探したりするときには、インデントがそろっているほうが圧倒的に分かりやすくなります。

タグの入れ子を意識できるようになると、HTMLの構造が読み取りやすくなります。これは、自分でページを作るときだけでなく、他の人が書いたHTMLを読むときにも役立ちます。

CSSはHTMLの構造を理解してから学ぶと分かりやすい

HTMLは、ページの意味や構造を作るためのものです。見出し、段落、リストなどを使って、ページの内容を整理します。

一方で、文字の色、背景色、余白、レイアウトなどの見た目を整える役割は、主にCSSが担当します。

ただし、CSSを学ぶ前にHTMLの基本構成を理解しておくことが大切です。CSSは、HTMLの要素に対して見た目の指定を行うため、HTMLの構造が分かっていないと、どこにどの指定が関係しているのか判断しにくくなります。

そのため、今回のサンプルではCSSを使わず、HTMLだけでページの基本構成を確認しました。CSSについては、CSSに関する記事以降で、文字色、余白、レイアウトなどの整え方とあわせて学んでいくと理解しやすくなります。

HTMLページの基本構成を身につけるポイント

HTMLページを作るときは、まず基本の型を自然に書けるようにすることが大切です。

DOCTYPE htmlでHTML5の文書であることを示し、htmlで文書全体を包みます。その中に、ページの設定を書くheadと、画面に表示する内容を書くbodyを配置します。

ページに表示したい内容はbodyに書きます。大きな見出しにはh1、文章のまとまりにはp、文章の途中で改行したいときにはbr、項目を並べたいときにはul、ol、liを使います。

最初はタグの名前を覚えるだけでも十分です。慣れてきたら、タグの意味や使う場所も意識してみましょう。HTMLは、正しい構造で書くほど読みやすくなり、あとから内容を追加したり修正したりしやすくなります。

HTMLページの基本構成は、Web制作の出発点です。ここで土台をしっかり作っておくことで、これから学ぶCSSやJavaScriptにもスムーズにつなげられます。