「[[.NET 開発基盤部会 Wiki>http://dotnetdevelopmentinfrastructure.osscons.jp]]」は、「[[Open棟梁Project>https://github.com/OpenTouryoProject/]]」,「[[OSSコンソーシアム .NET開発基盤部会>https://www.osscons.jp/dotNetDevelopmentInfrastructure/]]」によって運営されています。
-[[戻る>HTML/CSS/JavaScript]]
*目次 [#ec0439ca]
#contents
*概要 [#s4603fad]
SaaS開発で調べたHTML(HTML5)についてのメモ。
HTML : ウェブ上の文書を記述するためのマークアップ言語
*DTD [#i99d705f]
-マークアップ言語 SGMLおよびXMLにおいて、~
文書構造（文書型）を定義するためのスキーマ言語
-マークアップ規則はHTML4まではDTDとして公開
*バージョン [#le703cb2]
**HTML 1.0 [#d4c03444]
1993年6月に、IETFのIIIR WGより提出されたHTML仕様
**HTML 2.0 [#i39a3530]
1995年11月に、IETFのHTML WGによって RFC 1866として発表された仕様
**HTML 3.2 [#ddca3908]
-HTML 3.0 : ドラフトの段階で策定途中に破棄。
-HTML 3.2 : 1997年1月14日に、W3C勧告として発表された仕様
**HTML 4.0 [#h20431f9]
-1997年12月18日に、W3C勧告として発表された仕様
-1998年4月24日に、仕様改訂。
**HTML 4.01 [#g41c3d26]
1999年12月24日に、W3C勧告として発表された仕様
-いくらかのマイナーな修正が加えられ、
-以下の、3つのDTDスキーマを持つ。
***Strict DTD [#t47dc353]
HTML4.01のルールに厳密かつ正確に従う指定
***Transitional DTD [#v48680b0]
HTML 3.2からの移行過渡期のため指定
***Frameset DTD [#k79c1fb1]
フレームを使うことができる指定
*XHTML [#q5ff5a8d]
SGMLで定義されていたHTMLをXMLの文法で定義しなおしたマークアップ言語
**HTMLとの相違点 [#w3ba18cf]
***XML宣言を書く [#gada84f2]
<?xml version="1.0" encoding="UTF-8"?>
***要素名・属性名は小文字で書く [#zed137d2]
-XMLでは大文字・小文字が厳密に区別される。
-要素名・属性名は全て小文字でのみ定義されている。
-要素名・属性名は共にすべて小文字で表記する。
***要素の終了タグを書く [#m4266b9a]
要素は必ず開始タグと終了タグが必須（終了タグの省略は許されない）。
***空要素の終了タグも書く [#h2091306]
-空要素についても同様に終了タグを付与するか
<br></br>（間に文字は一切含めない）
-若しくは、開始タグの末尾を「/>」とする（こちらが推奨）。~
スラッシュの前に半角スペースを先行させる表記が一般的
<br />
***属性値はクォーテーションで囲む。 [#u4ebafa6]
属性値はすべてクォーテーションで囲む。
-" " （ダブルクォーテーション）
-' '（シングルクォーテーション）
***属性名・属性値を省略しない。 [#v9b92392]
***推奨されるメディアタイプ [#x869b046]
application/xhtml+xml
**バージョン [#g081e615]
***XHTML 1.0 [#m0228c41]
-2000年1月26日に勧告された仕様
--HTML 4.01をXMLにて再定義したもの
--HTML 4.01と同様にStrict、Transitional、Framesetという3種類のDTDが存在。
-XHTML 1.0 Second Edition~
2002年8月1日に改訂版が勧告
***XHTML Basic [#v64f1f66]
XHTMLのサブセットで、PDAや携帯電話などの小規模な端末を含む、より広域の環境のための仕様
-XHTML Basic 1.0~
2000年12月19日に勧告された仕様
-XHTML Mobile Profile
--OMAが定義した XHTML DTD~
携帯電話などのリソースの限られた機器で利用することを目的
--Version
---1.0 : XHTML Basic 1.0 に表示要素をいくつか追加し、基本的なスクリプトをサポート
---1.1 : 完全なスクリプトサポート（ECMAScript Mobile Profile）
---1.2 : Forms と Object のサポートを追加
-XHTML Basic 1.1~
2008年7月29日に、XHTML Mobile Profileとの不整合を解消する目的で勧告された仕様
***The Modularization of XHTML(XHTML m12n) [#lceabb27]
XHTMLをその要素の目的や役割ごとに分割し、フレームワーク化したもの。
-バージョン
--1.0が2001年4月10日に勧告
--1.1が2008年10月に勧告
--2009年7月現在、バージョン2.0が草案の段階
-XHTML 1.1やXHTML 2.0は、m12nをベースに構築。
***XHTML 1.1 [#fa0e8266]
-2001年5月31日に、機能がモジュール化されたXHTML仕様として勧告された仕様
--モジュール化による、カスタマイズ性の向上。
--Strictスキーマ 1 つのみとなった。
--ルビモジュールの導入。
-XHTML 1.1 Second Edition~
2010年11月23日にが勧告された仕様
***XHTML 1.2 [#h064c35a]
策定中であるXHTML Role ModuleやAccess Module、~
WAI-ARIAの語彙を組み込んだ新しいプロファイルとして策定予定。
***XHTML 2.0 [#v4bda50f]
-XHTML Familyの次期バージョンとしてW3Cが策定していた。
-2009年07月03日に策定の打ち切り（HTML5にリソースが主流になったため）
***XHTML5 [#f7f50b05]
HTML5をXML記法で記述したものをXHTML5(最終草案)と呼ぶ。
*HTML5 [#x3122b27]
-2014年10月28日に、W3C勧告として発表された仕様
-新要素・属性が追加・変更・削除された
--ブログや記事向けの「article」要素
--マルチメディアのための「audio」および「video」要素
-HTML 5.1~
2016年11月1日に勧告された仕様
**基本ルール [#k884758a]
-開始タグ終了タグ、間にコンテンツ。
-コンテンツはInnerTextやタグのネスト
<aaa>xxx</aaa>
***空要素 [#c0d71871]
<aaa/>
***属性記述 [#dc269344]
-yyy値のxxx属性
<aaa xxx="yyy"></aaa>
-ブーリアン属性
<aaa required></aaa>
***タグ省略 [#i9f90339]
範囲は自動判別される。
-開始・終了タグを省略可能
--<html>
--<head>
--<body>
-終了タグを省略可能
--<p>
--<li>
--<tr>
--<td>
--<th>
**セマンティクス [#e87d54c7]
現在のセマンティクス要素数は108
-30種類の新要素
-14種類の既存要素が変化
-参考
--HTML5でセマンティックなマークアップ~
https://www.slideshare.net/shumpei/html5-9013839
***セクション [#afc5c742]
-<section>
--汎用的なセクション。
--<article>/<aside>/<nav>以外のセクションは全て<section>
--基本的に<h1-6>タグとセットで使用する（基本的に<h1>タグのみ使用する）。
--<h1-6>要素
---<h1-6>要素を纏める場合は、<hgroup>タグを使用する。
---セクション無しに<h1-6>要素を使用すると、暗黙のセクションが生成される。
-<article>
--独立した「本文」としてのセクション。
--配信しても意味が通じる。
-<aside>
--頁の他の部分との関連が低いセクション。
--削っても意味が通じる。
-<nav>
--サイト内の主要なナビゲーション・メニュー。
--中で<ul>と<a>を用いてリンク一覧を作る。
--このナビゲーション部が提供されて有益な場合。
***ヘッダ・フッタ [#waeea940]
-<header>
--ヘッダ
--一般的には<h1-6>要素を含める。
-<footer>
--フッタ
--<small>要素でcopyrightなどの記載を行なう。
***その他 [#g3bea422]
-<time>タグで、親の<body>/<article>要素の公開日時（ISO 8601）を表示（pubdate属性がtrueの場合）。
-<address>タグで、親の<body>/<article>要素の問い合わせ先アドレスを表示。
**テンプレート [#x20b5c62]
-HTML5でWebページを作成する時用の必要最小限をまとめたシンプルなテンプレート（IE8以下も配慮） | コリス~
http://coliss.com/articles/build-websites/operation/work/generic-html5-template-by-sixrevisions.html
<!DOCTYPE html>
<!-- コンテンツの言語を指定 -->
<html lang="ja">
<head>
<!-- IE8+に対して「IE=edge」と指定することで、利用できる最も互換性の高い最新のエンジンを使用するよう指示できます
参考: https://www.modern.ie/en-us/performance/how-to-use-x-ua-compatible -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- ページのタイトルを記述 -->
<title></title>
<!-- パフォーマンスのために使用する文字のエンコーディングを記述
参考: https://developers.google.com/speed/docs/best-practices/rendering#SpecifyCharsetEarly -->
<meta charset="utf-8">
<!-- content属性にページの紹介文を記述 -->
<meta name="description" content="">
<!-- content属性にページの著者情報を記述 -->
<meta name="author" content="">
<!-- モバイル端末への対応、ページをビューポートの幅に合わせてレンダリング（Android, iOS6以降）
ズームを許可しない設定「user-scalable=no」は加えない -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- スタイルシートはできるだけ早くレンダリングされるため、HTMLドキュメントの上の方に記述
href属性にスタイルシートファイルのURIを記述 -->
<link rel="stylesheet" href="">
<!-- IE8以下用に2つのスクリプトを記述
html5shiv.js: IE8以下にHTML5の要素を認識するようにさせる
respond.js: IE8以下にMedia Queriesの代替え機能を提供 -->
<!--[if lt IE 9]>
<script src="//cdn.jsdelivr.net/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- href属性にファビコンファイルのURIを記述 -->
<link rel="shortcut icon" href="">
<!-- コメントアウトしてあるコードは、iOS/Android用のアイコン指定 -->
<!--
<meta name="mobile-web-app-capable" content="yes">
<link rel="icon" sizes="196x196" href="">
<link rel="apple-touch-icon" sizes="152x152" href="">
-->
<!-- スクリプトでブロッキングを起こさないものはここに記述
可能であれば「async（文書の読み込みが完了した時点でスクリプトを実行）」を使用
Example: <script src="" async></script> -->
</head>
<body>
<!-- コンテンツを記述 -->
<!-- スクリプトでブロッキングを起こすものはここに記述
ブロッキングを起こす原因としては、CSSのセレクタ操作（IE）、負荷の高いDOM操作、多数のスクリプトなど -->
<!-- SCRIPTS -->
<!-- 例: <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> -->
</body>
</html>
**[[JavaScript API>JavaScript#w02f087f]] [#nc962eb8]
**参考 [#hf71a030]
-HTML5リファレンス~
http://www.htmq.com/html5/
-~Insider.NET > 業務アプリInsider > 人気順に説明する初めてのHTML5開発 - ＠IT~
http://www.atmarkit.co.jp/ait/subtop/features/dotnet/app/introhtml5_index.html
--位置情報をブラウザで活用！ Geolocationを使いこなそう（2011/07/14）
--ブラウザでストレージ？ Web Storageを使いこなそう（2011/08/12）
--アドインなしで実現可能！ ドラッグ＆ドロップを使いこなそう（2011/09/13）
--DOM操作の主流になるか！？ セレクタAPIを使いこなそう（2011/10/07）
--双方向通信を実現！ WebSocketを使いこなそう （2011/11/11）
--JavaScriptでファイル操作！？ File APIを使いこなそう（2011/12/16）
--列処理を実現！Web Workersを使いこなそう（2012/01/13）
--Webアプリもオフライン実行？ Indexed Databaseを使いこなそう（2012/02/14）
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
