PHP BLT だけど HTML5 の コンテンツモデルのお話

PHP BLT だけど HTML5 の コンテンツモデルのお話

Ff822949384025796e11fd7f681df060?s=128

Katsuhiro OGAWA

November 24, 2015
Tweet

Transcript

  1. 1)1#-5͚ͩͲ )5.-ͷ ίϯςϯπϞσϧͷ͓࿩ খ઒༤େ!pWFTUS 1 PHP BLT #1

  2. ͩΕ খ઒༤େ ͓͕Θ͔ͭͻΖ  ͖Β͍ͳ΋ͷτϚτ 2

  3. )5.-ͱ͍͑͹ 3

  4. <!DOCTYPE html> 4

  5. <meta charset="utf8"> 5

  6. <section> <article> <header> 6

  7. <input type="url"> <input type="email" required> 7

  8. <canvas> <svg> 8

  9. ͋ͷΠέͯΔ΍ͭͶ 9

  10. ͳͲͱ͍͏ τʔγϩ޲͚ͷ࿩Ͱ͸ͳ͘ 10

  11. )5.-ͷ ίϯςϯπϞσϧʹ͍ͭͯ ࿩͠·͢ 11

  12. ϒϩοΫཁૉɺΠϯϥΠϯཁૉ w )5.-ΑΓલ͸ɺཁૉΛ
 ʮϒϩοΫ Ϩϕϧ ʯʮΠϯϥΠϯʯ
 ͷେ͖ͭ͘ʹ෼͚͍ͯ·ͨ͠ w ΠϯϥΠϯཁૉͷதʹϒϩοΫཁૉ͸
 ഑ஔͰ͖·ͤΜͰͨ͠

    12
  13. <!-- OK --> <div><a>PHP</a></div> <!-- NG --> <a><div>PHP</div></a> 13

  14. ίϯςϯπϞσϧ w ཁૉ͕ͲͷίϯςϯπΛ಺แͰ͖Δ͔ͷఆٛ w ίϯςϯπϞσϧʹ͸༷ʑͳΧςΰϦʔ͕
 ఆٛ͞Ε͓ͯΓɺ֤ཁૉ͸͔ͳΒͣͲΕ͔ͷ ΧςΰϦʔʹଐ͍ͯ͠Δ w IUUQXXXXPSH53IUNMEPNIUNMDPOUFOUNPEFMT 14

  15. ΧςΰϦʔ 15

  16. Կ͕ҧ͏͔ w ཁૉ͕ෳ਺ͷΧςΰϦʔʹॴଐͰ͖ΔΑ͏ʹ ͳͬͨ w ΧςΰϦʔ͕ࡉ෼Խ͞Εͨ w ྫ͑͹aཁૉ͸USBOTQBSFOUDPOUFOUͱݴ͏ ಛघͳίϯςϯπϞσϧʹଐ͢Δ 16

  17. <!-- HTML5 ͳΒ OK --> <a><div>PHP</div></a> 17

  18. ίϯςϯπϞσϧͰؾΛ͚ͭΔ͜ͱ͸͋Δ͔ w جຊతʹ͸)5.-࣌୅ͱಉ͡Α͏ʹ࢖͑Δ w ϒϩοΫΠϯϥΠϯͷߟ͑ํ͸
 $44ͷdisplayͰ݈ࡏ 18

  19. ࡉ͔͍͜ͱ͸8FCͰ
 IUUQXXXXPSH53IUNM EPNIUNMDPOUFOUNPEFMT 19

  20. ͳΜͰ1)1#-5Ͱ )5.-ͷ࿩Λ͢Δͷ͔ 20

  21. ίϯςϯπϞσϧΛղऍͯ͠ )5.-Λิਖ਼͢Δ
 1)1ϥΠϒϥϦΛ࡞͔ͬͨΒͰ͢ 21

  22. )5.-1BSBHSBQIJ[FS w <br>ͷ࿈ଓΛݕ஌ͯ͠ஈམΛ<p>Ͱғ͏ w ίϯςϯπϞσϧͷ࢓༷ʹ߹Θͤͯ
 )5.-Λଥ౰ͳ಺༰ʹ͢Δ w Ϡϑʔͷ࢓ࣄதʹ࡞ͬͨ 22

  23. ΦʔϓϯιʔεԽʂ 23

  24. ͢Δલʹୀ৬ͯ͠͠·͍·ͨ͠ 24 ϠϑʔͷͲͳ͔ͨɺΑΖ͓͘͠ئ͍͠·͢

  25. ݄͔Β"ODBSʹస৬͠·͢ 25

  26. ͓͠·͍ 26