HTMLの基礎知識

HTMLの基本書式

HTML（HyperText Markup Language）は、要素をタグとして記述することで文書を意味付け（マークアップ）します。リンクを設置するaタグの記述方法を例に、HTML文書の基本的な書式を解説します。

HTMLの基本書式

① 開始タグ
要素名を不等号（< >）で囲んで、内容の意味付けを開始します。要素によっては、属性と属性値を記述します。XHTMLでは、内容を持たない「空要素」には、タグを閉じる前にスラッシュ（/）を記述します。

② 終了タグ
要素名の前にスラッシュ（/）を入力して不等号（< >）で囲み、内容の意味付けを終了します。空要素では記述しません。

③ 要素名
内容に意味を与える要素名を記述します。HTMLでは大文字、小文字のどちらで記述しても問題ありませんが、XHTMLでは必ず小文字で記述します。

④ 属性
要素の意味を具体的にしたり、機能を与えたりします。a要素に指定するhref属性は、リンク先を表します。各要素に固有の属性と、すべての要素で使えるグローバル属性が存在します。

⑤ 属性値
属性に応じて、キーワードや数値などの適切な値を指定します。a要素のhref属性にはリンク先のURLを指定します。

⑥ 内容
Webページに実際に表示される内容を記述します。空要素の場合は必要ありません。

論理属性

「論理属性」とは、値を指定する必要がなく、その属性が存在するかしないかだけで意味を持つ属性です。例えば、audio要素のautoplay属性が該当し、以下の3つの例は、どれを記述しても有効となります。ただし、XHTMLでは、2つ目、3つ目の形式で記述する必要があります。なお、本サイトの例では3つ目の形式で記述します。

<audio src="video/skytree.mp4" autoplay ></audio>
<audio src="video/skytree.mp4" autoplay=""></audio>
<audio src="video/skytree.mp4" autoplay="autoplay"></audio>

HTML5とXHTMLの文書型宣言

HTML文書は、それがどの文書型（DTD:Document Type Definition）で記述されているかを文頭に記述する必要があります。文書型とは、バージョンごとに異なるHTML文書の構文の詳細な規則のことです。HTML5での文書型は以下のように非常にシンプルです。

<!DOCTYPE html>
<html>
  <head>

HTML5はXHTMLとしてXML構文で記述することもでき、その場合は以下のようにXML宣言を文頭に記述します（文書の文字コードがUTF-8の場合は省略できます）。また、html要素のxmlns属性での名前空間宣言が必須となり、lang属性の代わりにxml:lang属性を使用するなど、XML文書としての決まりが適用されます。

<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>

文字コードの指定

HMTL文書は、ブラウザーで表示されるときの文字コードを指定しておかないと、意図した通りに表示されない場合があります。文字コードの指定にはさまざまな方法がありますが、HTML5では、meta要素のcharset属性を使って以下のように指定する方法が推奨されています。また、推奨されている文字コードは「UTF-8」です。

なお、XHTMLの場合はXML宣言文においてエンコードを同時に指定しているので、meta要素による文字コードの指定は必要ありません。

<head>
  <meta charset="utf-8">
  <title>文字コードの指定</title>
<head>

HTML5の文書の基本型

HTML5で記述した文書の基本型は以下のようになります。XHTMLとして記述する場合は、XML宣言や名前空間宣言の指定、空要素の開始タグにおけるスラッシュ（/）や、論理属性の記述方法も異なるので注意しましょう。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>HTML5文書の基本型とは</title>
  </head>
  <body>
    <p>HTML5文書の基本型です。</p>
  </body>
</html>

関連まとめ記事