ใช้ HTML ให้ถูก ตามหลัก Web Standards
May 1st
วันนี้เราจะมาหัดเขียน HTML กัน ใช่ คุณ อ่านไม่ผิดหรอก HTML หลังจากที่เราตะบี้ตะบันใช้แต่ table มาเสียนานถึงเวลาแล้ว ที่เราจะเปลี่ยนแปลงการเขียน HTML ของเราให้ถูกต้องตามการใช้งานของ tag แต่ละตัว ก่อนอื่นย้อนมาดู โครงสร้างของ Web Standards ว่า มี 3 ส่วนใหญ่ๆคือ
ในหัวข้อนี้ เราจะพูดถึง HTML ก่อน
โครงสร้างพื้นฐาน ของ HTML จะต้องเป็นรูปแบบนี้
<!DOCTYPE>
<html>
<head>
<title>title</title>
<meta name=”keywords” content=”…” >
<link rel=”stylesheet” href=”…”>
<script type=”text/javascript” src=”…” ></script>
</head>
<body>
………….
</body>
</html>
ส่วนโครงสร้างภายในจะประกอบด้วยส่วนหลักๆดังนี้
- Headers <h1>,<h2>
- Paragraph <p>
- Lists <ul><li>,<ol><li>,<dl><dt><dd>
- Tables <table>
- Media เช่น images <img src=”" alt=”">
- Links <a href=”" title=”">
- Form <form>
Header
คือหัวข้อเรื่องเพื่อบ่งบอกว่า หน้า page นั้น เกี่ยวกับเรื่องอะไร ลำดับความสำคัญสูงสุด คือ <h1> เราควรจะมี <h1> เพียงอันเดียว ต่อ 1 หน้า ส่วน <h2> <h3> มีได้หลายๆอัน เลือกใช้ตามลำดับความสำคัญของหัวเรื่อง
*** ไม่ควรใช้ เกินกว่า <h6>
Paragraph
ใช้ <p> ครอบส่วนที่เป็นเนื้อหา text ไม่ควรมีสิ่งที่เป็นบล็อกอยู่ภายใน เช่น table, div, header
และควรรปิดแท็ก </p> เสมอ
List
ใช้ในลักษณะที่มี text เป็นข้อๆ เช่น ส่วนเมนู เนวิเกชั่น ต่างๆ มี 3 รูปแบบให้เลือกใช้
- Unorder list <ul><li></li></ul>
- Order list <ol><li></li></ol>
- Definition list <dl><dt></dt><dd></dd></dl>
การใช้งาน ul li ol li อ่านได้ที่นี่ ส่วน <dl> นั้นจะมีลักษณะเป็น หัวข้อ และ เนื้อหา
ตัวอย่าง
<dl>
<dt>หัวข้อเรื่องย่อย 1</dt>
<dd>เนื้อหา text ในส่วนนี้ จะมีการ ย่อหน้าเข้ามาให้อัตโนมัติ</dd><dt>หัวข้อเรื่องย่อย 2</dt>
<dd>เนื้อหา text 2 ในส่วนนี้ จะมีการ ย่อหน้าเข้ามาให้อัตโนมัติ</dd>
</dl>
<dl> นี้ถูกนำไปใช้จริงหรือไม่ ? ลอง view/source ดูที่หน้านี้http://www.dailynews.co.th/web/html/home/default.htm แล้วเสิร์ชคำว่า <dl id=”menu”> จะเห็นว่า มีการใช้ <dl>ซ้อน <ul> เพื่อทำเป็นเนวิเกชั่นได้อย่างสวยงาม
**** คุณสามารถใช้ list แต่ละตัว ซ้อนกันได้ ไม่มีปัญหา
Table
อย่ารู้สึกผิดครับ เมื่อจะใช้ table มันไม่ใช่ของต้องห้ามสำหรับ css และ เราก็จะไม่เถียงกันว่าอันไหนดีกว่ากันระหว่างเว็บใช้ div กับเว็บใช้ table เพียงแต่เราคือ webdesign ที่นอกจากจะดีไซน์ หน้าตาให้ถูกใจผู้ชมแล้ว เรายังดีไซน์โค้ดได้ถูกต้อง เบราเซอร์ชอบ search engine ชอบ และวางตำแหน่งโค้ดส่วนต่างๆได้อย่างถูกต้อง (อันนี้โปรแกรมเมอร์ที่เอางานไปทำต่อ คงจะชอบ เพราะโค้ดไม่มั่ว จะลูป ตรงไหน ครอบได้ดั่งใจ) 
table นั้นเราจะใช้ ในส่วนที่เป็นข้อมูลในรูปแบบตาราง เช่น เมนูอาหาร ราคา ห้องพักโรงแรม ต่างๆ ถ้าคุณพยายามจะใช้ div แสดงข้อมูลเป็น ตาราง แล้วละก็ ต้องขอบอกว่า ยากมากเลยเชียว ดีไม่ดี ไม่ cross browser อีกต่างหาก ถึงตอนนี้ก็ให้คุณใช้ table โดยมีรูปแบบดังนี้
<table summary=”This is a table of names and their contact number”>
<caption>My friends Number</caption>
<thead>
<tr>
<th scope=”col”>Name</th>
<th scope=”col”>Cellphone Number</th>
</tr>
</thead>
<tbody>
<tr>
<td>ต้น</td>
<td>เอ๋</td>
</tr>
<tr>
<td>081234567</td>
<td>0898765432</td>
</tr>
</tbody>
</table>
ส่วน summary นั้น จะไม่แสดงที่หน้าจอ ใส่เพื่อบอกว่า table นี้เกี่ยวข้องกับอะไร caption จะแสดงผลอยู่เหนือ ตาราง ลักษณะเป็นหัวข้อของ table นี้ จะไม่ใส่ก็ได้
- thead = table head, tbody = table body ส่วน th นั้นมีค่าเท่ากับ td แต่จะใช้เมื่อเป็นหัวข้อ โดยจะเป็นตัวหนาและอยู่กึ่งกลาง เซลล์ อัตโนมัติ
- scope=”col” นั้นใส่เพื่อบอกว่า คอลัมภ์ด้านล่างคือ ข้อมูล ของ head นี้
เบราเซอร์ จะอ่านโค้ดจากบนลงล่าง จากหน้าจอก็คือ ซ้ายไปขวา หากไม่ใส่ scope จะอ่านได้เป็น name cellphone number ต้น เอ๋ ….. หากใส่ scope จะอ่านเป็น name ต้น 081234567
Media
รูปใน img จะต้องมี alt=”คำบรรยาย” เสมอ ถ้าเป็นไอคอนเล็กๆหรือ ขอบโค้ง หรืออะไรก็ตาม ถ้าไม่มีความหมาย ให้ใส่ alt=”" เปล่าๆไว้
<img src=”images/logo.gif” alt=”Divland – The miracle land of inspiration”/>
Link
ลิ้งค์นั้น ให้ใช้ title=”" ในลิ้งค์ ที่อธิบายไม่ชัดเจน เช่น
<a href=”contact.html” title=”ติดต่อเรา”>คลิกที่นี่</a>
<a href=”contact.html”> ติดต่อเรา คลิกที่นี่</a> — แบบนี้ไม่ต้องมี title
Form
tag ที่จะต้องมี สำหรับ form คือ
- <fieldset> ใช้เพื่อรวมกลุ่ม label ในกลุ่มเดียวกัน
- <legend> ใช้เพื่อบรรยาย fieldset
- <label> ใช้เพื่อบรรยาย input
ตัวอย่างการใช้ form
<form name=”form1″>
<fieldset>
<legend>Your Number</legend>
<label for=”sname”>Name</label>
<input type=”text” id=”sname” name=”sname” /><label for=”number”>Number</label>
<input type=”text” id=”number” name=”number” />
</fieldset>
<input type=”submit” value=”Submit” />
</form>
จะได้มาเป็นรูปแบบนี้
fieldset จะมีเส้นขอบล้อม โดยมี legend อยู่ด้านบน ส่วน for และ id ใส่เพื่อ เวลาที่กดเมาส์ซ้ายที่ text ใน label ตัว cursor ของเมาส์ จะไปปรากฎ อยู่ใน field นั้นๆทันที ลองดูได้ ในหน้า Submit Gallery
** อันนี้เป็นรูปแบบมาตรฐานที่ต้องใส่ไว้เสมอ หากต้องการทำกรอบของฟอร์มเอง ให้ใช้ css โดยการซ่อนเส้นกรอบ fieldsetและ hide legend แบบนี้
fieldset {border:0; padding:0; margin:0; border:solid 0 transparent;}
legend {display:none;}
เราก็จะได้ฟอร์มที่ถูกต้อง และใส่พื้นหลังได้เอง ตามต้องการ
โอ้วว กว่าจะเขียนจบเล่นเอามึนไปเลยยย หวังว่าคงจะไม่ยากและน่ารำคาญจนเกินไป ในการที่จะทำให้ถูกต้อง เพราะทุกวันนี้ผมทำแบบนี้อยู่ จริงๆนะ ยังมีแท็ก เทพ ทั้งหลายอีกหลายอันไว้มาเขียนต่อวันหลังเดี๋ยวมันจะยาวจนเกินไป นะ 
ถ้าไม่ใช้ thead tbody มันต่างกันตรงไหน แสดงผลเหมือนกัน
<table summary=”This is a table of names and their contact number”>
<caption>My friends Number</caption>
<tr>
<th>Name</th>
<th>Cellphone Number</th>
</tr>
<tr>
<td>ต้น</td>
<td>เอ๋</td>
</tr>
<tr>
<td>081234567</td>
<td>0898765432</td>
</tr>
</table>
จริงๆ แล้ว มี <tfoot> อีกด้วยนะครับ แต่เราไม่ค่อยได้ ใช้มัน เป็นมาตรฐานที่ทาง w3c กำหนดมา เพราะว่าเราใช้ตามองก็เลยเหมือนกันไงครับ แต่สำหรับคนที่เค้าใช้ screen reader ในการอ่านหน้าจอ จะมีผลต่างครับ เพราะตัวอ่านจะได้รู้ว่า ช่องไหนคือส่วนหัว ส่วนข้อมูล จะได้อ่านตามลำดับถูกต้องไงครับ
ขอบคุณนะคะ ได้รู้ tag ใหม่ ๆ เพิ่มขึ้น บาง tag ไม่เคยใช้เลยนะเนี่ย
เจ๋งครับ มีประโยชน์มาก ขออนุญาตมาจับจองที่เป็นนักเรียนเลยนะครับ
ขอบคุณมากๆค่ะ
สำหรับบทความดีๆอย่างนี้
จะมาติดตามอ่านเสมอค่ะ
เป็นประโยชน์มากจริงๆเลยค่ะ
…นักเรียน
คือพี่คร้าบ..
อยากจาถามว่า
ท่าจาเรียนทางด้านนี้นี่
ต้องเรียนคนะรายอ่าคร้าบ
เทคโนโลยีสารสนเทศด้ายป่ะคร้าบ
ชอบพวกนี้อ่า
ม่ายรุจาเลือกคนะรายดี
^^”
ได้ครับ หรือจะ วิทย์-คอม วิศวะคอม ก็ได้ หมดอะครับ
ขอขอบคุณมากนะคับ สำหรับ บทความดี ๆ
ได้ divland ผมเลยไม่ท้อในการศึกษา web2.0 เลย
แต่พอจะทราบบ้างไหมคับ ว่าที่ไหนมีอบรม หรือเปิดสอนเรื่องนี้บ้าง
อยากเรียนเป็นจริงเป็นจังนะ
ขอบคุณอีกครั้ง divland
วิศวะคอมไม่มีสอนทำเว็บนะครับ
/
/
อยากรู้ก็เรียนเอาเอง
มีประโยชน์มากครับ แวะมาสนับสนุน
/
/
เนื้อหาดีมากเลยครับ
แนวนี้ชอบมากเลยครับ
แบบนี้ต้องลองครับ