今からハジメるHTML5マークアップ

64
有限会社futomi 代表取締役 羽田野 太巳(はたの ふとみ) http://www.futomi.com/ http://www.html5.jp/ http://twitter.com/futomi

description

SwapSkills2010 vol2 羽田野太巳

Transcript of 今からハジメるHTML5マークアップ

  • futomihttp://www.futomi.com/http://www.html5.jp/http://twitter.com/futomi

    http://www.futomi.com/http://www.html5.jp/http://twitter.com/futomihttp://swapskills.info/
  • http://www.html5.jp/

    http://www.html5.jp/
  • http://www.amazon.co.jp/gp/product/4798025291/

    http://www.amazon.co.jp/gp/product/4798025291/
  • HTML5 IE

  • XML XHTML5

  • HTML5

    OK

  • 512 "UTF-8" "Shift_JIS""EUC-JP" "UTF-32" charsetmeta1

  • HTML5XHTMLOK

    XHTMLContent-Type text/html XHTMLHTML

  • The W3C Markup Validation Service http://validator.w3.org/

    Validator.nu http://html5.validator.nu/

    http://validator.w3.org/http://html5.validator.nu/
  • http://validator.w3.org/

    http://validator.w3.org/
  • http://html5.validator.nu/

    http://html5.validator.nu/
  • DOM CSS

  • HTML5.JP HTML5

  • DOM

    header hgroup

    h1h2

    IEDOM

    headerhgrouph1h2/hgroup/header

  • JavaScript document.createElement(""); appendChild()

  • ie.js(function () {var els = ['section', 'article', 'hgroup', 'header','footer', 'nav','aside', ];

    for (var i=0; i

  • section, article, aside, nav { display: block; }

  • section article aside nav hgroup header footer

  • ...
  • ...

    ...

    ...
  • home...

  • ...

    ...

  • HTML5.JP HTML HTML5

    homeHTML5 ...

  • ......

    Copyright 2007 - 2009 Futomi Hatano All Rights Reserved.

  • HTML5

    h1h6section, article, aside, nav

  • 1

    23

    123

  • 1

    2

    3

  • HTML5 Outliner http://gsnedders.html5.org/outliner/

    HTML5

    HTML5...

    ...

    section

    section...

    article

    article...

    DOM

    DOM...

    http://gsnedders.html5.org/outliner/
  • ...

    ...

    ...

    ...
  • ...

    copyright 2010 Futomi Hatano

  • em strongstrong

  • classCSS

  • Oh! My God!

  • classCSS

  • 6

  • CSS basefont, big, center, font, s, strike, tt, u

    frame, frameset, noframes

    acronym, applet, isindex, dir

  • ,

    align , , bgcolor noshadesizewidth , nowrapvalign

    shapecoords scope

  • HTML5 CSS

  • futomi

    http://www.futomi.com/http://www.html5.jp/

    http://twitter.com/futomi

    http://www.futomi.com/http://www.html5.jp/http://twitter.com/futomiHTML52010429HTML5HTMLHTMLW3C Markup Validation ServiceValidator.nuIEInternet ExplorerInternet ExplorerInternet ExplorerInternet ExplorerInternet ExplorerInternet Explorersectionarticlearticlesectionnavasideasidehgrouphgroupheaderfooter 36hrhrsmallsmallstrongstrongiibb1 1 2 2 3 3