marketingblog.jp

世界のインターネット企業の動向とソーシャルメディア、スマートフォン関連のブログ情報サイト

【第2回】HTML5とHTML4,XHTMLの違いその1:構文

Posted by 寺西 裕紀 | 12月 8, 2011 | No Comments

Share on Facebook
このエントリーをはてなブックマークに追加
Bookmark this on @nifty clip
Post to Google Buzz
Bookmark this on Yahoo Bookmark
Bookmark this on FC2 Bookmark

HTML5を始めるにあたり最初に覚えておくべきことはこれまでのマークアップ言語、すなわちHTML4,XHTML1.0との違いだ。HTML5とHTML4,XHTMLとの違いを知ることでHTML5の理想的な設計に沿ったマークアップをすることができる。今回は構文の違いについて説明する。

DOCTYPE

HTML5ではDOCTYPEが非常にシンプルになった。これまではHTMLのバージョンやDTDへの参照のためDOCTYPE宣言は非常に長かったが、HTML5ではブラウザで標準モードでレンダリングされるためだけに使用される。

<!DOCTYPE html>

HTML構文とXML構文

HTML5ではHTML構文とXML構文のどちらかの構文に準拠した記述をするか選択できる。

HTMLドキュメントの例:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>ドキュメントの例</title>
  </head>
  <body>
    <p>段落の例</p>
  </body>
</html>

XMLドキュメントの例:

<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>ドキュメントの例</title>
  </head>
  <body>
    <p>段落の例</p>
  </body>
</html>

HTML構文に準拠した記述であってもXHTMLのように空要素br,hrなどを<br />,<hr />と記述することができる。

文字エンコーディング

HTML5では文字エンコーディングの指定もシンプルになった。

<meta charset="UTF-8" >

HTML構文に準拠した記述の場合に限り以下の旧来の記述方法も許容される(XML構文では不可)。

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" >

なおHTML5仕様では”UTF-8″を強く推奨している。”Shift-JIS”,”EUC-JP”は非推奨なので特に理由がない場合UTF-8を指定するべきだ。

MathMLとSVG

MathMLやSVGはXMLベースの仕様であるので基本的にXHTMLでしか利用することができなかったが、HTML5では直接マークアップすることが可能となった。

緑色の円:

<svg><circle r="50" cx="50" cy="50" fill="green"/></svg>

構文チェック

最後にHTML5マークアップが仕様に準拠しているかどうかチェックしてくれるバリデータの紹介をする。


■参考URL:

このエントリーを含むはてなブックマークはてなブックマーク - 【第2回】HTML5とHTML4,XHTMLの違いその1:構文 この記事をクリップ!Livedoorクリップ - 【第2回】HTML5とHTML4,XHTMLの違いその1:構文 Yahoo!ブックマークに登録 BuzzurlにブックマークBuzzurlにブックマーク @niftyクリップに追加 このエントリをつぶやくこのWebページのtweets Share on Tumblr FC2ブックマークへ追加 Googleブックマークに追加 Bookmark this on Delicious Digg This

Comments

  • ABOUT

    このサイトでは、海外の情報サイトの参照と独自調査をしながら世界の注目企業の動向と、最近のソーシャルメディア(Facebook/Twitter等)、スマートフォン(iphone/android等)の動向について情報発信を行っていきます。

  • タグクラウドテスト

  • Twitterアカウント

  • カテゴリー

  • RSS Last Day. jp