Frontend Academy · レッスン

ドキュメント構造: DOCTYPE、html、head、body

DOCTYPE宣言、htmlルート、メタデータ用のhead、コンテンツ用のbodyを含む有効なHTML5ドキュメントをゼロから記述します。

「ドキュメント構造: DOCTYPE、html、head、body」はCoddyKit上の無料Frontend Academyレッスンです。これはレッスン1/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはFrontend Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Frontend Academyコースには全4レッスンが含まれています。

すべてのHTMLドキュメントに同じ骨格がある理由

有効なHTML5ドキュメントは、必ずDOCTYPE宣言で始まり、htmlルート要素を含み、その中にメタデータ用のheadセクションと、表示されるコンテンツ用のbodyセクションがあります。この構造を理解することが最初の一歩です。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Page</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>

DOCTYPE宣言

<!DOCTYPE html>はHTMLタグではなく、ページを標準モードで表示するようブラウザーに指示する命令です。これがないと、ブラウザーは「quirks mode（互換モード）」に戻り、ページが一貫しない表示になります。必ず1行目に記述してください。

<html>要素とlang属性

<html>要素はドキュメントのルートです。lang属性を追加して、ページの言語を指定してください。スクリーンリーダーはこれを使って適切な発音エンジンを選び、検索エンジンは地域に合わせた検索結果の表示に利用します。

<html lang="en">
<!-- or -->
<html lang="fr">
<html lang="de">

<head>要素

<head>にはメタデータ、つまりページそのもののコンテンツではなく、ページについての情報が含まれます。headの中身がユーザーに直接表示されることはありませんが、ブラウザーや検索エンジンによるページの扱いに影響します。

charsetとviewportのメタタグ

<meta charset="UTF-8">は、ファイルをUTF-8としてデコードするようブラウザーに指示し、あらゆる言語の文字に対応できるようにします。<meta name="viewport">は、モバイルでレスポンシブデザインを機能させます。

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>要素

<title>のテキストは、ブラウザーのタブやブックマーク、検索エンジンの検索結果に表示されます。簡潔（50〜60文字）、具体的な内容にし、末尾にブランド名を含めてください。

<title>Getting Started with HTML | CoddyKit</title>

CSSとフォントのリンク

外部スタイルシートは、head内で<link>を使ってリンクします。rel="stylesheet"と正しいhrefを使用してください。Google Fontsなどのフォントサービスも同じ方法でリンクします。

<link rel="stylesheet" href="styles.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Inter&display=swap" rel="stylesheet">

<body>要素

ページ上で見えるものはすべて<body>の中にあります。見出し、段落、画像、ボタン、フォーム、スクリプトなどが含まれます。bodyは、ユーザーが見て操作する部分です。

scriptタグ：配置場所

<script src="app.js" defer></script>は<head>内に配置してください。defer属性を使うと、スクリプトをHTMLの解析と並行してダウンロードし、HTMLの解析が完全に終わった後に実行します。最も安全なデフォルトの選択肢です。

<head>
  <script src="app.js" defer></script>
</head>

HTMLのコメント

を使うと、HTMLにメモを追加できます。コメントはユーザーには表示されませんが、ソース表示では確認できます。意図の説明やセクションの目印、デバッグ中のコードの一時的な無効化に利用してください。

<!-- Navigation section -->
<nav>
  ...
</nav>
<!-- End navigation -->

バリデーション：W3C Validator

HTMLをvalidator.w3.orgに貼り付けて、エラーを確認してください。正しいHTMLはブラウザー間の表示の違いを減らし、スクリーンリーダーがページを正しく解釈するのに役立ちます。また、プロフェッショナルな仕事の証でもあります。

クイックチェック

<meta charset="UTF-8">タグはどこに配置すべきですか？

振り返り：HTMLドキュメントの骨格

すべてのHTMLファイルには、 → → （charset、viewport、title、CSSリンク） → （表示されるすべてのコンテンツ）が必要です。この骨格により、ブラウザー間の一貫性、アクセシビリティ、適切なSEOインデックス登録が実現します。

よくある質問