JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

HTMLドキュメントで最も重要なタグとは？DOCTYPE・html・head・bodyの基本を解説

HTMLには、コンテンツの書式設定、見出しの作成、レイアウトの調整、セクションの追加など、Webサイトを構築するためのさまざまなタグが用意されています。その中でも、HTMLドキュメントにとって特に重要なのが「DOCTYPE」「<html>」「<head>」「<body>」の4つです。本記事では、それぞれの役割と正しい記述方法をわかりやすく解説します。

HTMLドキュメントで最も重要なタグとは？DOCTYPE・html・head・bodyの基本を解説

1. DOCTYPE宣言（ドキュメントタイプ宣言）

DOCTYPEは「ドキュメントタイプ宣言」と呼ばれるもので、そのドキュメントがどのバージョンのHTMLに準拠しているかをブラウザに伝えるために使われます。現在主流のHTML5では、次のように1行で記述します。

<!DOCTYPE html>

この宣言は必ずドキュメントの先頭に記述し、これによってブラウザが標準モードでページを正しく表示できるようになります。

2. <html>タグ

<html>タグは、<!DOCTYPE html>を除くすべてのHTML要素を格納する、最上位のコンテナ（ルート要素）です。<!DOCTYPE html>は<html>の開始タグより前に配置します。それ以外のすべてのHTML要素は、<html>と</html>の間に入れ子状に記述します。

3. <head>タグ

<head>タグは、HTMLドキュメントのヘッドセクション（文書情報部分）を示します。ここに含まれるタグは、ブラウザの画面上には直接表示されません。ページのタイトルを指定する<title>〜</title>タグは、この<head>内に記述します。

<head>
    <title>HTML Document</title>
</head>

また、<head>内には文字コードの指定（<meta charset="UTF-8">）やCSSファイルの読み込みなども記述できます。

4. <body>タグ

<body>タグは、HTMLドキュメントのメインコンテンツ部分を表します。ブラウザ上に実際に表示されるテキスト、画像、リンク、フォームなどは、すべてこの<body>タグの中に記述します。

まとめ

HTMLドキュメントは、「DOCTYPE宣言 → <html> → <head> / <body>」という基本構造で成り立っています。DOCTYPEでバージョンを宣言し、<html>が全体を包み、<head>に文書情報を、<body>に表示内容を記述する——この流れを理解することが、正しいHTML文書を作成する第一歩となります。

  1. HTMLのmetaタグ完全解説！メタ情報を定義する各種metaタグの使い方

    <meta>タグとは<meta>タグは、HTMLドキュメント内にメタデータ（ページに関する付加情報）を定義するために使用されるタグです。具体的には、ページの説明文、キーワード、作成者名などの情報を記述できます。また、HTML5以降では、<meta>タグを使ってスマートフォンなどのモバイルデバイス向けに「ビューポート（viewport）」を設定することも可能になりました。<meta>タグは<head>セクション内に記述し、ブラウザや検索エンジンに対してページの情報を伝える重要な役割を果たします。ここからは、代表的なメタ情報の追加方法と、

  2. C#学習の始め方｜必要な前提条件と開発環境の準備ガイド

    C#を学習するための前提条件 C#の学習を始めるにあたって、まず必要となるのは基本的なコンピュータに関する知識です。パソコンの基本操作やファイル管理などを問題なくこなせるレベルであれば、十分にスタートできます。 さらに、C言語やC++などのプログラミング経験があれば、C#の文法や考え方をよりスムーズに理解できるでしょう。これらの言語はC#と共通する部分が多く、学習の大きな助けになります。もちろん、プログラミング未経験からでもC#の習得は十分可能です。 ステップ1：Visual Studioをインストールする C#での開発を本格的に始めるなら、まず統合開発環境（IDE）であるVisual S