HTMLドキュメントの基本構造

Posted on by

HTMLドキュメントは、ウェブページの内容と構造を定義するためのタグで構成されています。
基本的なHTMLドキュメントには、必須の要素とその配置が含まれます。
以下に、主要なタグとその役割について詳しく説明します。

!DOCTYPE html

定義

<!DOCTYPE html> はドキュメントタイプ宣言で、
ブラウザに対して使用するHTMLのバージョンを指定します。
現在の標準はHTML5であり、<!DOCTYPE html> と書くだけで済みます。

役割

ブラウザに文書のHTMLバージョンを伝え、標準モードでのレンダリングを促します。
これにより、互換性の問題を最小限に抑えることができます。

html

定義

<html> タグはHTML文書の根本要素（ルート要素）であり、文書全体を包含します。

役割

文書の始まりと終わりを示し、全ての他のHTML要素を内包します。

配置

<!DOCTYPE html> 宣言の直後に続きます。
<html> タグの中に <head> タグと <body> タグが含まれます。

例）

<!DOCTYPE html>
<html>
</html>

head

定義

<head> タグはHTML文書のメタ情報を格納します。

役割

メタデータ

文書に関するメタ情報（例：文字エンコーディング、作者、ページの説明など）を指定します。

タイトル

<title> タグを使用して、ブラウザのタイトルバーやタブに表示されるページタイトルを定義します。

外部リソースのリンク

スタイルシートやスクリプトなどの外部リソースをリンクします
（例：<link> タグでCSSをリンク、<script> タグでJavaScriptをリンク）。

SEO

検索エンジン最適化（SEO）に役立つメタタグ
（例：<meta> タグでキーワードや説明を指定）を含めます。

配置

<html> タグの直後に配置され、<body> タグの前にあります。

例)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>My Web Page</title>
    <link rel="stylesheet" href="styles.css">
  </head>
</html>

body

定義

<body> タグはHTML文書の主要コンテンツを格納します。

役割

コンテンツの表示

ユーザーに表示される全てのコンテンツ（テキスト、画像、動画、リンク、フォームなど）を含めます。

インタラクティブ要素

フォーム、ボタン、リンクなどのインタラクティブ要素を含め、ユーザーが操作できるようにします。

配置

<head> タグの直後に配置され、<html> タグの終了前に閉じられます。

例)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>My Web Page</title>
  </head>
  <body>
    <h1>Welcome to My Web Page</h1>
    <p>This is a paragraph of text.</p>
    <img src="image.jpg" alt="Description of image">
  </body>
</html>

まとめ

HTMLドキュメントの基本構造は、ウェブページを正しく表示するための基盤を提供します。
<!DOCTYPE html> 宣言はブラウザにHTMLのバージョンを伝え、
<html> タグは文書全体を包含します。
<head> タグはメタ情報を格納し、<body> タグはユーザーに表示される主要なコンテンツを含みます。
これらのタグを正しく配置することで、ウェブページが意図した通りに表示され、機能するようになります。