เขียน HTML ให้เทพ! ด้วย 10 เทคนิคง่ายๆ
HTML เป็นพื้นฐานของการสร้างเว็บไซต์ ทำให้การเขียน HTML ที่ดีเป็นสิ่งสำคัญอย่างมาก บทความนี้จะมาดูเทคนิค และทฤษฎีที่จะทำให้เราเขียน HTML ได้ดีขึ้น อ่านโค้ดได้ง่ายขึ้น มีประสิทธิภาพขึ้น ด้วย 10 เทคนิคที่ไม่ลับ และทำตามได้ง่ายๆ กับเว็บไซต์ของคุณ มีอะไรบ้างมาดูกัน
ตัวอย่าง เขียน HTML ให้เทพ! ด้วย 10 เทคนิคง่ายๆ
1. ควรใช้ HTML5: เนื่องจาก HTML5 เป็นมาตราฐานใหม่ มีการสนับสนุนฟังก์ชัน และความสามารถใหม่ๆ ที่ไม่มีอยู่ใน HTML แบบเดิม การใช้ HTML ควรเริ่มต้นแบบนี้
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
...
...
</body>
</html>
2. แท็กควรเป็นพิมพ์เล็ก: การเขียนแท็กไม่ควรใช้ตัวอักษรพิมพ์ใหญ่ ควรใช้ตัวอักษรพิมพ์เล็กทั้งหมด และไม่ควรใช้ตัวอักษรพิมพ์เล็กผสมพิมพ์ใหญ่ ซึ่งจะทำให้เกิดความสับสน
// ไม่ควรเขียน
<BODY>
<B>Title</B>
<Div>Description</Div>
</BODY>// ควรเขียน
<body>
<b>Title</b>
<div>Description</div>
</body>
3. เปิดแท็กแล้วต้องปิด: ใน HTML เมื่อเปิดแท็กแล้วควรปิดให้เรียบร้อย เมื่อใช้งานเสร็จ หลายครั้งเมื่อเราเปิดแท็กแล้ว เราอาจจะลืมปิดซึ่งอาจส่งผลทำให้โค้ดต่อจากส่วนดังกล่าวแสดงผลผิดพลาดได้
// ไม่ควรเขียน
<b>Devdit// ควรเขียน
<b>Devdit</b>
4. ใช้แท็กให้เหมาะสม: ใน HTML มีแท็กมากมายสำหรับพัฒนาเว็บไซต์ แต่ควรใช้ให้เหมาะสมตามวัตถุประสงค์ของแท็ก เพราะจะมีผลต่อประสิทธิภาพหลายด้าน ตัวอย่างโค้ดกรณีถ้าเป็นหัวข้อควรใช้แท็ก h1, h2 เพื่อบอกว่าเนื้อหาส่วนนั้นเป็น header
// ไม่ควรเขียน
<div style="font-size: 20px">Header Topic</div>// ควรเขียน
<h1>Header Topic</h1>
5. เข้าใจ class และ id: ทั้ง 2 attribute มีวัตถุประสงค์การใช้งานที่แตกต่างกัน คือ class ควรใช้กับ CSS และ id ควรใช้กับการทำงานร่วมกับ JavaScript ซึ่งการแยกแบบนี้ชัดเจนจะทำให้เวลาเราพัฒนาเว็บไซต์จะไม่สับสน
<div class="my-style">Hello</div>
<div id="my-content">Loading...</div>
6. ควรใช้ alt กับแท็ก img: กรณีโหลดรูปภาพด้วยแท็ก img ควรกำหนดแท็ก alt เพื่ออธิบายความหมาย หรือวัตถุประสงค์ของรูปภาพ โดยข้อความจะแสดงเมื่อผู้ใช้งานนำเมาส์ไปวางไว้บนรูปภาพดังกล่าว
<img src="my-image.jpg" alt="My first image">
7. ย่อหน้าให้อ่านง่าย: การเขียนโค้ดทุกภาษาไม่ใช้แค่ HTML ควรฝึกย่อหน้าให้เป็นนิสัย เนื่องจากการย่อหน้าจะทำให้โค้ดอ่านได้ง่าย ส่งผลให้การบำรุงรักษาโค้ดมีประสิทธิภาพ
// ไม่ควรเขียน
<div>
<div>Header</div>
<ul>
<li>A</li>
...
</u>
</div>// ควรเขียน
<div>
<div>Header</div>
<ul>
<li>A</li>
...
</u>
</div>
8. ควรใช้ double quote: การกำหนดค่า attribute ต่างๆ ควรใช้ double quote ("") แทนการใช้ single quote ('') และหลีกเลี่ยงการใช้ทั้ง 2 สลับไปสลับมา เพราะจะทำให้โค้ดอ่านยาก และขาดมาตราฐาน
// ไม่ควรเขียน
<div class='my-style'>Hi, How are you</div>// ควรเขียน
<div class="my-style">Hi, How are you</div>
9. ปิดแท็กให้ถูกต้อง: ระวังเรื่องลำดับของการปิดแท็ก หากมีการใช้แท็กซ้อนกันควรปิดจากอันด้านในก่อน เพราะถ้าเราปิดผิดอาจจะทำให้ส่วนการแสดงผลต่อจากนี้ผิดพลาดได้
// ไม่ควรเขียน
<div class="my-style"><b>Welcome</div></b>// ควรเขียน
<div class="my-style"><b>Welcome</b></div>
10. ควรเขียน CSS และเรียกใช้: การกำหนด style ให้กับ elements ต่างๆ ควรเขียนในรูปแบบของ CSS แทนกำหนด style ลงไปตรงๆ ที่แท็ก เนื่องจากการเขียน CSS และเรียกใช้ผ่าน class เป็นการ reuse code ได้อย่างมีประสิทธิภาพ และแยกโค้ดส่วน HTML และ CSS ออกจากกันอย่างชัดเจน
// ไม่ควรเขียน
<div style="font-size: 16px; color: red; font-weight: bold;">Alert!!</div> // ควรเขียน
<style>
.alert_danger {
font-size: 16px;
color: red;
font-weight: bold;
}
</style>
<div class="alert-danger">Alert!!</div>
