Lesson 01 — HTML文書の骨格を理解する

HTMLファイルの全体像

AURELIONのトップページ（index.html）は、次のような大まかな構造になっています。

HTMLindex.html（骨格のみ）

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AURELION — 時を超えた精巧さ</title>
    <link href="https://fonts.googleapis.com/css2?..." rel="stylesheet">
    <style> /* CSSはここに書く */ </style>
</head>
<body>

    <nav> /* ナビゲーション */ </nav>
    <section id="hero"> /* ヒーロー */ </section>
    <section id="collections"> /* コレクション */ </section>
    <footer> /* フッター */ </footer>

    <script> /* JavaScriptはここに書く */ </script>
</body>
</html>

一見複雑に見えますが、大きく分けると 3つのブロックだけで構成されています。ひとつずつ見ていきましょう。

① DOCTYPE宣言

ファイルの一番最初に書く !DOCTYPE html は、「これはHTML5で書かれた文書ですよ」とブラウザに教えるための宣言です。

HTML

<!DOCTYPE html>   ← 「HTML5文書です」という宣言

ポイント

DOCTYPE宣言がないと、ブラウザが古い互換モードで動作してしまい、レイアウトが崩れることがあります。必ず1行目に書きましょう。

② <head> — 見えない設定エリア

head要素はブラウザやGoogleに対する「設定情報」を入れる場所です。画面には表示されません。AURELIONサイトのheadを見てみましょう。

HTMLindex.html より抜粋

<head>
    /* 文字コード：日本語など文字化けを防ぐ */
    <meta charset="UTF-8">

    /* スマホ対応：画面幅に合わせて表示する */
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">

    /* タブやGoogle検索に表示されるタイトル */
    <title>AURELION — 時を超えた精巧さ</title>

    /* Google Fontsからフォントを読み込む */
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond..."
          rel="stylesheet">

    /* CSSをここに書く */
    <style>
        /* ... */
    </style>
</head>

各行の役割まとめ

charset="UTF-8" — 文字コード設定。日本語サイトは必ずUTF-8
name="viewport" — スマホでも正しく表示するための設定
<title> — ブラウザのタブとGoogle検索結果に出るタイトル
<link rel="stylesheet"> — 外部CSSやフォントファイルの読み込み
<style> — CSSを直接ファイル内に書くエリア

③ <body> — 見えるコンテンツエリア

body要素の中に書いたものが実際にブラウザに表示されます。AURELIONサイトでは、bodyの中はいくつかのセマンティックタグで整理されています。

HTMLindex.html より抜粋

<body>

    /* ナビゲーション：サイト共通のメニュー */
    <nav id="nav">
        ...
    </nav>

    /* セクション：ページの各ブロック */
    <section id="hero">
        ...
    </section>

    <section id="collections">
        ...
    </section>

    /* フッター：ページ下部 */
    <footer>
        ...
    </footer>

    /* JavaScriptはbodyの末尾に書くのが基本 */
    <script>
        // ...
    </script>

</body>

セマンティックタグとは？

セマンティック（semantic）とは「意味を持つ」という意味です。ただの <div> タグではなく、意味のあるタグを使うことで、Googleやスクリーンリーダーがページの構造を理解しやすくなります。

<nav> — ナビゲーションメニュー
<section> — ページ内の1つのセクション（章）
<footer> — ページ下部のフッター
<header> — ページ上部のヘッダー
<main> — ページのメインコンテンツ
<article> — 記事や独立したコンテンツ

なぜ意味のあるタグを使うのか

例えばナビゲーションを <div class="nav"> と書くより <nav> と書いた方が、Googleやスクリーンリーダーはそこがナビゲーションであると即座に理解できます。SEOや表示の正確さに直結します。

id属性の使い方

AURELIONサイトでは各 section に id="hero" や id="collections" という属性が付いています。id属性は1ページに1つしか使えないユニークな識別子で、主に2つの用途で使われます。

HTML

/* 用途1：アンカーリンク（ページ内ジャンプ） */
<a href="#collections">Collections</a>
/* → クリックすると id="collections" の要素までスクロール */

/* 用途2：JavaScriptから要素を取得する */
const nav = document.getElementById('nav');
/* → id="nav" の要素をJSで操作できる */

まとめ

HTMLの基本構造は：

DOCTYPE — 「HTML5です」という宣言（1行目）
<head> — 設定情報（画面に表示されない）
<body> — 実際のコンテンツ（画面に表示される）

この3つを押さえれば、どんなHTMLファイルを見ても最初に構造が把握できます。次の記事ではCSSの変数（カスタムプロパティ）を使ったカラー管理を学びましょう。