HTML Tips: เรื่องเล็กน้อย แต่ Impact คือใหญมาก! 💡

พูดเรื่องพื้นฐาน HTML ที่หลายคน (รวมถึงเราเองตอนแรก ๆ) มักมองข้าม คือ การใช้ <div> ทำปุ่ม หรือใช้ <a> ผิดที่... ต้องรีบแก้ด่วน! เพราะจุดเล็กๆ แค่นี้ ส่งผลเสียต่อ SEO และ Accessibility (การเข้าถึงเว็บไซต์) มหาศาล

✅ กฎเหล็กที่ Dev ควรจำ:

👉 ใช้ <a> เมื่อต้องการ "เปลี่ยนหน้า" (Navigation/URL เปลี่ยน)

👉 ใช้ <button> เมื่อต้องการ "สั่งงาน" (Actions เช่น กดส่งฟอร์ม, เปิด Popup)

เลิกทำ UI แบบ Div-soup แล้วหันมาเขียน Semantic HTML ให้ถูกต้อง โค้ดสะอาด เว็บโหลดไว Google รักแน่นอน! 💡

ตัวอย่างเช่น

<!-- ลิงก์ไปหน้าอื่น -->

<a href="/about" class="btn btn-primary">เกี่ยวกับเรา</a>

<!-- ปุ่มทำอะไรในหน้าเดียวกัน -->

<button type="button" class="btn btn-primary" onclick="openModal()">เปิด Modal</button>

<!-- ปุ่มส่งฟอร์ม -->

<button type="submit" class="btn btn-success">ส่งข้อมูล</button>

ทำไมต้องเขียนแบบ Semantic HTML ล่ะ?

โดยเฉพาะผลต่อ SEO

✔ Google รักมากกก → บอทของ Google (crawler) จะเข้าใจโครงสร้างเว็บไซต์ได้ชัดเจนขึ้น เพราะ คือลิงก์จริง ๆ ที่บอกว่ามีการนำทางไปหน้าอื่น ส่วน <button> คือปุ่มที่ไม่ใช่ navigation ทำให้ Google จัดอันดับหน้าเว็บได้แม่นยำกว่า คะแนน SEO พุ่งปรี๊ด! ถ้าใช้ แทน Google อาจสับสน ไม่รู้ว่าอันไหนเป็นลิงก์สำคัญ หรืออันไหนเป็นปุ่มธรรมดา สุดท้ายเว็บเราอาจถูกมองว่าโครงสร้างไม่ดี ลดโอกาสขึ้นอันดับ

#HTMLTips #WebDeveloper #Frontend #CodingTips #DevThailand