สิ่งที่ควรรู้เกี่ยวกับ html5

เนื่องจากกระแส 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

<!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 ได้เลยครับ

ผู้เขียน Webmaster| 12 มีค. 2555 เวลา 10:06 น.| 0| 1288| สิ่งที่ควรรู้เกี่ยวกับ html5
ร่วมแสดงความคิดเห็น

antispam

 
     

Talk X

6 4 5 8 2 3 7 9 10 1 11