HTML
をテンプレートにして作成
[
トップ
] [
新規
|
一覧
|
単語検索
|
最終更新
|
ヘルプ
]
開始行:
「[[.NET 開発基盤部会 Wiki>http://dotnetdevelopmentinfras...
-[[戻る>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...
-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 Prof...
---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 86...
-<address>タグで、親の<body>/<article>要素の問い合わせ先...
**テンプレート [#x20b5c62]
-HTML5でWebページを作成する時用の必要最小限をまとめたシン...
http://coliss.com/articles/build-websites/operation/work/...
<!DOCTYPE html>
<!-- コンテンツの言語を指定 -->
<html lang="ja">
<head>
<!-- IE8+に対して「IE=edge」と指定することで、利用できる...
参考: https://www.modern.ie/en-us/performance/how-t...
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- ページのタイトルを記述 -->
<title></title>
<!-- パフォーマンスのために使用する文字のエンコーディン...
参考: https://developers.google.com/speed/docs/best...
<meta charset="utf-8">
<!-- content属性にページの紹介文を記述 -->
<meta name="description" content="">
<!-- content属性にページの著者情報を記述 -->
<meta name="author" content="">
<!-- モバイル端末への対応、ページをビューポートの幅に合...
ズームを許可しない設定「user-scalable=no」は加えな...
<meta name="viewport" content="width=device-width, initi...
<!-- スタイルシートはできるだけ早くレンダリングされるた...
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/html5shi...
<script src="//cdnjs.cloudflare.com/ajax/libs/respond.js...
<![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...
<!-- SCRIPTS -->
<!-- 例: <script src="//ajax.googleapis.com/ajax/libs/jq...
</body>
</html>
**[[JavaScript API>JavaScript#w02f087f]] [#nc962eb8]
**参考 [#hf71a030]
-HTML5リファレンス~
http://www.htmq.com/html5/
終了行:
「[[.NET 開発基盤部会 Wiki>http://dotnetdevelopmentinfras...
-[[戻る>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...
-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 Prof...
---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 86...
-<address>タグで、親の<body>/<article>要素の問い合わせ先...
**テンプレート [#x20b5c62]
-HTML5でWebページを作成する時用の必要最小限をまとめたシン...
http://coliss.com/articles/build-websites/operation/work/...
<!DOCTYPE html>
<!-- コンテンツの言語を指定 -->
<html lang="ja">
<head>
<!-- IE8+に対して「IE=edge」と指定することで、利用できる...
参考: https://www.modern.ie/en-us/performance/how-t...
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- ページのタイトルを記述 -->
<title></title>
<!-- パフォーマンスのために使用する文字のエンコーディン...
参考: https://developers.google.com/speed/docs/best...
<meta charset="utf-8">
<!-- content属性にページの紹介文を記述 -->
<meta name="description" content="">
<!-- content属性にページの著者情報を記述 -->
<meta name="author" content="">
<!-- モバイル端末への対応、ページをビューポートの幅に合...
ズームを許可しない設定「user-scalable=no」は加えな...
<meta name="viewport" content="width=device-width, initi...
<!-- スタイルシートはできるだけ早くレンダリングされるた...
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/html5shi...
<script src="//cdnjs.cloudflare.com/ajax/libs/respond.js...
<![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...
<!-- SCRIPTS -->
<!-- 例: <script src="//ajax.googleapis.com/ajax/libs/jq...
</body>
</html>
**[[JavaScript API>JavaScript#w02f087f]] [#nc962eb8]
**参考 [#hf71a030]
-HTML5リファレンス~
http://www.htmq.com/html5/
ページ名:
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
