ประเภทของ 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

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

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 หรือไม่ใช้ก็ได้)

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

• https://www.w3schools.com/html/html_forms.asp
• https://www.w3schools.com/html/html_form_input_types.asp

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

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

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