HTMLの全体構造：head要素とbody要素

CSSのクラスに続いて、「HTMLの全体構造」を学びました。Webページとして正しく表示されるには、特定の構造が必要です。

HTMLの基本構造

HTMLファイルには、<html> 要素の中に <head> 要素と <body> 要素が必要です。

<!DOCTYPE html>
<html>
  <head>
    <!-- ページに関する情報 -->
  </head>
  
  <body>
    <!-- 実際に表示したい内容 -->
  </body>
</html>

DOCTYPE宣言

HTMLファイルの最初の行には、DOCTYPE宣言が必要です。

<!DOCTYPE html>

これは「このファイルはHTMLで書かれています」ということをブラウザに伝えるための宣言です。

<head>要素：ページに関する情報

<head> 要素には、**ページに関する情報（設定情報）**を記述します。

重要: <head> 要素の内容は、Webページには表示されません。

head要素に書く主な内容

1. 文字コード

<head>
  <meta charset="UTF-8">
</head>

文字コードを指定することで、日本語が正しく表示されます。

2. ページタイトル

<head>
  <title>私のWebサイト</title>
</head>

<title> 要素の内容は、ブラウザのタブに表示されます。

3. CSSの読み込み

<head>
  <link rel="stylesheet" href="style.css">
</head>

外部CSSファイルを読み込むための記述です。

head要素の完全な例

<head>
  <meta charset="UTF-8">
  <title>HTMLとCSSの学習サイト</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>要素：実際に表示したい内容

<body> 要素には、実際に表示したい内容を記述します。

<body>
  <h1>ようこそ</h1>
  <p>これはWebページの本文です。</p>
  <img src="photo.jpg">
</body>

<body> 要素の中身が、ブラウザに表示されます。

完全なHTMLファイルの例

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>私のWebページ</title>
    <link rel="stylesheet" href="style.css">
  </head>
  
  <body>
    <h1>HTMLの基礎</h1>
    <p>HTMLの全体構造を学んでいます。</p>
    
    <h2>headとbodyの違い</h2>
    <p>headは設定情報、bodyは表示内容です。</p>
  </body>
</html>

なぜこの構造が必要なのか

ブラウザが正しく解釈するため

この構造に従うことで、ブラウザが「どこが設定で、どこが表示内容か」を正しく理解できます。

SEO（検索エンジン最適化）

<head> 要素に適切な情報を記述することで、検索エンジンがページを正しく理解できます。

<head>
  <meta charset="UTF-8">
  <title>HTMLとCSSの学習 - 初心者向けガイド</title>
  <meta name="description" content="HTMLとCSSの基礎を学ぶサイトです">
</head>

今日の学びのポイント

  • HTMLの基本構造: <html> → <head> + <body>
  • DOCTYPE宣言: ファイルの最初に必要 <!DOCTYPE html>
  • <head> 要素: ページに関する情報（表示されない）
    • 文字コード（<meta charset="UTF-8">）
    • ページタイトル（<title>）
    • CSSの読み込み（<link>）
  • <body> 要素: 実際に表示したい内容

この構造は、すべてのHTMLファイルの基本です。必ず覚えておきましょう。

コメント