Skip to main content

ประเภทของ HTML

ขอแบ่งออกเป็น 3 ประเภท​

จากประสบการณ์ที่ผมทำงานมา ผมจะแบ่ง html ออกจากกันเป็น 3 หมวด ใหญ่ๆคือ

1. html content คือ html ที่เน้นแสดง content ออกมาให้เห็น เช่น​

  • <h1></h1>, <h2></h2>, ..., <h6></h6> สำหรับแสดงหัวข้อใหญ่
  • <p></p> สำหรับแสดง paragraph
  • <ul><li></li></ul> สำหรับแสดง list
  • <table></table> สำหรับแสดง table
  • <a></a> สำหรับแสดง link
  • <img src=''> สำหรับแสดง ภาพ
  • <video></video> สำหรับแสดง list
  • <br> สำหรับขึ้นบรรทัดใหม่
  • <hr> สำหรับตีเส้น
  • <div></div> สำหรับวางกล่องเพื่อวางของทั่วไป

ตัวอย่างของ html content

type-1

2. html semantic คือ html ที่เน้นทำให้หน้าเว็บมีความหมายมากขึ้น​

เพื่อให้ง่ายตอนการแบ่งส่วน และ ต่อ SEO ในการดึง content ไปใช้ เช่น

  • <article></article> สำหรับแสดงเนื้อหา
  • <section></section> สำหรับแสดงแบ่งส่วน section
  • ตัวนี้ทางผมจะไม่ได้พาเล่นมาก เพื่อกันสับสนสำหรับคนที่พึ่งเริ่มต้นว่าแต่ละ tag ควรใช้สถานการณ์ไหน ใครสนใจเพิ่มเติมสามารถดูเพิ่มเติมได้ที่ https://www.w3schools.com/html/html5_semantic_elements.asp
  • ปกติ tag เหล่านี้ ผมจะใช้ก็ต่อเมื่อมีเคสที่อยากให้ SEO เน้นโดยเฉพาะ เช่น เน้นส่วนเนื้อหาโดยเฉพาะก็ใช้ <article></article> ไป เป็นต้น

ตัวอย่างของ html semantic

type-2

3. html form คือ html ส่วนของการแสดงผลส่วน input form ที่ user สามารถเข้ามาใช้งานในหน้าเว็บได้​

  • <form> สำหรับเปิดตัว form หลัก (จะใช้หรือไม่ใช้ก็ได้ เดี๋ยวจะมีอธิบายเพิ่มเติมในการส่ง form อีกที)
  • <input type='text'> สำหรับช่องให้ user กรอกข้อความ
  • <input type='number'> สำหรับช่องให้ user ใส่เลข
  • <input type='checkbox'> สำหรับ checkbox ให้ user ติ้กเลือกได้
  • <input type='radio'> สำหรับ radio ให้ user ติ้กเลือกได้
  • <textarea></textarea> สำหรับกล่องข้อความใหญ่ๆที่ให้ user มากรอกข้อความได้
  • <input type='submit'> ปุุ่มสำหรับให้ user มากดได้ เพื่อ submit form
  • <button></button> ปุุ่มสำหรับให้ user มากดได้ (ที่จะใช้เพื่อ submit form หรือไม่ใช้ก็ได้)

สามารถดูทั้งหมดได้ที่

ตัวอย่างของ html form

type-3

ผมจะไม่อธิบาย html ทั้งหมดไว้ในบทความนี้นะครับ เนื่องจาก html มีจำนวนเยอะมาก และ ประเภทเหล่านี้เป็นการแบ่งตามประสบการณ์ของผมเองเพื่อให้ง่ายต่อการเลือกใช้งาน

หากใครสนใจอยากรู้เพิ่มเติม แนะนำที่นี่ครับ ถ้าเจอเคสไหนที่ไม่มีในนี้สามารถเข้าไปอ่านเพิ่มเติมได้ https://www.w3schools.com/html