Fundamentals
What is HTML
เริ่มจากศูนย์ให้เข้าใจว่า HTML คืออะไร ทำหน้าที่อะไรบนเว็บ และทำไมจึงเป็นพื้นฐานที่ต้องรู้ก่อนเรียน CSS และ JavaScript
1) Core Idea: HTML คือภาษาโครงสร้างของเว็บ
คิดแบบเร็ว: HTML คือโครงสร้างหลักของหน้าเว็บ คล้ายการวางโครงห้องก่อนตกแต่ง
HTML ย่อมาจาก HyperText Markup Language เป็นภาษาที่ใช้ "อธิบายโครงสร้างและความหมาย" ของเนื้อหาบนหน้าเว็บ HTML ไม่ได้มีหน้าที่ทำให้เว็บสวย และไม่ได้ทำให้เว็บโต้ตอบได้ด้วยตัวเอง แต่ทำหน้าที่บอกว่าเนื้อหาแต่ละส่วนคืออะไร เช่น หัวข้อ, ย่อหน้า, ลิงก์, รูปภาพ, รายการ, ตาราง หรือฟอร์ม
- HTML กำหนดว่ามีอะไรอยู่บนหน้าเว็บ
- HTML ช่วยให้ Browser และเครื่องมือช่วยการเข้าถึงเข้าใจเนื้อหา
- HTML ที่ดีทำให้ต่อยอด CSS และ JavaScript ได้ง่ายขึ้น
2) Mental Model: บ้านหนึ่งหลังต้องมีโครงก่อน
ทั้งสามภาษาเป็นทีมเดียวกัน แต่คนละบทบาท: โครงสร้าง, รูปลักษณ์, พฤติกรรม
ถ้ามองเว็บเป็นบ้าน: HTML = โครงบ้านและผังห้อง CSS = สี วัสดุ และการตกแต่ง JavaScript = ระบบไฟ ประตูอัตโนมัติ และพฤติกรรมโต้ตอบ ถ้าไม่มี HTML ที่ชัดเจน ต่อให้ CSS/JavaScript ดีแค่ไหน เว็บก็จะดูสับสนและดูแลยาก
| ส่วนประกอบ | คำถามที่ตอบ | ตัวอย่าง |
|---|---|---|
| HTML | มีอะไรบ้างบนหน้า? | <h1>, <p>, <a>, <img>, <form> |
| CSS | หน้าตาเป็นอย่างไร? | สี, spacing, layout, typography |
| JavaScript | โต้ตอบอย่างไร? | คลิกแล้วเปลี่ยนค่า, ส่งฟอร์ม, โหลดข้อมูล |
3) Rule/Definition: HTML เขียนด้วย Element และ Tag
หน่วยพื้นฐานของ HTML คือ element ซึ่งมักประกอบด้วย: - opening tag - content - closing tag ตัวอย่าง: <p>สวัสดี</p> บาง element ไม่มี closing tag เช่น <img> และ <br> (เรียก void elements)
แต่ละ tag บอกชนิดของเนื้อหา ไม่ใช่แค่หน้าตา เช่น <h1> สื่อว่าเป็นหัวข้อสำคัญ
- ใช้ heading tags (<h1> ถึง <h6>) เพื่อบอกลำดับเนื้อหา
- ใช้ <p> สำหรับย่อหน้า ไม่ใช้แทนทุกอย่างด้วย <div>
- ใส่ attribute ที่จำเป็น เช่น href, src, alt อย่างครบถ้วน
4) Worked Example: จากข้อความธรรมดาไปสู่โครงสร้างที่อ่านได้
สมมติเรามีเนื้อหาหนึ่งส่วน: ชื่อบทความ, คำอธิบายสั้น, และลิงก์อ่านต่อ ถ้าเราใส่ทุกอย่างเป็นข้อความต่อกัน จะอ่านยากและไม่สื่อความหมาย แต่เมื่อใช้ HTML ที่เหมาะสม Browser และผู้อ่านจะเข้าใจทันทีว่าอะไรคือหัวข้อ อะไรคือรายละเอียด และอะไรคือ action
ตัวอย่างนี้ยังไม่ใส่ CSS เลย แต่โครงสร้าง semantic ชัดเจนและพร้อมต่อยอด
- เลือก tag ตามความหมายก่อนความสวย
- จัดลำดับหัวข้อและข้อความให้เป็นขั้นตอน
- แยกลิงก์ที่เป็น action ออกจากข้อความอธิบาย
5) Code Example: Browser ใช้ HTML อย่างไร
ลำดับพื้นฐาน: HTML source -> Parse -> DOM tree -> Render บนหน้าจอ
เมื่อ Browser ได้ไฟล์ HTML มันจะ parse โค้ดและสร้าง DOM (Document Object Model) ก่อน จากนั้นจึงใช้ CSS และ JavaScript ทำงานต่อบนโครง DOM นี้
โครงสร้างนี้เป็นจุดเริ่มต้นมาตรฐานของหน้าเว็บ และจะถูกใช้ซ้ำบ่อยมากในงานจริง
6) Recap: สิ่งที่ควรจำจากบทนี้
- HTML คือภาษาที่กำหนดโครงสร้างและความหมายของเนื้อหาเว็บ
- HTML ทำงานร่วมกับ CSS และ JavaScript แต่มีหน้าที่ต่างกันชัดเจน
- หน่วยพื้นฐานคือ element และ tag พร้อม attribute ที่เกี่ยวข้อง
- เขียน HTML ให้ semantic ตั้งแต่แรก จะทำให้ดูแลง่ายและเข้าถึงได้ดีขึ้น
- เมื่อเข้าใจบทนี้แล้ว จะต่อยอดสู่โครงเอกสาร HTML ได้ง่ายมากในบทถัดไป