Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
HTML5 入門2013.3.16 @姫路IT系勉強会@spark6251 (N@N)
自己紹介• N@N(@spark6251)• N@N→NOaN→NOAN→ノアン• 明石高専 電気情報工学科四年生• プログラミングあんまりしてない• たぶんWeb屋進行中のお仕事• 明石高専
ねらい• HTML5について幾らか知ってもらう• セマンティクスな構文を
ねらい• HTML5について幾らか知ってもらう• セマンティクスな構文を• あとXHTMLdis
セマンティクスについて――
内容• HTMLとは• HTML5とは• HTML 4.01との比較• 読める!DTD――1分で分かる?DTD入門• まとめ
1. HTMLとは
ところで
そもそもHTMLとはなんぞや?
まずMIMEタイプの話Content-Type:• text/html• text/css• image/jpeg• application/pdfURLの付いてるもの全てにあるどう表示・処理すべきかの唯一の指標。参考:IANA | MIME ...
XHTMLの話• 要素名は小文字(ex. <html>• 空要素は閉じる(ex. <br />• 全ての属性値は囲む(ex. <div width=“100”>• <html lang=“ja-JP” xml:lang=“ja-JP”>ちなみに...
XHTMLの話1998.02:W3CによるXMLそもそもXMLは厳格な構文であるHTMLをXMLの形式で再定義できたXHTMLは厳格であるapplication/xhtml+xmlで厳格なチェック!エラーがあっても正常に[要出典]動作するHTM...
結局使われたのはXHTML 1.0でtext/htmlつまり構文はXHTMLながら実情はHTML• application/xhtml+xml(理想)• XHTML 1.0でtext/html(現実)
___/ || ̄ ̄|| ∧_∧|.....||__|| ( ) どうしてこうなった…| ̄ ̄\三⊂/ ̄ ̄ ̄/| | ( ./ /W3C
そもそもtext/htmlという逃げ道を置いていたのが悪い
どうしてこうなった?• そもそもHTMLの時代からエラーのあるHTMLを書いている人が多かった。(現在でも99%以上のWebページが一つのエラーを含んでいるという推測も有り)
結論
誰もわざわざ厳しくしようとしなかった
W3Cの対策• XHTML 1.1でMIMEタイプはapplication/xhtml+xmlのみに限定• XHTML 1.2、XHTML 2.0も同様(結局両方共中止)
そして今ほとんどXHTML 1.0であり1.1は普及しなかった。XHTMLを使っているとは名ばかりのXMLらしいHTMLである。
XHTML(developer)disXHTMLdis実態はXHTML(developer)dis
XHTML(developer)disXHTMLdis実態はXHTML(developer)disHTMLdisちゃんとした構文で書かない
XHTML(developer)disXHTMLdis実態はXHTML(developer)disHTMLdisW3Cdis結局そうなったのは誰のせい?ちゃんとした構文で書かない
XHTML is HTML
XHTML is HTMLというギャグを
2. HTML5とはHTML5になって何がどうなったか。HTML5で何ができるか。
HTML5とは一体何でしょう?
そうですね、HTML5とかJavaScriptで作ったコンテンツのことです
冗談はさておき
冗談はさておきいや割と冗談でもないんですが
小話• 2004.06:W3Cがワークショップを開くWebアプリケーション開発者向けの機能が出るがW3Cの構想ではない……• HTMLやCSSのためにDOMの拡張を?→否決• その機能を実現しようと離反(WHATWG)• W3CはXHTML 2...
つまり• HTML5の目的:明確なタグ構造、デベロッパーへの機能• 事実HTML5とはWeb Applications 1.0+Web Forms 2.0• FLASHの代替だとか、速度云々だとか、完全な勘違い
HTML5とは• HTMLのver. 5• 2014年に策定予定• デベロッパー泣かせ(主にブラウザのせい)• HTMLと5の間にスペースは挿れない• HTML+XHTML1+DOM2 HTML• フォームがかなり強くなった
HTML5とは今までのHTML• タグ付けした文書の製作• Webアプリケーションには不向きHTML5• より強固なタグ付け• Webアプリケーションの開発の手助け• 便利[要出典]• わかりやすい[要出典]• 神[要出典]
canvas
Web StorageFile APIWebGLWebSocketGeolocation API
HTML5の機能でもJSを使う更にはJSの優良ライブラリの増加
HTML5とは• <br />• 物理タグの論理タグ化• 意味の変わった要素• 消えた要素、新しい要素
• u:下線→軽いラベル付け• i:イタリック体→思考や専門用品• hr:水平線→段落レベルの区切り
• u:下線→軽いラベル付け• i:イタリック体→思考や専門用品• hr:水平線→段落レベルの区切り最早要素名から予測不可能
• 【重要】small:小さい文字→注釈や著作権表示• address:連絡先など→連絡先のみ
消えた要素これについては一言だけ
まともなHTML書いてたら消えた要素なんか使ってないので知らなくていいです
新しい要素• nav• section• header• footer• article• aside• video• audio• canvas
2013年5月2日発売
nav<nav><ul><li><a href=""></a></li><li><a href=""></a></li></ul></nav>• 主要なナビゲーションに用いる• <ul id=“mainMenu”>に相当する(もちろんそれ以外で...
section<article><section><header></header><div></div></section></article>• 汎用セクション• 基本的にヘッダを伴う• div要素のが汎用なブロック要素に対し、sectio...
header<header><img src="" alt="" /></header><!-- サイトのヘッダ --><section><header></header><!-- 記事の見出し --><p></p></section>• ヘッ...
footer<section><p></p><footer></footer></section><footer></footer></body></html>• フッタ• サイト全体のフッタでも良いし、セクションごとのフッタでも良い
article<article><section><header></header><div></div></section></article>• 例えば文書、ブログ記事、コメント欄、もしくはサイト内で自己完結してる項目
aside<article><aside></aside><!-- articleと密接な関係 --></article><aside></aside><!-- そうではない -->• 話の内容から少しそれたもの• 印刷物の囲み記事• 広告
video<video src=""></video><video src="“ controls></video><video src="" autoplay></video>• 動画を再生する• controlsでインターフェース表示• a...
audio<audio src=""></audio><audio src="" controls></audio><audio src="" autoplay></audio>• 音声を再生する• controlsでインターフェース表示• a...
canvas<canvas id="sample"></canvas>• 図形を描く• 標準のHTMLとJSのみで図形が描ける(!)• widthとheightのデフォルト値はそれぞれ300と150
canvas$(function() {//var ctx =document.getElementById(sample).getContext(2d);var ctx = $(#sample).get(0).getContext(2d);c...
参考:HTML5 &CSS3 Support(http://www.findmebyip.com/litmus)
参考:HTML5 &CSS3 Support(http://www.findmebyip.com/litmus)
登場させる意味• 当然わかりやすい構文になる(人間にも機械にも)• (そもそもユーザエージェントはid名から意味を推測してはいけない(!))
3. HTML 4.01との比較HTML5ではどう書けるのか
HTML 4.01<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"><html lang="ja-JP"><head><meta http-equiv="Content-Type" conten...
MIMEタイプの消失単純な話、Webで使われている標準のスタイルシートはCSSのみで、スクリプト言語はJavaScriptのみである省略された
JavaScript
The type attribute gives the styling language.If the attribute is present,its value must be a valid MIME typethat designat...
type属性はスタイルシート言語を提供する。属性が存在する場合、その値は言語を指定する有効なMIMEタイプでなければいけない。charsetパラメータが指定することはできない。属性が存在しない場合、type属性のデフォルト値は”text/css...
HTML 4.01<div class="header"><img src="" alt=""></div><div class="article"><div class="section"><div class="header"></div>...
4. 読める!DTD――1分で分かる?DTD入門ところでDTDは読めますか?
<!ELEMENT HTML O O (%html.content;)-- document root element --><!ELEMENT DL - - (DT|DD)+ -- definition list --><!ELEMENT D...
形式 意味A, B A, Bがこの順でA&B A, Bが順不同で+A 子孫にAが記述可能-A 子孫にAが記述不可
<!ELEMENT HTML O O (%html.content;)-- document root element --><!ENTITY % html.content "HEAD, BODY"><!ELEMENT HEAD O O (%h...
あれhtmlもheadもbodyも省略できるじゃん
<!DOCTYPE html><html lang="ja-JP"><head><meta charset="UTF-8" /><title>Title</title><link rel="stylesheet" href="css/style...
<!DOCTYPE html><meta charset="UTF-8" /><title>Title</title><link rel="stylesheet" href="css/style.css" /><script src=“js/m...
htmlもheadもbodyもいらんかったんや!
結局DTDっているの?• HTML5にDTDは存在しない←表現しきれない• 自身で考えてコーディング• 自身で思う適した書き方で良い参考:WCAN mini Markup vol.11をとおして、HTML5のDTDについて考えてみた(http:...
コンテンツモデル• Metadata、Flow、Sectioning、Heading、Phrasing、Embedded、Interactiveの6つのコンテンツもでるによる文書構造• 例えばa要素はFlow、Phrasing、Interact...
<a href=""><header></header><p></p></a>問題ない構文
それでもDTDを軽く知っておくことはミスをなくせるし、正しい文書構造にさせることは間違いない。
5. まとめ• HTML5で新しく出た要素でわかりやすいHTMLを• jQueryなどの手軽に使えるライブラリが増えてるのでこの機にJavaScript等の言語も<!DOCTYPE html><html lang="ja-JP"><head><...
御清聴ありがとうございました
HTML5 入門
HTML5 入門
HTML5 入門
HTML5 入門
HTML5 入門
HTML5 入門
HTML5 入門
HTML5 入門
HTML5 入門
HTML5 入門
HTML5 入門
HTML5 入門
HTML5 入門
HTML5 入門
Upcoming SlideShare
Loading in …5
×

HTML5 入門

7,574 views

Published on

姫路IT系勉強会で発表した内容です。

  • If you’re looking for a great essay service then you should check out ⇒ www.HelpWriting.net ⇐. A friend of mine asked them to write a whole dissertation for him and he said it turned out great! Afterwards I also ordered an essay from them and I was very happy with the work I got too.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Follow the link, new dating source: ❶❶❶ http://bit.ly/2u6xbL5 ❶❶❶
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Sex in your area is here: ❤❤❤ http://bit.ly/2u6xbL5 ❤❤❤
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

HTML5 入門

  1. 1. HTML5 入門2013.3.16 @姫路IT系勉強会@spark6251 (N@N)
  2. 2. 自己紹介• N@N(@spark6251)• N@N→NOaN→NOAN→ノアン• 明石高専 電気情報工学科四年生• プログラミングあんまりしてない• たぶんWeb屋進行中のお仕事• 明石高専
  3. 3. ねらい• HTML5について幾らか知ってもらう• セマンティクスな構文を
  4. 4. ねらい• HTML5について幾らか知ってもらう• セマンティクスな構文を• あとXHTMLdis
  5. 5. セマンティクスについて――
  6. 6. 内容• HTMLとは• HTML5とは• HTML 4.01との比較• 読める!DTD――1分で分かる?DTD入門• まとめ
  7. 7. 1. HTMLとは
  8. 8. ところで
  9. 9. そもそもHTMLとはなんぞや?
  10. 10. まずMIMEタイプの話Content-Type:• text/html• text/css• image/jpeg• application/pdfURLの付いてるもの全てにあるどう表示・処理すべきかの唯一の指標。参考:IANA | MIME Media Types(http://www.iana.org/assignments/media-types)
  11. 11. XHTMLの話• 要素名は小文字(ex. <html>• 空要素は閉じる(ex. <br />• 全ての属性値は囲む(ex. <div width=“100”>• <html lang=“ja-JP” xml:lang=“ja-JP”>ちなみにXHTML 1.1でlang属性は廃止
  12. 12. XHTMLの話1998.02:W3CによるXMLそもそもXMLは厳格な構文であるHTMLをXMLの形式で再定義できたXHTMLは厳格であるapplication/xhtml+xmlで厳格なチェック!エラーがあっても正常に[要出典]動作するHTMLとはおさらば!
  13. 13. 結局使われたのはXHTML 1.0でtext/htmlつまり構文はXHTMLながら実情はHTML• application/xhtml+xml(理想)• XHTML 1.0でtext/html(現実)
  14. 14. ___/ || ̄ ̄|| ∧_∧|.....||__|| ( ) どうしてこうなった…| ̄ ̄\三⊂/ ̄ ̄ ̄/| | ( ./ /W3C
  15. 15. そもそもtext/htmlという逃げ道を置いていたのが悪い
  16. 16. どうしてこうなった?• そもそもHTMLの時代からエラーのあるHTMLを書いている人が多かった。(現在でも99%以上のWebページが一つのエラーを含んでいるという推測も有り)
  17. 17. 結論
  18. 18. 誰もわざわざ厳しくしようとしなかった
  19. 19. W3Cの対策• XHTML 1.1でMIMEタイプはapplication/xhtml+xmlのみに限定• XHTML 1.2、XHTML 2.0も同様(結局両方共中止)
  20. 20. そして今ほとんどXHTML 1.0であり1.1は普及しなかった。XHTMLを使っているとは名ばかりのXMLらしいHTMLである。
  21. 21. XHTML(developer)disXHTMLdis実態はXHTML(developer)dis
  22. 22. XHTML(developer)disXHTMLdis実態はXHTML(developer)disHTMLdisちゃんとした構文で書かない
  23. 23. XHTML(developer)disXHTMLdis実態はXHTML(developer)disHTMLdisW3Cdis結局そうなったのは誰のせい?ちゃんとした構文で書かない
  24. 24. XHTML is HTML
  25. 25. XHTML is HTMLというギャグを
  26. 26. 2. HTML5とはHTML5になって何がどうなったか。HTML5で何ができるか。
  27. 27. HTML5とは一体何でしょう?
  28. 28. そうですね、HTML5とかJavaScriptで作ったコンテンツのことです
  29. 29. 冗談はさておき
  30. 30. 冗談はさておきいや割と冗談でもないんですが
  31. 31. 小話• 2004.06:W3Cがワークショップを開くWebアプリケーション開発者向けの機能が出るがW3Cの構想ではない……• HTMLやCSSのためにDOMの拡張を?→否決• その機能を実現しようと離反(WHATWG)• W3CはXHTML 2.0、WHATWGはフォームなどの機能• XHTML 2.0は終息し、W3CとWHATWGは共同作業、HTML5開発へ
  32. 32. つまり• HTML5の目的:明確なタグ構造、デベロッパーへの機能• 事実HTML5とはWeb Applications 1.0+Web Forms 2.0• FLASHの代替だとか、速度云々だとか、完全な勘違い
  33. 33. HTML5とは• HTMLのver. 5• 2014年に策定予定• デベロッパー泣かせ(主にブラウザのせい)• HTMLと5の間にスペースは挿れない• HTML+XHTML1+DOM2 HTML• フォームがかなり強くなった
  34. 34. HTML5とは今までのHTML• タグ付けした文書の製作• Webアプリケーションには不向きHTML5• より強固なタグ付け• Webアプリケーションの開発の手助け• 便利[要出典]• わかりやすい[要出典]• 神[要出典]
  35. 35. canvas
  36. 36. Web StorageFile APIWebGLWebSocketGeolocation API
  37. 37. HTML5の機能でもJSを使う更にはJSの優良ライブラリの増加
  38. 38. HTML5とは• <br />• 物理タグの論理タグ化• 意味の変わった要素• 消えた要素、新しい要素
  39. 39. • u:下線→軽いラベル付け• i:イタリック体→思考や専門用品• hr:水平線→段落レベルの区切り
  40. 40. • u:下線→軽いラベル付け• i:イタリック体→思考や専門用品• hr:水平線→段落レベルの区切り最早要素名から予測不可能
  41. 41. • 【重要】small:小さい文字→注釈や著作権表示• address:連絡先など→連絡先のみ
  42. 42. 消えた要素これについては一言だけ
  43. 43. まともなHTML書いてたら消えた要素なんか使ってないので知らなくていいです
  44. 44. 新しい要素• nav• section• header• footer• article• aside• video• audio• canvas
  45. 45. 2013年5月2日発売
  46. 46. nav<nav><ul><li><a href=""></a></li><li><a href=""></a></li></ul></nav>• 主要なナビゲーションに用いる• <ul id=“mainMenu”>に相当する(もちろんそれ以外でも主要であれば該当)
  47. 47. section<article><section><header></header><div></div></section></article>• 汎用セクション• 基本的にヘッダを伴う• div要素のが汎用なブロック要素に対し、section要素は汎用なセクション
  48. 48. header<header><img src="" alt="" /></header><!-- サイトのヘッダ --><section><header></header><!-- 記事の見出し --><p></p></section>• ヘッダ• 見出し• ページ全体のヘッダでも良いし、セクションごとの見出しでも良い
  49. 49. footer<section><p></p><footer></footer></section><footer></footer></body></html>• フッタ• サイト全体のフッタでも良いし、セクションごとのフッタでも良い
  50. 50. article<article><section><header></header><div></div></section></article>• 例えば文書、ブログ記事、コメント欄、もしくはサイト内で自己完結してる項目
  51. 51. aside<article><aside></aside><!-- articleと密接な関係 --></article><aside></aside><!-- そうではない -->• 話の内容から少しそれたもの• 印刷物の囲み記事• 広告
  52. 52. video<video src=""></video><video src="“ controls></video><video src="" autoplay></video>• 動画を再生する• controlsでインターフェース表示• autoplayで自動再生
  53. 53. audio<audio src=""></audio><audio src="" controls></audio><audio src="" autoplay></audio>• 音声を再生する• controlsでインターフェース表示• autoplayで自動再生
  54. 54. canvas<canvas id="sample"></canvas>• 図形を描く• 標準のHTMLとJSのみで図形が描ける(!)• widthとheightのデフォルト値はそれぞれ300と150
  55. 55. canvas$(function() {//var ctx =document.getElementById(sample).getContext(2d);var ctx = $(#sample).get(0).getContext(2d);ctx.beginPath();ctx.fillStyle = rgba(0, 0, 0, 1);ctx.fillRect(10, 10, 10, 20);});
  56. 56. 参考:HTML5 &CSS3 Support(http://www.findmebyip.com/litmus)
  57. 57. 参考:HTML5 &CSS3 Support(http://www.findmebyip.com/litmus)
  58. 58. 登場させる意味• 当然わかりやすい構文になる(人間にも機械にも)• (そもそもユーザエージェントはid名から意味を推測してはいけない(!))
  59. 59. 3. HTML 4.01との比較HTML5ではどう書けるのか
  60. 60. HTML 4.01<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"><html lang="ja-JP"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta http-equiv="Content-Style-Type" content="text/css"><meta http-equiv="Content-Script-Type" content="text/javascript"><title>Title</title><link rel="stylesheet" href="style.css" type="text/css"><script src=“main.js” type="text/javascript"></script>HTML5<!DOCTYPE html><html lang="ja-JP"><head><meta charset="UTF-8" /><title>Title</title><link rel="stylesheet" href="style.css" /><script src=“main.js”></script>
  61. 61. MIMEタイプの消失単純な話、Webで使われている標準のスタイルシートはCSSのみで、スクリプト言語はJavaScriptのみである省略された
  62. 62. JavaScript
  63. 63. The type attribute gives the styling language.If the attribute is present,its value must be a valid MIME typethat designates a styling language.The charset parameter must not be specified.The default value for the type attribute,which is used if the attribute is absent, is "text/css"参考:HTML Living Standard(http://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#the-style-elementhttp://www.whatwg.org/specs/web-apps/current-work/multipage/scripting-1.html#the-script-element)The src attribute, if specified,gives the address of the external script resource to use.The value of the attribute must be avalid non-empty URL potentially surrounded by spacesidentifying a script resource of the type given by the type attribute,if the attribute is present,or of the type "text/javascript", if the attribute is absent.
  64. 64. type属性はスタイルシート言語を提供する。属性が存在する場合、その値は言語を指定する有効なMIMEタイプでなければいけない。charsetパラメータが指定することはできない。属性が存在しない場合、type属性のデフォルト値は”text/css”である。
  65. 65. HTML 4.01<div class="header"><img src="" alt=""></div><div class="article"><div class="section"><div class="header"></div><p></p></div></div>HTML5<header><img src="" alt="" /></header><article><section><header></header><p></p></section></article>
  66. 66. 4. 読める!DTD――1分で分かる?DTD入門ところでDTDは読めますか?
  67. 67. <!ELEMENT HTML O O (%html.content;)-- document root element --><!ELEMENT DL - - (DT|DD)+ -- definition list --><!ELEMENT DT - O (%inline;)* -- definition term --><!ELEMENT DD - O (%flow;)* -- definition description --><!ELEMENT IMG - O EMPTY -- Embedded image -->参考:strict.dtd
  68. 68. 形式 意味A, B A, Bがこの順でA&B A, Bが順不同で+A 子孫にAが記述可能-A 子孫にAが記述不可
  69. 69. <!ELEMENT HTML O O (%html.content;)-- document root element --><!ENTITY % html.content "HEAD, BODY"><!ELEMENT HEAD O O (%head.content;) +(%head.misc;)-- document head --><!ENTITY % head.misc"SCRIPT|STYLE|META|LINK|OBJECT“-- repeatable head elements --><!ELEMENT BODY O O (%block;|SCRIPT)+ +(INS|DEL)-- document body -->
  70. 70. あれhtmlもheadもbodyも省略できるじゃん
  71. 71. <!DOCTYPE html><html lang="ja-JP"><head><meta charset="UTF-8" /><title>Title</title><link rel="stylesheet" href="css/style.css" /><script src=“js/main.js”></script></head><body><article><section><header></header><p></p></section></article></body></html>
  72. 72. <!DOCTYPE html><meta charset="UTF-8" /><title>Title</title><link rel="stylesheet" href="css/style.css" /><script src=“js/main.js”></script><article><section><header></header><p></p></section></article>
  73. 73. htmlもheadもbodyもいらんかったんや!
  74. 74. 結局DTDっているの?• HTML5にDTDは存在しない←表現しきれない• 自身で考えてコーディング• 自身で思う適した書き方で良い参考:WCAN mini Markup vol.11をとおして、HTML5のDTDについて考えてみた(http://chifffon.net/blog/web/entry-135.html)
  75. 75. コンテンツモデル• Metadata、Flow、Sectioning、Heading、Phrasing、Embedded、Interactiveの6つのコンテンツもでるによる文書構造• 例えばa要素はFlow、Phrasing、Interactiveに属す。• block要素、inline要素の区別ではない
  76. 76. <a href=""><header></header><p></p></a>問題ない構文
  77. 77. それでもDTDを軽く知っておくことはミスをなくせるし、正しい文書構造にさせることは間違いない。
  78. 78. 5. まとめ• HTML5で新しく出た要素でわかりやすいHTMLを• jQueryなどの手軽に使えるライブラリが増えてるのでこの機にJavaScript等の言語も<!DOCTYPE html><html lang="ja-JP"><head><meta charset="UTF-8" /><title>Title</title><link rel="stylesheet" href=“css/style.css" /><script src=“js/main.js”></script></head>
  79. 79. 御清聴ありがとうございました

×