HTML5の基本的な文法

HTML5の基本的な文法

  • HTML5の文法は、基本的にHTML4.01と同じです
DTD(Document Type Definition)：文書型定義

<!DOCTYPE HTML DTDの情報>

HTML5ではDTDの指定が不要

  • 今後はHTMLのバージョンがなくなり１つになるため
  • 2016年9月時点では、以下のいずれかの記述をすることが一般的です（どれを選択しても問題はありません）
<!DOCTYPE HTML>

<!DOCTYPE html>

<!doctype html>
metaタグは charset属性のみ
  • 「CSS」「JavaScript」記述のためのmeta要素は削除します


《HTML4.01》

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


《XHTML5》

<meta charset="UTF-8">
link要素・styke要素・script要素の属性は不要
  • type属性は削除します
空要素の閉じ方
  • 「<br>」と「<br />」どちらの記述も可能（混在していても文法上は問題はありません）
XHTMLは機械処理しやすくするため
  • XHTMLは、XML(Extensible Markup Language)で定義し直したHTML
  • タグを自由に定義できる
  • HTMLに比べてルールが厳密
  • XML宣言が必要
  • 名前空間が必要
  • Webページの情報をプログラムで読み取る
  • XMLサーバーというXMLを処理するためのプログラムを利用できる
HTML5では柔軟な書き方が許可されている
  • 属性値の「" "」を省略できる
  • 終了タグをを省略できる（2013年5月時点では、旧ブラウザ対策もあって省略の記述を利用することはありません）
<img src="" width=100 height=100>

<ul>
<li>項目
<li>項目
<li>項目
</ul>
XHTMLもHTML5に吸収される
  • XHTMLは今後開発されません
  • 一部はHTML5に取り込まれました
  • XMLとしての書き方も可能

IE対策

  • このスクリプトは <head> 要素の中に入れなければいけないことに注意！
<!--[if lte IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if lte IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
<style>
  article, aside, dialog, figure, footer, header,
  main, menu, nav, section { display: block; }
</style>

基本形

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="">
<!--[if lte IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if lte IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
<style>
  article, aside, dialog, figure, footer, header,
  main, menu, nav, section { display: block; }
</style>
</head>
<body>
	
</body>
</html>