ผมเข้าใจว่า หลายคนคงได้เคยเรียนรู้ HTML 4 และ XHTML 1.1 กันมาบ้างแล้วนะครับ ดังนั้นเพื่อให้เราใช้งาน HTML 5 ได้อย่างถูกต้องเราก็มาเรียนรู้ในเรื่องของ Tag ทั้งที่ถูกตัดออก และถูกเพิ่อมจาก HTML 4กันก่อน เพื่อที่เราจะได้ใช้อย่างไม่ผิดเพี้ยน ครับ
Tag ที่ถูกตัดออกไปใน HTML 5(จาก4)
<acronym> ใช้บอกว่าเป็นตัวย่อ หรือ อักษรย่อ ได้เปลี่ยนเป็น <abbr> แทน
<applet> ใช้ในการสร้าง embedded applet
<basefont> ใช้เพื่อกำหนด size สี ขนาด ของ font ทั่วไป ถ้าคนที่เคยใช้ XHTML เราก็จะพบว่า เราจะใช้ CSS กำหนดเป็นส่วนมาก
<big> ใช้ให้เป็นตัวอักษรใหญ่ เพราะเราสามารถใช้ <strong> หรือใช้ CSS กำหนดเอาได้ครับ
<center> ใช้กำหนดว่าอยู่ตรงกลาง
<dir> บอกว่าเป็น directory list
<font> สร้างตัวอักษร Inline
<frame> สร้าง frame
<frameset> set frame ตามกำหนด
<noframes> ใช้กรณีที่เบราเซอร์ไม่รองรับ การแบ่งเฟรม แต่พอ แท็ก เฟรมถูกตัดทิ้ง อันนี้ก็ไม่จำเป็นครับ
<s> มาจาก strike คือเส้นขีดคาดนั่นเอง(ใช้ del แทน)
<strike> ไปด้วยกันเลยเหมือนกับ <s>
<tt> เอาไว้ประกาศ teletype text
<u> Underline
Tag ที่ถูกเพิ่มเข้ามาใน HTML 5(จาก4)
<article> บอกว่าเป็นบทความ
<aside> บอกว่านอกเหนือจาก page content
<audio> file เสียง
<canvas> วาด graphic 2D
<command> บอกเป็น command ให้ทำต่างๆ
ตัวอย่าง
<menu type="toolbar"> <command type="radio" radiogroup="alignment" checked="checked" label="Left" icon="icons/alL.png" onclick="setAlign('left')"> <command type="radio" radiogroup="alignment" label="Center" icon="icons/alC.png" onclick="setAlign('center')"> <command type="radio" radiogroup="alignment" label="Right" icon="icons/alR.png" onclick="setAlign('right')"> <hr> <command type="command" disabled label="Publish" icon="icons/pub.png" onclick="publish()"> </menu>
<datalist> รายละเอียดเสริมของรายการที่เราจะแสดง
<input list=”cars” />
<datalist id=”cars”>
<option value=”BMW”>
<option value=”Ford”>
<option value=”Volvo”>
</datalist>
<details> รายละเอียดของหน้านั้นๆ
<embed> เอาไว้เล่น embedded content ต่างๆ
<figcaption> แสดง caption ของ figure นั้นๆ
<figure> <img src="/pix/39627052_fd8dcd98b5.jpg"> <figcaption>Kissat</figcaption> </figure>
<figure> แสดงเนื้อหาที่เป็นสื่อต่างๆ
<footer> แสดงว่าเป็นส่วนล่างสุดของหน้า
<header> แสดงว่าเป็นส่วนหัวของหน้า
<hgroup> เอาไว้แสดงว่าเป็นกลุ่มของหัวเรื่อง
<hgroup>
<h1>Welcome to my WWF</h1>
<h2>For a living planet</h2>
</hgroup>
<p>The rest of the content…</p>
<keygen> บอกว่าตรงนี้คือ key ที่ gen เอา
<form action="processkey.cgi" method="post" enctype="multipart/form-data"> <p><keygen name="key"></p> <p><input type=submit value="Submit key..."></p> </form>
<mark> hilight text ที่ต้องการจะได้ไม่ต้องทำ span class=”hilight” :)
<meter> ค่ากำหนดอยู่ในช่วง
Storage space usage: <meter value=6 max=8>6 blocks used (out of 8 total)</meter> Voter turnout: <meter value=0.75><img alt="75%" src="graph75.png"></meter> Tickets sold: <meter min="0" max="100" value="75"></meter>
<nav> navigator
<nav> <h1>Navigation</h1> <ul> <li><a href="articles.html">Index of all articles</a></li> <li><a href="today.html">Things sheeple need to wake up for today</a></li> <li><a href="successes.html">Sheeple we have managed to wake</a></li> </ul></nav>
<output> แสดงผลลัพท์
<form action=”form_action.asp” method=”get” name=”sumform”>
<output name=”sum”></output>
</form>
<progress> แสดงปริมาณการทำงาน
The object’s downloading progress:
<progress>
<span id=”objprogress”>76</span>%
</progress>
<rp> ruby annotations
<rt> ใช้อธิบาย <rp>
<ruby>
<section> section ของ content
<source>
<video controls autoplay> <source src='video.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'> <source src='video.ogv' type='video/ogg; codecs="theora, vorbis"' onerror="fallback(parentNode)"> ... </video>
<summary> สรุป
<time> แสดงเวลา
Published <time>2009-10-21</time>.
<video>
<figcaption>
<samp>
<kbd>
<bdo>
<wbr>
<menu> บอกว่าเป็นเมนู
แต่ทั้งนี้ ผมยอมรับว่า ในบทความนี้ รายละเอียดยังไม่พอที่จะให้เราสามารถใช้งาน html 5 ได้ครับ แต่ไม่ต้องห่วงครับ ผมจะเอารายละเอียดแต่ละแท็กมาอธิบายให้ฟังต่อในบทความหน้า รับรองครับ ถ้าติดตามผมได้ตลอด คุณจะสามารถใช้งาน HTML 5 ได้แน่นอน ไม่ช้าก็ไวครับ
<acronym> ใช้บอกว่าเป็นตัวย่อ หรือ อักษรย่อ ได้เปลี่ยนเป็น <abbr> แทน
<applet> ใช้ในการสร้าง embedded applet
<basefont> ใช้เพื่อกำหนด size สี ขนาด ของ font ทั่วไป ถ้าคนที่เคยใช้ XHTML เราก็จะพบว่า เราจะใช้ CSS กำหนดเป็นส่วนมาก
<big> ใช้ให้เป็นตัวอักษรใหญ่ เพราะเราสามารถใช้ <strong> หรือใช้ CSS กำหนดเอาได้ครับ
<center> ใช้กำหนดว่าอยู่ตรงกลาง
<dir> บอกว่าเป็น directory list
<font> สร้างตัวอักษร Inline
<frame> สร้าง frame
<frameset> set frame ตามกำหนด
<noframes> ใช้กรณีที่เบราเซอร์ไม่รองรับ การแบ่งเฟรม แต่พอ แท็ก เฟรมถูกตัดทิ้ง อันนี้ก็ไม่จำเป็นครับ
<s> มาจาก strike คือเส้นขีดคาดนั่นเอง(ใช้ del แทน)
<strike> ไปด้วยกันเลยเหมือนกับ <s>
<tt> เอาไว้ประกาศ teletype text
<u> Underline
Tag ที่ถูกเพิ่มเข้ามาใน HTML 5(จาก4)
<article> บอกว่าเป็นบทความ
<aside> บอกว่านอกเหนือจาก page content
<audio> file เสียง
<canvas> วาด graphic 2D
<command> บอกเป็น command ให้ทำต่างๆ
ตัวอย่าง
<menu type="toolbar"> <command type="radio" radiogroup="alignment" checked="checked" label="Left" icon="icons/alL.png" onclick="setAlign('left')"> <command type="radio" radiogroup="alignment" label="Center" icon="icons/alC.png" onclick="setAlign('center')"> <command type="radio" radiogroup="alignment" label="Right" icon="icons/alR.png" onclick="setAlign('right')"> <hr> <command type="command" disabled label="Publish" icon="icons/pub.png" onclick="publish()"> </menu>
<datalist> รายละเอียดเสริมของรายการที่เราจะแสดง
<input list=”cars” />
<datalist id=”cars”>
<option value=”BMW”>
<option value=”Ford”>
<option value=”Volvo”>
</datalist>
<details> รายละเอียดของหน้านั้นๆ
<embed> เอาไว้เล่น embedded content ต่างๆ
<figcaption> แสดง caption ของ figure นั้นๆ
<figure> <img src="/pix/39627052_fd8dcd98b5.jpg"> <figcaption>Kissat</figcaption> </figure>
<figure> แสดงเนื้อหาที่เป็นสื่อต่างๆ
<footer> แสดงว่าเป็นส่วนล่างสุดของหน้า
<header> แสดงว่าเป็นส่วนหัวของหน้า
<hgroup> เอาไว้แสดงว่าเป็นกลุ่มของหัวเรื่อง
<hgroup>
<h1>Welcome to my WWF</h1>
<h2>For a living planet</h2>
</hgroup>
<p>The rest of the content…</p>
<keygen> บอกว่าตรงนี้คือ key ที่ gen เอา
<form action="processkey.cgi" method="post" enctype="multipart/form-data"> <p><keygen name="key"></p> <p><input type=submit value="Submit key..."></p> </form>
<mark> hilight text ที่ต้องการจะได้ไม่ต้องทำ span class=”hilight” :)
<meter> ค่ากำหนดอยู่ในช่วง
Storage space usage: <meter value=6 max=8>6 blocks used (out of 8 total)</meter> Voter turnout: <meter value=0.75><img alt="75%" src="graph75.png"></meter> Tickets sold: <meter min="0" max="100" value="75"></meter>
<nav> navigator
<nav> <h1>Navigation</h1> <ul> <li><a href="articles.html">Index of all articles</a></li> <li><a href="today.html">Things sheeple need to wake up for today</a></li> <li><a href="successes.html">Sheeple we have managed to wake</a></li> </ul></nav>
<output> แสดงผลลัพท์
<form action=”form_action.asp” method=”get” name=”sumform”>
<output name=”sum”></output>
</form>
<progress> แสดงปริมาณการทำงาน
The object’s downloading progress:
<progress>
<span id=”objprogress”>76</span>%
</progress>
<rp> ruby annotations
<rt> ใช้อธิบาย <rp>
<ruby>
<section> section ของ content
<source>
<video controls autoplay> <source src='video.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'> <source src='video.ogv' type='video/ogg; codecs="theora, vorbis"' onerror="fallback(parentNode)"> ... </video>
<summary> สรุป
<time> แสดงเวลา
Published <time>2009-10-21</time>.
<video>
<figcaption>
<samp>
<kbd>
<bdo>
<wbr>
<menu> บอกว่าเป็นเมนู
แต่ทั้งนี้ ผมยอมรับว่า ในบทความนี้ รายละเอียดยังไม่พอที่จะให้เราสามารถใช้งาน html 5 ได้ครับ แต่ไม่ต้องห่วงครับ ผมจะเอารายละเอียดแต่ละแท็กมาอธิบายให้ฟังต่อในบทความหน้า รับรองครับ ถ้าติดตามผมได้ตลอด คุณจะสามารถใช้งาน HTML 5 ได้แน่นอน ไม่ช้าก็ไวครับ