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

HTMLドキュメントの基本となる最小構成とは？タグの役割をわかりやすく解説

HTMLドキュメントとは、Webページそのものを指し、Webサイト上にコンテンツを表示するために使われるファイルです。HTMLは「タグ」と呼ばれる記述によって構成されており、多くのタグには開始タグと終了タグのペアが存在します。ただし、一部のタグ（<br>や<img>など）は終了タグを持たない単独タグである点にも注意しましょう。

HTMLドキュメントを正しく動作させるためには、最低限必要な「最小構成」のタグを理解しておくことが重要です。ここでは、その基本構造を一つずつ解説していきます。

1. DOCTYPE宣言

HTMLドキュメントの先頭には、必ず<!DOCTYPE html>というDOCTYPE宣言を記述します。これは文書の種類をブラウザに伝えるためのもので、「このドキュメントはHTML5で書かれている」ということを宣言する役割を果たします。DOCTYPE宣言があることで、ブラウザは標準モードでページを正しく表示できるようになります。

2. <html>タグ

DOCTYPE宣言の直後に記述するのが<html>タグです。すべてのHTML要素は、この<html>〜</html>の中に含める必要があります。つまり、<html>タグはドキュメント全体のルート（最上位）要素であり、内部のすべてのタグはHTMLのルールに従って記述されます。言語を指定したい場合は、<html lang="ja">のようにlang属性を追加することもできます。

3. <head>タグ

<head>タグは、ページに関するメタ情報を記述する部分です。ここでは<title>〜</title>タグを使って、ブラウザのタブに表示されるページタイトルを設定できます。また、文字コードの指定（<meta charset="UTF-8">）やCSSファイルの読み込みなども、このhead内に記述します。head内の内容は、Webページ上には直接表示されません。

4. <body>タグ

<body>タグは、実際にWebページ上に表示されるコンテンツを記述する部分です。たとえば、<p>〜</p>タグを使えば段落としてテキストを追加でき、その内容はユーザーの目に見える形で画面に表示されます。見出し（<h1>>〜<h6>）や画像（<img>）、リンク（<a>）なども、すべてbody内に配置します。

HTMLドキュメントの最小構成サンプルコード

以下は、これまで説明した要素を組み合わせた、HTMLドキュメントの基本的な最小構成の例です。

<!DOCTYPE html>
<html>
    <head>
        <title>HTML Document</title>
    </head>
    <body>
        <p>This is demo text.</p>
    </body>
</html>

このように、HTMLドキュメントは「DOCTYPE宣言 → <html> → <head> → <body>」という階層構造で成り立っています。まずはこの最小構成をしっかり覚えておくことで、より複雑なWebページを作る際の土台となります。初心者の方は、このテンプレートをベースに少しずつ要素を追加しながら学習を進めていくのがおすすめです。

  1. HTMLの水平線（hrタグ）とは？使い方とサンプルコードをわかりやすく解説

    HTMLにおける水平線（horizontal rule）は、<hr>タグで表現されます。このタグを使うと、ページ内のコンテンツ同士を視覚的に区切ることができ、文章やセクションの境目を明確に示せます。 <hr>タグには終了タグが存在しない点に注意しましょう。つまり、</hr>のように閉じる必要はありません。また、このタグはHTMLページの<body>〜</body>タグ内に記述します。 hrタグの基本的な特徴 コンテンツをテーマごとに分離するための区切り線を表示する 空要素（void要素）であり、終了タグが不要 HTML5では「話題の

  2. HTMLで改行タグを正しく使う方法：<br>、<br/>、<br />の違いと使い分け

    HTMLにおけるbrタグの基本HTMLで改行を挿入する際に使用されるのが<br>タグです。このタグは「空要素（empty element）」と呼ばれ、終了タグを必要としません。そのため、単に<br>と記述するだけで正常に機能します。一方で、<br/>や<br />といった書き方を目にしたことがある方も多いでしょう。それぞれの違いと正しい使い方を見ていきましょう。HTMLとXHTMLでの正しい書き方HTMLの場合標準的なHTML文書では、<br>タグを使用するのが正しい方法です。スラッシュなしのシンプルな形式で問題ありません。XHTML