HTML5

มี�อะไรใหมีใน HTML5?o เวอร์�ชั่� �นใหม่ ใน HTML

o สิ่��งที่��ใหม่ และม่าตร์ฐาน กั�บร์ายละเอ�ยดo HTML5 เป็�น HTML + CSS3 + JavaScript APIs

HTML5 ≈ HTML 5 + CSS 3 + JavaScript

•HTML5 is a suite of tools for:▫Markup (HTML 5)▫Presentation (CSS 3)▫Interaction (DOM, Ajax, APIs)

http://slides.html5rocks.com/

HTML5•HTML5 (เอชั่ที่�เอ ม่แอล 5) เป็�นม่าตร์ฐานต�วต อไป็ของ

HTMLที่��อย# ในร์ะหว างกัาร์พั�ฒนา โดยม่�ล�กัษณะเหม่)อนม่าตร์ฐานต�วกั อนหน*าที่�+ง HTML 4.01 และ XHTML 1.1 ที่��ใชั่*ในกัาร์จั�ดโคร์งสิ่ร์*างและกัาร์แสิ่ดงผลของเน)+อหาสิ่/าหร์�บเว�ลด�ไวด�เว บ ม่าตร์ฐานใหม่ จัะม่�ค0ณล�กัษณะเด นที่��สิ่/าค�ญได*แกั •กัาร์ใชั่*งานว�ด�โอ•กัาร์แสิ่ดงต/าแหน งที่างภู#ม่�ศาสิ่ตร์�•กัาร์เกั บไฟล�ในล�กัษณะออฟไลน�•กัาร์แสิ่ดงกัร์าฟ5กัสิ่�• input types แบบใหม่ เชั่ น search, number, range,

color, tel, url, email, date, month, week, time, datetime, datetime-local

HTML5• โดยค0ณสิ่ม่บ�ต�เด นหลายอย างไม่ จั/าเป็�นต*องต�ดต�+งซอฟต�แวร์�เพั��ม่

เชั่ น เกั�ยร์สิ่� แฟลชั่ หร์)อ ซ�ลเวอร์�ไลต� เหม่)อนที่��ผ านม่าในกัาร์ใชั่*งาน HTML4

•HTML5 ได*ม่�กัาร์แนะน/า เอเลเม่นต�ใหม่ หลายต�วเพั)�อตอบสิ่นองกัาร์ใชั่*งานของเว บไซต�ร์0 นใหม่ โดยเอเลเม่นต�ใหม่ สิ่ วนหน7�งเป็�นซ�แม่นต�กัที่ดแที่นกัาร์ใชั่*งานของบล อกัที่��วไป็ (<div>) และเอเลเม่นต�อ�นไลน� (<span>) ยกัต�วอย างเชั่ น <nav> (บล อกัสิ่/าหร์�บเม่น#บอกัที่าง) และ <footer> (สิ่ วนด*านล างของเว บเพัจั) เอเลเม่นต�สิ่ วนอ)�นแสิ่ดงถึ7งกัาร์ใชั่*งาน เชั่ น เอเลเม่นต�ที่างด*านสิ่)�อ <audio> และ <video>เอเลเม่นต�บางต�วที่��ตกัร์0 นสิ่/าหร์�บ HTML 4.01 ได*ถึ#กัยกัเล�กั เชั่ น <font> และ <center> ซ7�งถึ#กัที่ดแที่นด*วยกัาร์ที่/างานผ าน CSS

ความีสามีารถของ HTML51. Semantics

• เที่คโนโลย�กัล0 ม่ Semantics ค)อต�ว syntax ของภูาษา HTML5 ที่��แน นอนว าเป็ล��ยนไป็จัากั HTML4 ซ7�งม่�แที่ กัใหม่ ๆ และค0ณสิ่ม่บ�ต� (attribute) ใหม่ ๆ เพั��ม่ข7+นอ�กัพัอสิ่ม่ควร์

• โดยโคร์งสิ่ร์*างของภูาษาแล*ว HTML5 ย�งเหม่)อนกั�บ HTML แต เพั��ม่แที่ กัใหม่ ต�ดแที่ กัเกั า และเป็ล��ยนว�ธี�ใชั่*แที่ กัเกั าบางต�วออกัไป็

ความีสามีารถของ HTML51. Semantics

แท็�กใหมี แที่ กักัล0 ม่น�+จัะชั่ วยบ งบอกัความ่หม่ายของว�ตถึ0ในเว บเพัจัได*ด�ข7+น เชั่ น จัากัเด�ม่ใชั่* <div id="header"> เป็ล��ยนม่าเป็�น <header> ที่/าให*เบร์าว�เซอร์�สิ่าม่าร์ถึร์�บที่ร์าบความ่หม่ายของว�ตถึ0แต ละชั่�+นได*ด�ข7+นต�วอย าง

•section - บ งบอกัเซคชั่�นของเน)+อหา•article - กั/าหนดขอบเขตของต�วเน)+อบที่ความ่•aside - กั/าหนดขอบเขตของเน)+อหาเสิ่ร์�ม่ (ล*อม่กัร์อบ)•header - กั/าหนดขอบเขตของสิ่ วนเร์��ม่ต*นหร์)อสิ่ วนห�วของเว บไซต� •footer - กั/าหนดขอบเขตของสิ่ วนที่*ายของเว บไซต� เชั่ นข*อความ่

กั/าหนดสิ่�ที่ธี�<ต างๆ•nav - กั/าหนดเป็�นสิ่ วนน/าที่างของเว บไซต�•figure - ภูาพัหร์)อว�ด�โอป็ร์ะกัอบเน)+อหา (สิ่าม่าร์ถึซ*อนแที่ กั img หร์)อ

video ได*)

โครงสร�างเอกสาร HTML5

Header

Navigation

Aside

Footer

Section

ArticleFooter

ArticleFooter

ArticleFooter

Figure

Image, Video, Quote, Table, etc…

Legend

ความีสามีารถของ HTML51. Semantics

attribute ใหมี สิ่/าหร์�บ input type ที่��เจัาะจังกัว าเด�ม่ เชั่ น จัากัเด�ม่ใชั่* <input type="text" id="email"> เป็ล��ยนเป็�น <input type="email"> แที่น

•tel - เบอร์�โที่ร์•search - ชั่ องค*นหา•url•email•datetime•date•time•color

ความีสามีารถของ HTML51. Semantics

แท็�กท็��ถ�กตั�ดออก สิ่ วนใหญ เป็�นแที่ กัเกั าที่��ที่/าหน*าที่��กั/าหนดร์#ป็แบบกัาร์แสิ่ดงผล ซ7�งใชั่* CSS แที่น นอกัจัากัน�+ย�งเอาแที่ กัที่��เกั��ยวกั�บเฟร์ม่ที่�+งหม่ดออกัไป็ เพัร์าะล*าสิ่ม่�ยแล*ว และแที่ กัที่

•big•center•font•strike•frame•frameset•noframes•acronym•object

ความีสามีารถของ HTML51. Semantics

แท็�กท็��ถ�กเปลี่��ยนว"ธี�ใช้� แที่ กัเกั าแต เป็ล��ยนความ่หม่าย-ว�ธี�ใชั่*งาน เชั่ น•i - ไม่ ได*หม่ายถึ7งกัาร์ที่/าต�วเอ�ยง (เพัร์าะใชั่* CSS) แต หม่ายถึ7งโที่นสิ่�ของ

ต�วข*อความ่ที่��เป็ล��ยนแป็ลง•small - หม่ายถึ7งข*อความ่หร์)อคอม่เม่นต�ป็ร์ะกัอบเน)+อหาหล�กั ที่��ควร์จัะ

แสิ่ดงด*วยต�วเล กักัว าป็กัต�•strong - หม่ายถึ7งข*อความ่สิ่/าค�ญ ไม่ ใชั่ กัาร์เน*นด*วยต�วเข*ม่•u - เป็�นกัาร์บ งชั่�+ว าข*อความ่จั0ดน�+ม่�กัาร์แสิ่ดงผลแบบพั�เศษ เชั่ น จังใจั

เข�ยนให*ผ�ดเพั)�อเป็�นต�วอย าง หร์)อ ชั่)�อในภูาษาจั�น เป็�นต*นนอกัจัากัแที่ กัหล�กัที่��เป็ล��ยนแป็ลงแล*ว เที่คโนโลย�ในหม่วดน�+ย�งร์วม่ไป็ถึ7ง

เที่คโนโลย�เว บหลายๆ ชั่น�ดที่��ม่�อย# แล*วในป็=จัจั0บ�น เชั่ น RDFa, Microdata, Microformats ที่��ชั่ วยกั/าหนดความ่หม่ายให*กั�บเน)+อหา เพั)�อน/าไป็ป็ร์ะม่วลผลต อได*ง ายข7+น

ความีสามีารถของ HTML52. Offline & Storage

เป็�นเที่คโนโลย�ที่��ชั่ วยให*เว บสิ่าม่าร์ถึที่/างานแบบออฟไลน�ได* และเกั บข*อม่#ลไว*ใชั่*งานบนเคร์)�องของผ#*ชั่ม่เว บ- Web Storage เป็�นกัาร์เกั บข*อม่#ลในร์#ป็ key-value (ภูาษาโป็ร์แกัร์ม่บางภูาษาเร์�ยกั dictionary) แบ งเป็�น

•Session storage เกั บข*อม่#ลเฉพัาะเซสิ่ชั่�นกัาร์ที่ องเว บเม่)�อ ป็5ดแที่ บข*อม่#ลกั หายไป็ ใชั่*ออบเจัคต�ชั่น�ด sessionStorage

•Local storage เกั บข*อม่#ลร์ะยะยาว (persistence) โดยใชั่*ออบเจัคต�ชั่)�อ localStorage สิ่าม่าร์ถึเป็5ดเว บเพัจัเด�ยวกั�นใน 2 แที่ บหร์)อม่ากักัว า ซ7�งจัะแชั่ร์�ข*อม่#ลชั่0ดเด�ยวกั�น

- ฐานข�อมี�ลี่•Web SQL Database ค)อกัาร์น/า SQL ม่าใสิ่ เบร์าว�เซอร์� (สิ่ วน

ม่ากัน�ยม่ SQLite) •IndexedDB เป็�นกัาร์เกั บข*อม่#ลแบบ key-value เหม่)อนกั�บ Web Storage แต เพั��ม่กัาร์ที่/าด�ชั่น� (index) ชั่ วยให*หาข*อม่#ลได*ร์วดเร์ วข7+น และเพั��ม่เร์)�อง transactions เพั)�อความ่ป็ลอดภู�ยของข*อม่#ลม่าด*วย

- File API ค)อกัาร์จั�ดกัาร์กั�บ "ไฟล�" ม่� API สิ่องต�วค)อ FileReader กั�บ FileWriter

ความีสามีารถของ HTML53. Device Access

• เที่คโนโลย�กัาร์เชั่)�อม่โยงกั�บฟ?เจัอร์�ของฮาร์�ดแวร์�โดยเฉพัาะฮาร์�ดแวร์�แบบพักัพัา เชั่ น Geolocation API เพั)�อขอข*อม่#ลเชั่�งพั�กั�ดของอ0ป็กัร์ณ�

•กัาร์เข*าถึ7งไม่โคร์โฟนและกัล*องถึ ายภูาพัของอ0ป็กัร์ณ� •กัาร์เข*าถึ7งข*อม่#ลภูายในต�วอ0ป็กัร์ณ� เชั่ นสิ่ม่0ดที่��อย# หร์)อข*อม่#ลกัาร์

เอ�ยงเคร์)�อง (tilt orientation)•ฟ?เจัอร์�น�+จัะไม่ ได*อย# ในร์#ป็ของแที่ กั HTML โดยตร์ง แต จัะเป็�น API ที่��

ฝั่=� งเบร์าว�เซอร์�ต*องเตร์�ยม่ไว*ให* แล*วเว บเพัจัค อยเร์�ยกัใชั่*ผ านจัาวาสิ่คร์�ป็ต�อ�กัที่�หน7�ง

• ในกัาร์ใชั่*งานจัร์�งใชั่*ผ านเฟร์ม่เว�ร์�คจัาวาสิ่คร์�ป็ต� เชั่ น jQuery Mobile, Sencha Touch หร์)อ SproutCore เป็�นต*น

ความีสามีารถของ HTML54. Connectivityเที่คโนโลย�กัาร์เชั่)�อม่ต อกั�บเคร์)อข ายที่��ด�ข7+น ป็ร์ะกัอบด*วย• WebSockets เป็�น API ที่��ต อจัากั AJAX เที่คน�คค)อกัาร์ push

ข*อม่#ลจัากัเซ�ร์�ฟเวอร์�ม่าย�งไคลเอนต�เน)�องจัากัเที่คน�คกัาร์สิ่ งข*อม่#ลแบบ HTTP แบบด�+งเด�ม่จัะเป็5ดกัาร์เชั่)�อม่

ต อกั�บเซ�ร์�ฟเวอร์�เพั)�อสิ่ งข*อม่#ล แล*วต�ดกัาร์เชั่)�อม่ต อเม่)�อใชั่*เสิ่ร์ จั ด�งน�+นกัาร์ขอข*อม่#ลจัากัเซ�ร์�ฟเวอร์�จั7งที่/าได*ยากั เพัร์าะต*องด7งข*อม่#ลจัากัเซ�ร์�ฟเวอร์� (polling)ซ7�งเป็ล)องโหลดของเซ�ร์�ฟเวอร์�โดยเฉพัาะกัร์ณ�ที่��ต*องเป็5ดกัาร์เชั่)�อม่ต อ HTTP ค*างเอาไว* (Long polling หร์)อ COMET) ด�งน�+น WebSockets จั7งเป็�นเที่คโนโลย�ที่��ชั่ วยแกั*ป็=ญหาน�+ โดยสิ่ร์*างกัาร์เชั่)�อม่ต อแบบถึาวร์ร์ะหว างเซ�ร์�ฟเวอร์�กั�บไคลเอนต� เพั)�อให*สองฝั่'� งสิ่ งข*อม่#ลกั�นได*ตลอด โดยอาศ�ย Protocol TCP ต�วอย างกัาร์ใชั่*งาน WebSockets ด*วย ws:// หร์)อถึ*าต*องกัาร์กัาร์เชั่)�อม่ต อแบบป็ลอดภู�ย wss://• ข*อด�ค)อสิ่ งข*อม่#ลได*เร์ วกัว า HTTP • ข*อเสิ่�ยค)อเซ�ร์�ฟเวอร์�ต*องร์องร์�บ WebSockets ด*วย

ป็=จัจั0บ�น WebSockets เป็�นม่าตร์ฐานที่��ร์ �บร์องโดย IETF และกั/าล�งผ านกัร์ะบวนกัาร์เข*าเป็�นม่าตร์ฐานของ W3C

• ข*อม่#ลเพั��ม่เต�ม่: Wikipedia, W3C, สิ่อนกัาร์ใชั่*งานที่�� HTML5 Rocks

ความีสามีารถของ HTML54. Connectivity (ตัอ)

•Server-sent Events (SSE) เป็�นข*อม่#ลที่างเด�ยวจัากัเซ�ร์�ฟเวอร์�ม่าย�งไคลเอนต� เชั่ น notification ของ Facebook/Twitter หล�กักัาร์ที่/างานของ SSE ค)อเซ�ร์�ฟเวอร์�สิ่าม่าร์ถึสิ่ งข*อม่#ลไป็ย�งไคลเอนต�ได*โดยตร์ง โดยที่��ไคลเอนต�ไม่ ต*องร์*องขอ (GET Request) กั อน

•ความ่ต างของ SSE กั�บ WebSockets ค)อ WebSockets เป็�นกัาร์สิ่ งข*อม่#ลสิ่องที่าง แต SSE เป็�นกัาร์สิ่ งข*อม่#ลที่างเด�ยวและ SSE ร์�นอย# บน Protocol HTTP ตาม่ป็กัต� ที่/าให*สิ่าม่าร์ถึใชั่*กั�บเซ�ร์�ฟเวอร์�ในป็=จัจั0บ�นได*ที่�นที่�

• ในกัาร์ใชั่*งานจัร์�ง สิ่าม่าร์ถึเล)อกัได*ร์ะหว างกัาร์สิ่ งข*อม่#ลด*วย WebSockets ที่�+งสิ่องที่างบน WebSockets และ กัาร์ร์�บข*อม่#ลจัากัเซ�ร์�ฟเวอร์�ด*วย SSE แล*วสิ่ งกัล�บด*วย XMLHttpRequest บน HTTP

•ข*อม่#ลเพั��ม่เต�ม่: Wikipedia, W3C, สิ่อนกัาร์ใชั่*งานที่�� HTML5 Rocks

ความีสามีารถของ HTML55. Multimedia

•จัากัเด�ม่ที่�� HTML4 ไม่ สิ่าม่าร์ถึแสิ่ดงผลเสิ่�ยง-ว�ด�โอได*โดยตร์ง ต*องใชั่*ว�ธี�ฝั่=ง <object> แล*วต�ดต�+งป็ล�Bกัอ�นเพั)�อชั่ วยเล นม่�ลต�ม่�เด�ย

•แต HTML5 ได*กั/าหนดให* HTML สิ่าม่าร์ถึเล นไฟล�เสิ่�ยงและว�ด�โอได*ในต�ว โดยใชั่*แที่ กัใหม่ <audio> และ <video> ที่/าให*เสิ่�ยงและว�ด�โอเป็�นเน)+อเด�ยวกั�บเว บเพัจัโดยตร์ง สิ่าม่าร์ถึป็ร์�บเป็ล��ยนกัาร์แสิ่ดงผลได*เชั่ นเด�ยวกั�บสิ่ วนอ)�นๆ ของเว บเพัจั เชั่ น ย*ายต/าแหน ง ซ*อนฉากัหล�ง ฯลฯ

ความีสามีารถของ HTML56. 3D, Graphics & Effects

กัร์าฟ5กั แบ งเป็�น 4 ป็ร์ะกัาร์ค)อ•SVG (Scalable Vector Graphics) เป็�นภูาษาตร์ะกั#ล XML ที่��ออกัแบบม่าสิ่/าหร์�บกัาร์วาดกัร์าฟ5กั

•Canvas เป็�นแที่ กัใหม่ HTML5 สิ่าม่าร์ถึชั่ วยให* "วาดภูาพั" ลงบนเว บเพัจัได*โดยตร์ง โดยกั/าหนด canvas ในเว บเพัจัแต สิ่��งวาดด*วยจัาวาสิ่คร์�ป็ต� ขอบเขตของภูาพัที่��วาดกั จัะอย# ในออบเจัคต�ชั่)�อ canvas สิ่��งที่��สิ่าม่าร์ถึใสิ่ ลงไป็ในกัร์อบ canvas ได*แกั ร์#ป็ที่ร์งพั)+นฐาน สิ่��เหล��ยม่ วงกัลม่ เสิ่*นตร์ง เสิ่*นโค*ง พัาธี ไฟล�ร์#ป็ภูาพั แอน�เม่ชั่�น กั/าหนดให*ว�ตถึ0ต างๆ เคล)�อนไหว แป็ลงสิ่ภูาพัว�ตถึ0 (transformation) กั/าหนดให*หม่0น เอ�ยง บ�ดเบ�+ยว กัาร์ป็ร์ะกัอบ-ซ*อนภูาพัว�ตถึ0 (composition) เชั่ น น/าสิ่��เหล��ยม่กั�บสิ่าม่เหล��ยม่ม่า intersect เพั)�อสิ่ร์*างว�ตถึ0แบบใหม่

•ความ่ต างที่��สิ่/าค�ญของ SVG กั�บ canvas ค)อ SVG ได*ผลล�พัธี�เป็�นเวกัเตอร์� สิ่ วน canvas ได*ผลล�พัธี�เป็�นร์าสิ่เตอร์� (ภูายในกัร์อบว�ตถึ0 canvas)

SVG สิ่��งวาดด*วยแที่ กัแบบ markup (ซ�บเซ ตของ XML) สิ่ วน canvas สิ่��งวาดด*วยจัาวาสิ่คร์�ป็ต�

ความีสามีารถของ HTML56. 3D, Graphics & Effects

•WebGL เป็�นไลบร์าร์�กัร์าฟ5กัที่��พั�ฒนาอย# บน OpenGL ES 2.0 ซ7�งเป็�นไลบร์าร์�กัร์าฟ5กั 3 ม่�ต�ม่าตร์ฐานแต ด�ดแป็ลงให*เร์นเดอร์�ภูาพัออกัม่าบนออบเจัคต� canvas ภูายในเบร์าว�เซอร์� และสิ่��งงานได*ผ านจัาวาสิ่คร์�ป็ต� ตอนเร์นเดอร์�กั ที่/าผ าน GPU ตาม่ป็กัต�

•CSS3 3D สิ่าม่าร์ถึแป็ลงสิ่ภูาพัว�ตถึ0บนเว บเพัจัในแบบต างๆ เชั่ น ขยายขนาด หม่0นเอ�ยงตาม่แกัน xyz

ความีสามีารถของ HTML57. Performance & Integration

กัาร์ป็ร์�บป็ร์0งป็ร์ะสิ่�ที่ธี�ภูาพักัาร์ที่/างานของเว บแอพั แบ งออกัเป็�น 2 สิ่ วนใหญ ๆ• Web Worker ค)อจัาวาสิ่คร์�ป็ต�ที่��ที่/างานแบบม่�ลต�เธีร์ ด เพั)�อให*

สิ่คร์�ป็ต�สิ่าม่าร์ถึที่/างานเบ)+องหล�งได*หลายๆ งานพัร์*อม่กั�น กัาร์ใชั่*งานสิ่าม่าร์ถึสิ่��งโค*ดจัาวาสิ่คร์�ป็ต�โดยตร์ง โดยสิ่ร์*างต�วแป็ร์ชั่น�ด worker ข7+นม่าเพั)�อบอกัเบร์าว�เซอร์�ว า โค*ดจัาวาสิ่คร์�ป็ต�สิ่ วนน�+ ขอให*ที่/างานแบบ Web Worker เพั)�อป็ร์ะสิ่�ที่ธี�ภูาพัที่��ด�ข7+น

• XMLHttpRequest Level 2 จัากัเด�ม่ XMLHttpRequest (XHR) ที่��เป็�นเที่คโนโลย�พั)+นฐานของ AJAX ซ7�งเป็�นว�ธี�กัาร์โหลดข*อม่#ลเฉพัาะบางสิ่ วนของเว บเพัจั (ไม่ ใชั่ ที่�+งหน*า) ชั่ วยที่/าให*สิ่าม่าร์ถึป็ร์�บป็ร์0งข*อม่#ลบางสิ่ วนของเพัจัได* โดยไม่ ต*องโหลดใหม่ ที่�+งหน*า จั7�งที่/าให*เว บเพัจัม่�อ�นเตอร์�แอคที่�ฟม่ากัข7+น สิ่ วน XMLHttpRequest Level 2 ม่�ความ่สิ่าม่าร์ถึเพั��ม่ข7+นค)อ▫กัาร์แยกัแยะเหต0กัาร์ณ�แต ละชั่น�ดออกัจัากักั�น ชั่ วยให*โป็ร์แกัร์ม่เม่อร์�

ต�ดตาม่และควบค0ม่กัาร์สิ่ งข*อม่#ลได*ง ายข7+น▫ร์องร์�บกัาร์อ�พัโหลดไฟล�จัากัฝั่=� งไคลเอนต� (เด�ม่ที่��ไม่ ร์องร์�บกัาร์สิ่ ง

ไฟล�) ซ7�งจัะใชั่*ควบค# กั�บ File API▫สิ่ งข*อม่#ลแบบข*าม่หลายโดเม่น ซ7�ง XMLHttpRequest ร์0 นกั อน

เร์�ยกัได*เฉพัาะโดเม่นเด�ยวกั�น

ความีสามีารถของ HTML58. CSS3

•CSS3 ม่�เพั��ม่ฟ?เจัอร์�สิ่��งพั�ม่พั�ที่��เกั��ยวข*องกั�บกัาร์จั�ดหน*า กัาร์ควบค0ม่กัาร์ไหลของข*อความ่ และฟอนต� ฯลฯ

• เที่คโนโลย�ที่��เกั��ยวข*องกั�นค)อ Web Open Font Format (WOFF) ที่��ชั่ วยให*ฝั่=งฟอนต�เข*าม่าในเว บเพัจัได*ด*วย

จุ)ดเดนของ HTML5

1. กัาร์วาดภูาพักัาร์ตกัแต งภูาพั ไม่ ต*องพั7�ง flash หร์)อไม่ ต*องพั7�งป็ล�Bกัอ�นภูายนอกั2. กัาร์เพั��ม่ว�ด�โอและเสิ่�ยง ไม่ ต*องพั7�งป็ล�Bกัอ�นภูายนอกั เชั่ น window media player ฯลฯ 3. กัาร์สิ่น�บสิ่น0นกัาร์เกั บไฟล�ในล�กัษณะออฟไลน� (Better support for local offline storage)4. แที่ กัใหม่ สิ่/าหร์�บเน)+อหาที่��แบ งเป็�นสิ่ วนๆหร์)อร์ะบ0ความ่หม่ายของแต ละสิ่ วน article, footer, header, nav, section5. เพั��ม่ความ่สิ่ะดวกัในสิ่ วนของ form เชั่ น ม่� input สิ่/าหร์�บ ป็ฏิ�ที่�น, ว�นที่��, เวลา, อ�เม่ล�, URL, กัาร์ค*นหา เป็�นต*น

DOCTYPE declaration

• เด�ม่• <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01

Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

• HTML5• <!DOCTYPE html>

Change to HTML5 Encoding

• เด�ม่• <meta http-equiv="Content-Type" content="text/

html;charset=utf-8">

• HTML5• <meta charset="utf-8">

Change to HTML5 Semantic ElementsHTML HTML8body {    font-family: Verdana,sans-serif;    font-size: 0.9em;}

div#header, div#footer {    padding: 10px;    color: white;    background-color: black;}

div#content {    margin: 5px;    padding: 10px;    background-color: lightgrey;}

div.article {    margin: 5px;    padding: 10px;    background-color: white;}

div#menu ul {    padding: 0;}

div#menu ul li {    display: inline;    margin: 5px;}

body {    font-family: Verdana,sans-serif;    font-size: 0.9em;}

header, footer {    padding: 10px;    color: white;    background-color: black;}

section {    margin: 5px;    padding: 10px;    background-color: lightgrey;}

article {    margin: 5px;    padding: 10px;    background-color: white;}

nav ul {    padding: 0;}

nav ul li {    display: inline;    margin: 5px;}

Change to HTML5 Semantic Elements<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>HTML5</title><!--[if lt IE 9]><script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script></script><![endif]--><style>body { font-family: Verdana,sans-serif; font-size: 0.9em;}

header, footer { padding: 10px; color: white; background-color: black;}

section { margin: 5px; padding: 10px; background-color: lightgrey;}

article { margin: 5px; padding: 10px; background-color: white;}

nav ul { padding: 0;}

nav ul li { display: inline; margin: 5px;}</style></head>

<body>

<header><h1>Monday Times</h1></header>

<nav><ul> <li>News</li> <li>Sports</li> <li>Weather</li></ul></nav>

<section><h2>News Section</h2><article><h2>News Article</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at.</p></article><article><h2>News Article</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at.</p></article></section>

<footer><p>&copy; 2014 Monday Times. All rights reserved.</p></footer>

</body></html>

กัาร์บ�งค�บให*ผ#*ใชั่*ป็Eอนข*อม่#ลด*วย Attribute Required

<!DOCTYPE html><html lang="th"><head><title>กัาร์บ�งค�บให*ผ#*ใชั่*ป็Eอนข*อม่#ลด*วย Attribute Required</title></head><body>

<form id="form1" method="get" action="#">ชั่)�อ-สิ่กั0ล:

<input type="text" id="txt" required>

<input type="submit" id="Submit1"></form>

</body></html>

กัาร์กั/าหนดให*โฟกั�สิ่ชั่ องร์�บข*อม่#ลที่��ต*องกัาร์โดยอ�ตโนม่�ต�

<!DOCTYPE html><html lang="th"><head><title>กัาร์บ�งค�บให*ผ#*ใชั่*ป็Eอนข*อม่#ลด*วย Attribute Required</title></head><body>

<form id="form1" method="get" action="#">ชั่)�อ-สิ่กั0ล:

<input type="text" id="txt" autofocus="autofocus" required>

<input type="submit" id="Submit1">

</form>

</body></html>

กัาร์แสิ่ดงข*อความ่แบบลายน/+าด*วย Attribute placeholder

<!DOCTYPE html><html lang="th"><head><title>กัาร์แสิ่ดงข*อความ่แบบลายน/+าด*วย Attribute placeholder</title></head><body>

<form id="form1" method="get" action="#">ชั่)�อ-สิ่กั0ล:

<input type="text" id="txt" placeholder="ชั่)�อ-นาม่สิ่กั0ล">

<input type="submit" id="Submit1">

</form></body></html>

กัาร์สิ่ร์*างชั่ องร์�บต�วเลขด*วย element ป็ร์ะเภูที่ number

<!DOCTYPE HTML><html lang="th"><head><title>กัาร์สิ่ร์*างชั่ องร์�บต�วเลขด*วย element ป็ร์ะเภูที่ number</title></head><body><form id="form1" method="get" action="#">เง�นเด)อน:<input type="number" id="salary" min="1" max="10000" step="500" >

<input type="submit" id="Submit"></form>

</body></html>โดยท็�� Min หม่ายถึ7ง ค าต/�าสิ่0ดที่��สิ่าม่าร์ถึร์�บได* Max หม่ายถึ7ง ค าสิ่#งสิ่0ดที่��สิ่าม่าร์ถึร์�บได*Step หม่ายถึ7ง จั/านวนที่��เพั��ม่ข7+นในแต ละคร์�+ง Value หม่ายถึ7ง ค าป็=จัจั0บ�นที่��เกั บอย#

กัาร์สิ่ร์*างแถึบความ่ค)บหน*าด*วย Element meter

<!DOCTYPE HTML><html lang="th"><head><title>กัาร์สิ่ร์*างแถึบความ่ค)บหน*าด*วย Element meter</title></head><body>

ความ่ค)บหน*า :<meter min="0" max="100" value="80"></body></html>โดยท็�� Min หม่ายถึ7ง ขอบเขตน*อยที่��สิ่0ดของชั่ องMax หม่ายถึ7ง ขอบเขตม่ากัที่��สิ่0ดของชั่ องValue หม่ายถึ7ง ค าป็=จัจั0บ�นที่��เกั บอย#

กัาร์สิ่ร์*างแถึบความ่ค)บหน*าด*วย Element <progress>

<!DOCTYPE HTML><html lang="th"><head><title>กัาร์สิ่ร์*างแถึบความ่ค)บหน*าด*วย Progress</title>

<meta charset="utf-8"></head><body> <article>

งาน A ค)บหน*า :(45%)<progress value="45" max="100">45%</progress><Br>

งาน B ค)บหน*า :(20%)<progress value="20" max="100">20%</progress><Br>

งาน C ค)บหน*า :(60%)<progress value="60" max="100">60%</progress>

</article></body></html>โดยท็�� Max หม่ายถึ7ง ขอบเขตม่ากัที่��สิ่0ดของชั่ อง Value หม่ายถึ7ง ค าป็=จัจั0บ�นที่��เกั บอย#

กัาร์สิ่ร์*างแถึบเล)อกัด*วย range

<!DOCTYPE HTML><html lang="th"><head> <title>กัาร์สิ่ร์*างแถึบเล)อกัด*วย range</title>

<meta charset="utf-8"></head><body> กัร์0ณาให*คะแนน:<input type="range" id="rgPoint" min="0" max="100" value="0"></body></html>โดยท็��

Min หม่ายถึ7ง ขอบเขตน*อยที่��สิ่0ดของชั่ อง Max หม่ายถึ7ง ขอบเขตม่ากัที่��สิ่0ดของชั่ องValue หม่ายถึ7ง ค าป็=จัจั0บ�นที่��เกั บอย#

กัาร์ใชั่*งาน legend<!DOCTYPE HTML><html lang="th"><head><title>กัาร์ใชั่*งาน legend></title><meta charset="utf-8"></head><body><form id="form1">

<fieldset><legend>ข*อม่#ลสิ่ม่าชั่�กั</legend>ข*อม่#ลสิ่ม่าชั่�กั :<input type="text"

name="fullname">ที่��อย# :<input type="text" name="address"

size="60"></fieldset><fieldset><legend>ข*อม่#ลที่��วไป็</legend>

ภูาษาที่��ถึน�ด:<Br><input type="radio" name="language"

value="java">JAVA<Br><input type="radio" name="language"

value="c++">C++</fieldset>

</form></body></html>

กัาร์กั/าหนดให*ฟอร์�ม่จัดจั/าข*อม่#ลเด�ม่ ด*วย autocomplete

<!DOCTYPE HTML><html lang="th"><head><title>กัาร์ใชั่*งาน legend></title><meta charset="utf-8"></head><body><form id="form1" autocomplete="on">

<fieldset><legend>ข*อม่#ลสิ่ม่าชั่�กั</legend>ข*อม่#ลสิ่ม่าชั่�กั :<input type="text"

name="fullname">ที่��อย# :<input type="text" name="address"

size="60"></fieldset><fieldset><legend>ข*อม่#ลที่��วไป็</legend>

ภูาษาที่��ถึน�ด:<Br><input type="radio" name="language"

value="java">JAVA<Br><input type="radio" name="language"

value="c++">C++</fieldset>

</form></body></html>

กัาร์ใชั่*งาน Email<!DOCTYPE HTML><html lang="th"><head><title>กัาร์ใชั่*งาน Email</title><meta charset="utf-8"></head><body><form id="form1" autocomplete="on">

<fieldset><legend>ข*อม่#ลสิ่ม่าชั่�กั</legend>ข*อม่#ลสิ่ม่าชั่�กั :<input type="text"

name="fullname">Email:<input type="email"

name="email" size="60"><input type="submit"

value="send"></fieldset></form>

</body></html>

กัาร์สิ่ร์*างชั่ องร์�บ URL ด*วย URL<!DOCTYPE HTML><html lang="th"><head><title> กัาร์สิ่ร์*างชั่ องร์�บ URL ด*วย URL </title>

<meta charset="utf-8"></head><body><form id="form1" autocomplete="on">

<fieldset><legend>ข*อม่#ลสิ่ม่าชั่�กั</legend>ข*อม่#ลสิ่ม่าชั่�กั :<input type="text"

name="fullname">URL:<input type= " url" name= "url"

size="60"><input type="submit"

value="send"></fieldset></form>

</body></html>

กัาร์ร์�บข*อม่#ลว�นที่��ด*วย date<!DOCTYPE HTML><html lang="th"><head><title> กัาร์ร์�บข*อม่#ลว�นที่��ด*วย date </title>

<meta charset="utf-8"></head><body><form id="form1" autocomplete="on">

<fieldset><legend>ข*อม่#ลสิ่ม่าชั่�กั</legend>ข*อม่#ลสิ่ม่าชั่�กั :<input type="text"

name="fullname">ว�นเกั�ด:<input type= "date" name= "

BD" size="60"><input type="submit"

value="send"></fieldset></form>

</body></html>

กัาร์สิ่ร์*างแถึบสิ่�ด*วย color<!DOCTYPE HTML><html lang="th"><head><title>กัาร์สิ่ร์*างแถึบสิ่�ด*วย color</title><meta charset="utf-8"></head><body>

กัร์0ณาเล)อกัสิ่�:<input type="color" id="color"></body></html>