เนื่องจากกระแส
HTML5 ตอนนี้มาแรงมากครับ กระแสแรงพอ ๆ กับ
CSS3 เลยทีเดียว แต่บางคนอาจเคยได้ยินแต่ชื่อ ไม่รู้ว่า HTML5 มันเอาไว้ทำอะไรกันแน่ ผมก็เลยนำบทความนี้มาฝากกันครับ
บทความนี้นำมาจาก บลอค
W3Avenue หากท่านใดชำนาญภาษาอังกฤษ อยากฝึกภาษา ก็สามารถตามลิงค์ไปอ่านบทความต้นฉบับได้เลยครับ
บทความนี้เขียนขึ้นเพื่อแนะนำ
HTML5 ให้ผู้ที่ยังไม่เคยใช้มาก่อน รวมถึงสอนการเขียนโค้ด HTML5 เบื้องต้นอีกด้วย หากท่านใดพอจะทราบเรื่อง
HTML5 แล้ว ก็จะได้รู้ทิป เทคนิคต่าง ๆ จากบทความนี้ครับ
จุดเด่นของ HTML5 ความสามารถทั้งหมดของ HTML5 สามารถอ่านได้จาก
เอกสารอย่างเป็นทางการของ HTML5 (ภาษาอังกฤษ) ครับ หรือถ้าชอบอะไรง่าย ๆ สามารถอ่านได้จาก
W3CSchool (ภาษาอังกฤษเช่นกัน แต่เข้าใจง่ายกว่ามาก)
ความสามารถเด่น ๆ ของมันก็คือ:
- Semantic Markup: โค้ดเป็นระเบียบทำให้ Search Engine เก็บข้อมูลได้ง่าย
- Form Enhancement: เพิ่มประสิทธิภาพของฟอร์ม
- เสียง / วีดิโอ: หลายคนอาจเคยได้ยินเรื่องที่ว่า HTML5 Video จะมาแทน Flash Video (.flv)
- Canvas: เอาไว้วาดรูป ตกแต่งรูป ซึ่งว่ากันว่าอาจมาแทนการวาดรูปในแฟลช (Adobe Flash)
- ContentEditable: สามารถคลิกบนข้อความในเว็บเพื่อแก้ไขได้จากตรงนั้นเลย
- Drag and Drop: ลากของมาวาง
- Persistent Data Storage: การเก็บข้อมูลบนเครื่องผู้ใช้ ซึ่งสามารถเก็บได้ถึงระดับฐานข้อมูลเลยทีเดียว
บราวเซอร์ในรองรับ HTML5 บ้าง? เว็บบราวเซอร์ (เช่น Internet Explorer, Firefox, Chrome etc.) เวอร์ชั่นใหม่ ๆ ได้เริ่มรองรับ
HTML5 แล้ว แต่ก็ไม่ได้รองรับความสามารถทั้งหมด ดังนั้นก่อนใช้ความสามารถไหนของ HTML5 แนะนำให้ตรวจสอบจาก
ตารางเปรียบเทียบการรองรับ HTML5 และ CSS3 จากบราวเซอร์ต่าง ๆสำหรับท่านที่มีความรู้ด้าน
Javascript อยู่แล้ว สามารถใช้ไลบรารี่
Modernizr ในการตรวจสอบว่าบราวเซอร์ซัพพอร์ท HTML5 และ CSS3 หรือไม่
และหากคุณต้องการทราบว่าคุณควรจะทำเว็บไซต์รองรับบราวเซอร์ไหนดี แนะนำให้ลองไปดูที่
Browser Market Share ซึ่งมีข้อมูลเกี่ยวกับว่าในขณะนี้บราวเซอร์ตัวไหนกำลังเป็นที่นิยมมากที่สุด
HTML5 แตกต่างจาก HTML เวอร์ชั่นเก่าอย่างไร แน่นอนว่านอกจากจะมีอะไรใหม่ ๆ ใน
HTML5 แล้ว ก็มีสิ่งที่เปลี่ยนการเขียนแบบเดิม ๆ ในเวอร์ชั่นเก่าด้วย ซึ่งสิ่งหลัก ๆ ที่เปลี่ยนก็คือ:
- Doctype เขียนง่ายขึ้น
ปกติตอนเขียน HTML เวอร์ชั่นเก่าต้องขึ้น <!DOCTYPE แล้วก็ตามด้วยรายละเอียดยาว ๆ แต่พอเป็น HTML5 แล้ว จะเขียนแบบไม่มีกำหนดเวอร์ชั่น เพื่อให้นำไปใช้ได้กับเวอร์ชั่นอื่น ๆ ในอนาคต โดยเขียนแค่สั้น ๆ แบบนี้:
<!DOCTYPE html> - การกำหนดภาษาทำได้ง่ายขึ้น
เมื่อก่อนจะต้องเขียน xmln หรือ xml:lang ในแท็ก <html> เพื่อกำหนดภาษาของหน้า แต่สำหรับ HTML5 จะเหลือแค่นี้:
<html lang=”en”> - การกำหนดชุดตัวอักษรทำได้ง่ายขึ้น
เมื่อก่อนจะต้องเขียนแท็ก meta ยาว ๆ เพื่อกำหนด Character Set เป็น UTF-8 แต่ตอนนี้เราสามารถกำหนดโดยเขียนแค่นี้:
<meta charset=”utf-8″ /> - ไม่ต้องมี “/” สำหรับแท็กเดี่ยวแล้ว
แท็กเดี่ยว หมายถึงแท็กที่ไม่มีแท็กปิด เช่น <img> <input> <br> ซึ่งจะต่างกับแท็กที่เป็นแท็กเปิดปิดอย่าง <div></div> <strong></strong>
โดยถ้าเป็นเมื่อก่อน แท็กเดี่ยวจะบังคับให้มี “/” ปิดท้าย เช่น <img /> หรือ <br /> แต่ใน HTML5 นี้แท็กเดี่ยวไม่จำเป็นต้องมี “/” ปิดท้ายแล้ว - แท็กบางส่วนจะไม่รองรับใน HTML5 แล้ว
แท็กเก่า ๆ บางส่วนจะถูกตัดทิ้งไป โดยมีดังนี้ (บางแท็กเรายังไม่เคยใช้กันเลยครับ และบางแท็กสามารถใช้ CSS แทนได้):
<acronym> <applet> <basefont> <big> <center> <dir> <frame> <frameset> <noframes> <s> <strike> <tt> <u> และ <xmp>
ตัวอย่างโค้ด HTML5 - <!doctype html>
- <html lang="en">
- <head>
- <meta charset="utf-8" />
- <title>HTML5 Document</title>
- </head>
- <body>
- </body>
- </html>
จะเห็นว่าโค้ดสะอาดตากว่า
HTML เวอร์ชั่นเก่ามากเลยครับ
การเขียนแบบ Semantic Markup ของ HTML5 อย่างที่บอกไปว่า
Semantic Markup เป็นการเขียนให้ Search Engine เข้ามาเก็บข้อมูลได้ง่ายครับ ซึ่งจะทำให้เก็บข้อมูลได้เร็วขึ้น และติดอันดับง่ายขึ้นด้วยครับ
ซึ่งถ้าเป็นเมื่อก่อน เวลาเราจะสร้างกล่องอะไรขึ้นมาสักอัน เราจะใช้แท็ก <div> ใช่มั้ยครับ แต่ตอนนี้พอเป็น
HTML5 แล้ว เค้าก็เพิ่มแท็กที่เหมือนกับ <div> ขึ้นมา โดยมีคุณสมบัติเหมือนกัน (ใช้แท็กพวกนี้ ก็เหมือนใช้ <div>) ต่างกันที่แท็กใหม่แต่ละตัวจะบอกความหมายให้ Search Engine รู้ไม่เหมือนกัน เช่น แท็ก <footer></footer> ก็จะบอกว่าอะไรที่ครอบอยู่ในนี้เป็น
Footer เว็บไซต์ทั้งหมด
แท็กใหม่ที่เพิ่มเข้ามามีดังนี้:
<article>,
<section>,
<aside>,
<hgroup>,
<header>,
<footer>,
<nav>,
<time>,
<mark>,
<figure>, and
<figcaption> (สามารถคลิกเพื่อเข้าไปอ่านว่าแท็กอันนั้นมีหน้าที่อะไร)
ซึ่งเว็บบราวเซอร์ใหม่ ๆ ก็จะรองรับแท็กพวกนี้อยู่แล้ว (Firefox 3+, Safari 3.1+, Chrome 2+, Opera 9.6+) ยกเว้น
Internet Explorer ซึ่งวิธีที่จะประกาศแท็กพวกนี้ใน IE แบบง่าย ๆ ก็คือใช้
Javascript อันนี้: document.createElement(tagName)
โดยวิธีใช้คำสั่งด้านบน ก็แทน
tagName ด้วยชื่อแท็กที่จะประกาศ เช่น: document.createElement(“footer”); โดยถ้าจะประกาศหลายแท็กก็ต้องใช้คำสั่งนี้หลายรอบ
ถ้าขี้เกียจมานั่งประกาศแท็กทั้งหมด ก็มี สคริปต์
HTML5 Enabling Script กับ
IE Print Protector ซึ่งเอาไว้ประกาศ
HTML5 แบบรวดเดียวเสร็จใน Internet Explorer
และสำหรับคนที่ใช้
CSS Reset (เป็นไฟล์
CSS เอาไว้รีเซ็ตให้มาตรฐานของแท็กต่าง ๆ ในแต่ละบราวเซอร์ให้เหมือนกัน) ในงานบ่อย ๆ พอมาใช้ HTML5 ก็มี
CSS Reset สำหรับ HTML5 ออกมาให้ใช้เหมือนกันครับ โดยมีอีกตัวชื่อ
Reset5 ตัวอย่างหน้า HTML5 ที่รองรับ IE
- <pre><!doctype html>
- <html lang="en">
- <head>
- <meta charset="utf-8" />
- <title>HTML5 Semantic Markup Demo: Cross Browser</title>
- <link rel="stylesheet" href="html5reset.css" type="text/css" />
- <link rel="stylesheet" href="html5semanticmarkup.css" type="text/css" />
- <!--[if lt IE 9]>
- <script src="html5.js"></script>
- <![endif]-->
- </head>
- <body>
- <header>
- <hgroup>
- <h1>Page Header</h1>
- <h2>Page Sub Heading</h2>
- </hgroup>
- </header>
- <nav>
- <ul>
- <li><a href="#">Home</a></li>
- <li><a href="#">Projects</a></li>
- <li><a href="#">Portfolio</a></li>
- <li><a href="#">Profile</a></li>
- <li><a href="#">Contact</a></li>
- </ul>
- </nav>
- <article>
- <header>
- <h1>Article Heading</h1>
- <time datetime="2010-05-05" pubdate>May 5th, 2010</time>
- </header>
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
- <section>
- <header>
- <h1>Section Heading</h1>
- </header>
- <p>Ut sapien enim, porttitor id feugiat non, ultrices non odio.</p>
- <footer>
- <p>Section Footer: Pellentesque volutpat, leo nec auctor euismod</p>
- </footer>
- </section>
- <section>
- <header>
- <h1>Section Heading</h1>
- </header>
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
- <figure>
- <img src="item-1.png" alt="Club">
- <img src="item-2.png" alt="Heart">
- <img src="item-3.png" alt="Spade">
- <img src="item-4.png" alt="Diamond">
- <figcaption>FigCaption: Club, Heart, Spade and Diamond</figcaption>
- </figure>
- <p>Ut sapien enim, porttitor id feugiat non, ultrices non odio</p>
- <footer>
- <p>Section Footer: Pellentesque volutpat, leo nec auctor euismod est.</p>
- </footer>
- </section>
- <footer>
- Article Footer
- </footer>
- </article>
- <aside>
- <header>
- <h1>Siderbar Heading</h1>
- </header>
- <p>Ut sapien enim, porttitor id feugiat non, ultrices non odio.</p>
- </aside>
- <footer>
- Page Footer
- </footer>
- </body>
- </html>
จะเห็นได้ว่าไม่มีการใช้แท็ก <div> เลยแม้แต่แท็กเดียว ทำให้โค้ดมีความ
Semantic มากขึ้น
โดยเมื่อเรนเดอร์ในบราวเซอร์แล้วจะได้
ผลลัพธ์ดังรูปนี้ครับ สามารถแวะไปดู
เดโมของจริงได้ครับ
สำหรับการ
Validate HTML5 นั้น สามารถใช้
HTML5 Validator ได้เลยครับ
###########################################
ที่มา:
http://www.designil.com/html5-tips-tricks-techniques-1.html
