Edited at

HTML5の基礎知識

More than 3 years have passed since last update.


構造


<!DOCTYPE...>
<html>
<head>
ヘッダ情報
</head>
<body>
コンテンツ内容
</body>
</html>


  • 特に変更はなし


HTMLとXHTML


  • HTML5 でコーディングを行う際、HTML で記述するか、XHTML で記述するかを選べる

  • HTML 文法の仕様はHTML5、XHTML 文法の仕様はXHTML5と呼ばれている


HTMLシンタックスの記述方法


HTML5 文書の DOCTYPE 宣言

///HTML 4.01 Transitional DTD のDOCTYPE宣言

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

///HTML5 のDOCTYPE宣言
<!DOCTYPE html>


  • ファイルの一行目に以下を記入する

  • 必ず宣言すること


文字エンコーディングの指定

//HTML4以前のUTF-8指定

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

//HTML5のUTF-8指定
<meta charset="UTF-8">


  • これまでどおり Content-Type を指定することも可能だが、1つの HTML ファイルには、上の宣言のどちらかのみを含めるようにすること


終了タグを記述してはいけない要素

area, base, br, col, command, embed, hr, img, input, keygen, link, meta, param, source


XHTMLシンタックスの記述方法

ここでは XHTML5 を用いたマークアップのルールを紹介する


XHTML文書のMINEタイプ



  • text/xmlapplication/xml、もしくは末尾が+xmlで終わるMINEタイプになる


XHTMLの名前空間


  • XHTML1.x の場合と同じくhttp://www.w3.org/1999/xhtmlとなる


XHTML文書のDOCTYPE宣言


  • XHTML に DOCTYPE 宣言を含めることは許されているが、HTML5 には公式 DTD が存在しない


XHTMLを用いたマークアップの例

<?xml version="1.0" encoding="UTF-8"?>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>タイトル</title>
</head>

<body>
<h1>見出し</h1>
<p>段落1</p>
<input type="text" disabled="disabled" />
</body>

</html>


HTML5の新要素

文書構造に関するもの

要素
意味

section
汎用的なセクション。文書のアウトラインを構成する

article
セクションの一種で、Webページから独立したコンテンツを表す

aside
セクションの一種で、外側のセクションに対する補足情報を表す

nav
セクションの一種で、外側のセクションに対するナビゲーションメニューを表す

footer
セクションのフッター

header
セクションのヘッター

hgoupe
複数の見出し(h1〜h6)をまとめる

外部コンテンツの埋め込み

要素
意味

figure
キャプションを伴うような内容のものを文書中に埋め込む際に使用

video
動画プレーヤ

audio
音声プレーヤー

source
video/audio に対して、リソースの URL やタイプを指定する

canvas
ビットマップキャンパス

embed
プラグインで実行するコンテンツの埋め込み

フォーム

要素
意味

keygen
公開鍵暗号方式のキーペアを作成する

output
画面出力されるフォーム要素

progress
進捗状況を表す(プログレスバー)

meter
メーター

テキスト・その他

要素
意味

mark
Web ページの糸とは異なる文脈での強調

ruby/rt/rp
感じのよみがな等を表す「ルビ」を指定する

time
日付や時刻を表す

command
メニューアから実行されるコマンド

datalist
オートコンプリートの候補など、データのリストを保持するのに用いられる


HTML5で廃止された要素

html5リファレンス 廃止タグ一覧

http://www.tagindex.com/html5/basic/abolished.html


HTML5レイアウトサンプル

<!DOCTYPE html>

<html lang="ja">

<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="keywords" content="">
<link rel="stylesheet" href="sample.css">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

<script src="sample.js"></script>
</head>

<body>
<header>
</header>

<nav>
</nav>

<article>
</article>

<footer>
</footer>

</body>

</html>


IE8以下の対応

 IE8以下はHTML5に対応していませんがGoogle Codeで公開されているhtml5shivスクリプトを利用すればIE8以下でもHTML5のページを表示することが可能になります。

head要素内に以下の内容を記述します。

 *JavaScriptをオフにしている環境では適用されませんのでIE8以下では表示が崩れるおそれがあります。



参考

参考書籍:「HTML5 & API 入門」白石俊平著

参考サイト:Webデザインラボ(http://www.webdlab.com/html/html5/)