มีคนถามเข้ามาเยอะนะครับเกี่ยวกับเรื่องของ Code ในภาษา HTML5 ว่ามีวิธีใช้ยังไง เริ่มเขียนยังไง ผมจะขออธิบายถึง เจ้า HTML5 คร่าวๆแล้วกันนะครับ เพราะมีคนเขียนไปเยอะแล้ว มาดูความสามารถที่เป็นของใหม่ของ HTML5 กันดีกว่า
- Semantic Markup: การจัดวางโค้ดให้เป็นระเบียบ
- Form Enhancement: เพิ่มประสิทธิภาพของฟอร์ม
- เสียง / วีดิโอ: สามารถแแสดงข้อมูลชนิดเสียงและวิดีโอแทนที่ flashได้
- Canvas: วาดรูป ตกแต่งรูป
- ContentEditable: สามารถแก้ไขเนื้อหาได้จากหน้าเว็บ
- Drag and Drop: ลากและวางของไปมา
- Persistent Data Storage: การเก็บข้อมูลบนเครื่องผู้ใช้
นี่เป็นความสามารถที่มีเพิ่มเติมใน HTML5 นะครับ ซึ่งจะเป็นมาตรฐานใหม่ของการพัฒนาเว็บไซต์ ตอนนี้ browser ใหมๆเริ่มรองรับกันแล้ว อย่าง firefox5 ที่ผมเพิ่งจะลองติดตั้งนี่ก็ใช้ได้ แต่ยังไม่ครบทุก tag ครับ แต่ด้านของ Chrome จะรองรับได้มากกว่า
ทีนี้วิธีที่เราจะเอามาเขียนจริงๆเป็นเพจๆนั้นมี ขั้นตอนที่ไม่ยากเย็นอะไรครับ เพราะเค้าตั้งใจให้มันง่ายอยู่แล้ว
เริ่มจาก
DOCTYPE ครับให้เราใส่ไปแบบนี้
<!DOCTYPE HTML>จากนั้นก็แค่เริ่มร่าง Code โครงสร้างไว้ก่อน
<!DOCTYPE HTML>
<html>
<body>
</body>
</html>
เท่านี้ครับเรียบร้อยทีนี้ที่เพิ่มขึ้นมาก็คือ Tag อย่าง article,aside,audio,canvas,command,datalist,details,figure,footer,header,hgroup,keygen และอีกเยอะครับ เอาเป็นว่าเดี๋ยวผมจะสาธิตให้ดูกันก่อนซักชุดนะครับ
<!doctype html>
<html lang=”en”>
<head>
<meta charset=”utf-8″ />
</head>
<body>
<header>
<hgroup>
<h1>Website HTML5</h1>
<h2>view me HTML5</h2>
</hgroup>
</header>
<nav>
<ul>
<li><a href=”#”>HOME</a></li>
<li><a href=”#”>HTML5</a></li>
</ul>
</nav>
<article>
<header>
<h1>Article Heading</h1>
</header>
<p>test new article</p>
</article>
<footer>
copyright 2011
</footer>
</body>
</html>
ลองสังเกตุดูนะครับทั้งหมดนีมีความเป็น semantic เป็นอย่างมาก บอกหมดว่าตรงไหนคืออะไร นี่แหละครับความสามารถใหม่ของ HTML5
ดูตารางความสามารถของ Browser ที่รองรับ HTML5 ครับ หรือจะตรวจสอบว่า ระบบของเครื่องคุณสามารถใช้กับ Tag อะไรได้บ้างก็ยังได้
HTML5 SUPPORT
ตรวจสอบ browser ของเราว่าพร้อมใช้ HTML5 รึเปล่า
มาดูบทความ Coding เรื่่อง video กันบ้างครับ
แสดง video ด้วย HTML5
