12月更新・前月(11月)の人気記事トップ10 12/07/2023
- ( 02 ↑) 【Mac】macOSをHigh SierraからMontereyにアップグレード
- ( 01 ↓) 【iPhone / iPad】iPhoneでSuicaをクレジットカード無しで使う方法
- ( 03 – ) 【iPhone / iPad】iPhoneのツイッターアプリでユーザー名をコピーする方法
- ( 05 ↑) 【Labs】position:absoluteとwidth:100%を指定すると横幅の設定がうまくいかない場合の対処方法について
- ( 06 ↑) 【jQuery】入門2. jQueryをHTMLに組み込む
- (圏外↑) 【jQuery】入門11. switch文による条件分岐
- (圏外↑) 【Mac】Safariでソースコードを見る方法
- ( 09 ↑) 【Mac】横画面で撮影した動画をYouTubeショート用にMacのiMovieで縦画面に編集する方法
- (圏外↑) 【jQuery】入門7. jQueryで新しいWindowを開く
- (圏外↑) 【iPhone iPad】iPhoneやiPadの音量を細かく調整する方法
【HTML】DOCTYPE宣言文
概要
DOCTYPE宣言とは、HTMLのバージョンやDTDについて宣言することです。W3C(HTMLの規格を制定する機関)ではすべてのHTML文書にDOCTYPE宣言文を記述するよう勧告しています。HTML 4.01以降、使用するDTDを宣言する必要があるためDOCTYPE宣言文は必須となります。以下HTML、XHTMLのDOCTYPE宣言文の記述例です。なお、XHTMLではDOCTYPE宣言文の前にXML宣言を記入する必要があります(文字コードがutf-8の場合省略可)。また、HTMLとXHTMLではhtml要素のlang属性の書き方が異なります。
HTML5
HTML5以前はW3C(HTMLの規格を制定する機関)のもと、DOCTYPE宣言文でHTMLのバージョンやDTDについて宣言することが必須でしたが、HTML5ではDTDはなくなり、また、情報も仕様書に直接記載されているのでDOCTYPE宣言文でDTDを示す必要がなくなりました。HTML5でもDOCTYPE宣言文は必須ですが、ブラウザの表示モードを「標準モード」にするだけの目的で使用されます。
HTML5のDOCTYPE宣言文
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>タイトル</title>
</head>
<body>本文</body>
</html>
HTML4.01 Transitional DTD URI無し(互換モード)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<title>タイトル</title>
</head>
<body>本文</body>
</html>
HTML4.01 Transitional DTD URI有り(標準モード)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<title>タイトル</title>
</head>
<body>本文</body>
</html>
HTML4.01 Strict DTD URI無し(標準モード)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head>
<title>タイトル</title>
</head>
<body>本文</body>
</html>
HTML4.01 Strict DTD URI有り(標準モード)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<title>タイトル</title>
</head>
<body>本文</body>
</html>
HTML4.01 Frameset DTD URI無し
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
<html lang="ja">
<head>
<title>タイトル</title>
</head>
<frameset rows="150,*">
<frame src="top.html">
<frameset cols="300,*,300">
<frame src="left.html">
<frame src="main.html">
<frame src="right.html">
</frameset>
<noframes>
<body>
<p>フレーム対応ブラウザでご利用になれます。</p>
</body>
</noframes>
</frameset>
</html>
HTML4.01 Frameset DTD URI有り
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html lang="ja">
<head>
<title>タイトル</title>
</head>
<frameset rows="150,*">
<frame src="top.html">
<frameset cols="300,*,300">
<frame src="left.html">
<frame src="main.html">
<frame src="right.html">
</frameset>
<noframes>
<body>
<p>フレーム対応ブラウザでご利用になれます。</p>
</body>
</noframes>
</frameset>
</html>
XHTML1.0 Transitional DTD
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<title>タイトル</title>
</head>
<body>本文</body>
</html>
XHTML1.0 Strict DTD
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<title>タイトル</title>
</head>
<body>本文</body>
</html>
XHTML1.0 Frameset DTD
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<title>タイトル</title>
</head>
<frameset rows="150,*">
<frame src="top.html" />
<frameset cols="300,*,300">
<frame src="left.html" />
<frame src="main.html" />
<frame src="right.html" />
</frameset>
<noframes>
<body>
<p>フレーム対応ブラウザでご利用になれます。</p>
</body>
</noframes>
</frameset>
</html>
XHTML Basic 携帯端末向け
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
<title>タイトル</title>
</head>
<body>本文</body>
</html>
XHTML Mobile Profile1.0 DTD 携帯端末向け
<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=Shift_JIS" />
<title>タイトル</title>
</head>
<body>本文</body>
</html>
XHTML1.1 Strict DTD
<?xml version="1.0" encoding="utf-8"?>
<!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" xml:lang="ja">
<head>
<title>タイトル</title>
</head>
<body>本文</body>
</html>
XHTML Appendix1 PHPファイルでXML宣言をする場合
<?php echo '<?xml version="1.0" encoding="utf-8"?>'."\n" ?>