03. HTMLファイルの基本構造

この章では、HTMLファイルの基本構造を学びます。

HTMLはタグを並べるだけではなく、文書全体の骨組みを作るものです。

最初に基本形を理解しておくと、CSSやJavaScriptを読み込む時にも迷いにくくなります。

HTMLファイルの基本形

HTMLファイルは、基本的に次の形から始まります。

HTMLファイルの基本形

<!doctype html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>ページタイトル</title>
        <link rel="stylesheet" href="./style.css">
    </head>
    <body>
        <header>
            <h1>サイト名</h1>
        </header>

        <main>
            <h2>見出し</h2>
            <p>本文が入ります。</p>
        </main>

        <footer>
            <p><small>&copy; Sample Site</small></p>
        </footer>
    </body>
</html>

最初は長く見えるかもしれませんが、役割ごとに分けると理解しやすくなります。

headには、ブラウザや検索エンジンに伝える情報を書きます。

bodyには、画面に表示される内容を書きます。

doctypeとhtml

<!doctype html>は、このファイルがHTML文書であることをブラウザに伝える宣言です。

通常はHTMLファイルの先頭に書きます。

html要素は、HTML文書全体を囲む要素です。

lang="ja"は、このページの主な言語が日本語であることを表します。

doctypeとhtml

<!doctype html>
<html lang="ja">
    ...
</html>

言語の指定は、翻訳機能やスクリーンリーダーなどにも関係します。

日本語サイトなら、基本的にlang="ja"を指定します。

headに書くこと

headには、ページそのものには表示されない情報を書きます。

よく使うものは次の通りです。

文字コード
viewport
ページタイトル
CSSファイルの読み込み
description
favicon
OGP

基本形では、まず次の3つを覚えておくとよいです。

headの基本

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ページタイトル</title>

charsetは文字化けを防ぐための指定です。

viewportはスマホ表示のために重要な指定です。

titleはブラウザのタブや検索結果に表示されるタイトルです。

bodyに書くこと

bodyには、画面に表示される内容を書きます。

見出し、本文、画像、リンク、リスト、フォームなどはbodyの中に入ります。

一般的なページでは、次のように大きく分けます。

bodyの大きな構造

<body>
    <header>ヘッダー</header>
    <main>ページの主な内容</main>
    <footer>フッター</footer>
</body>

headerはページやサイトの上部にある導入部分です。

mainはページの中心となる内容です。

footerはページ下部の補足情報です。

階層構造を読む

HTMLでは、要素の中に別の要素を入れることがあります。

これを入れ子、または階層構造と呼びます。

階層構造

<section>
    <h2>サービス内容</h2>
    <div>
        <h3>Webサイト制作</h3>
        <p>目的に合わせたWebサイトを制作します。</p>
    </div>
</section>

この例では、sectionの中にh2とdivがあります。

さらにdivの中にh3とpがあります。

階層構造を読み取れるようになると、CSSでスタイルを当てる時にも迷いにくくなります。

インデントをそろえる

HTMLは、インデントをそろえると読みやすくなります。

インデントとは、入れ子の深さに合わせて行頭を下げることです。

読みやすいHTML

<main>
    <section>
        <h2>見出し</h2>
        <p>本文です。</p>
    </section>
</main>

次のようにインデントが崩れると、親子関係がわかりにくくなります。

読みにくいHTML

<main>
<section>
<h2>見出し</h2>
<p>本文です。</p>
</section>
</main>

ブラウザには表示されますが、人間が読む時に理解しづらくなります。

実務では、自分だけでなく他の人もコードを見る可能性があります。

読みやすさも大切にします。

よくある失敗

headに画面表示用の本文を書いてしまう
bodyの外に要素を書いてしまう
閉じタグを書き忘れる
入れ子の順番が崩れる
titleを書かずにページを作る
viewportを書き忘れてスマホ表示が崩れる

HTMLのミスは、画面上ではすぐ気づけないこともあります。

うまく表示されない時は、タグの閉じ忘れや階層の崩れを確認します。

この章のまとめ

HTMLファイルは、doctype、html、head、bodyで構成される
headにはページ情報、bodyには画面に表示される内容を書く
header、main、footerで大きな構造を作る
階層構造とインデントを意識すると、HTMLが読みやすくなる
閉じタグ、viewport、titleの書き忘れに注意する