HTML5のヘッダ部分の記述方法
HTMLの先頭には、「DOCTYPE宣言」と「head要素」が必要です。HTML5でのそれらの記述方法は、従来のHTMLやXHTMLと比較して、ずいぶん簡潔になりました。以下に、「XHTML1.1での例」と「HTML5での例」を記しますので、比べてみて下さい。■XHTML1.1でのヘッダ部分の例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>ページタイトル</title> </head>
■HTML5でのヘッダ部分の例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ページタイトル</title> </head>記述している内容に違いはありませんが、記述方法が簡潔になっています。
上記のhead要素には、ページタイトルと文字コードだけしか記述していませんが、もちろん必要に応じて、スタイルシートやスクリプト、他のmeta要素などを書けます(それらの書き方は、従来のHTML・XHTMLと同じです)。
■1行目:DOCTYPE宣言
<!DOCTYPE html>HTML5では、HTMLの先頭に記述する「DOCTYPE宣言」がとても簡潔になっています。言語のバージョンを示す文字列や、DTDのURIなどはなくなり、ただ「HTMLである」ことだけを示しています。
HTML5でHTMLを記述する際には、上記の短いDOCTYPE宣言を先頭に記述するだけで済みます。
■2行目:html要素
<html>XHTMLではhtml要素にxmlns属性が必要でしたが、HTML5では不要です。
lang属性を加えて記述言語を示す場合は、以下のように記述します。
<html lang="ja">属性値には、日本語の場合は「ja」、英語の場合は「en」と記述します。
■4行目:文字コード
<meta charset="utf-8">meta要素を使って文字コードを示す点に変わりはありませんが、charset属性を使って記述すれば良くなったため、短く記述できるようになっています。
■空要素の書き方は、HTML・XHTML双方の書き方が使える
先ほどのmeta要素は、終了タグのない「空要素」です。XHTMLで空要素を記述する場合には、タグの最後を「 /> 」で閉じる必要がありました。逆にHTMLではスラッシュ記号を付けず「 > 」で閉じる必要がありました。
HTML5では、(空要素のタグの終わりは)「 /> 」でも「 > 」でもどちらでも構いません。したがって先ほどのmeta要素は、
<meta charset="utf-8">と書いても構いませんし、
<meta charset="utf-8" />と書いても構いません。
最後に、HTML5ソースに慣れるためのコツをご紹介致します。