ホームページ作成/HTML5とは

HTML5の書き方の基礎(2ページ目)

これまでHTML4.01やXHTML1.xを使ってウェブページを記述してきたなら、HTML5を使ってウェブページを記述するのは特に難しくありません。XHTML1.1との違いを確認しつつ、HTML5ソースを記述する「最初の基礎」をご紹介。

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

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ソースに慣れるためのコツをご紹介致します。
  • 前のページへ
  • 1
  • 2
  • 3
  • 次のページへ

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

    All About公式SNS
    日々の生活や仕事を楽しむための情報を毎日お届けします。
    公式SNS一覧
    © All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます