html

【文書情報・構造タグ】HTMLの文書・構造タグについて解説します~HTML入門~

公開日 2021/8/18 最終更新日 2022/8/17

< 所要時間 > 10分程度

以前の記事（HTMLタグ勉強会～タグの種類と分類～）で、htmlで指定できるタグは大まかに15のカテゴリー分類されることを解説しました。

【 HTMLタグ】の種類と分類について解説します~HTML基礎~

本記事以降では、各カテゴリーの代表的なタグと使用方法にて解説していこうと思います。今回は、①文書情報・構造について解説します。なお、本記事はHTMLクイックリファレンス『HTMLタグリファレンス（目的別）』を参考文献としております。

contents

文書情報・構造

HTML文書は下記コードのように、一番大きなくくりとして

①HTMLバージョンとHTML文書であることの宣言<!DOCTYPE><html>

②タイトルや文字コードといったヘッダ情報の読み込み<HEAD>

③文書本体<BODY><h><p>

という三つの区画に分かれます。そういったHTML文書そのものの情報や構造を記述する際に使用するのが、『文書情報・構造』タグです。これらのタグについて順を追って簡単に解説します。

See the Pen by Shuhei Nishida (@shu0814) on CodePen.

<!DOCTYPE>

<!DOCTYPE> タグはHTML文書を記述する際一番最初に記述する文言のようなものである。

HTMLにはこれまで開発されてきた様々なバージョンがあり、バーションによって使用する要素や属性などが異なります。そのため、まずどのバージョンのHTMLを記述するのかを宣言する必要があります。

現在、最新のバージョンである『HTML5』を宣言する場合、<!DOCTYPE html>と記述します。 <!DOCTYPE>タグは記述するHTMLのバージョンを宣言するものであるから、逆にここで、HTML5を宣言した場合、HTML5に対応していない要素や属性を記述することはできません。

<html>

<html>は、このタグの中に記述するコードがhtml文書であるという宣言をするタグです。上記で記述した<!DOCTYPE>以外の記述はこの<html></html>の中に記述します。

<HEAD>

<HEAD>の中には、文書のタイトルや文字コードの情報、読み込むCSSファイルなどのヘッダ情報を記述します。ヘッダ情報はその他に、作者情報やキーワード、その説明等文書に関連する様々な情報があります。ここは、あくまで文書の情報を記述するため、<HEAD>タグ内記述されたコードは、実際のブラウザには表示されません。

<BODY>

<BODY>は、内に記述されたコードが文書本体であることを宣言するタグです。そのため、実際にブラウザに表示したい記述は<BODY>内に記述することになります。

<h1>~<h5>

<h>とは『heading』の略で、見出しを意味します。<h>内に記述した文書は、フォントサイズが大きく、太く表示され、前後に改行が入ります。加えて1~5は見出しの階層を意味しており、１が最もフォントサイズが大きく、5が最も小さくなります。また、HTMLクイックリファレンスによると『これを利用して単にテキストのサイズを変えたり太字にするなど、見栄えを目的に<H>タグを使用することは避けるべきです。このような目的には<FONT>タグや<B>タグ、 <BIG>タグ等を使用しましょう。逆に画像を見出しとして使用する場合には<H>タグで囲む方が好ましいと言えます。そうすることで画像が表示されない場合にも、<IMG>タグのalt属性で指定した内容が見出しとして機能するからです。』とされています。