# โครงการ Terrarium ตอนที่ 1: แนะนำ HTML ![แนะนำ HTML](../../../../translated_images/webdev101-html.4389c2067af68e98280c1bde52b6c6269f399eaae3659b7c846018d8a7b0bbd9.th.png) > ภาพวาดโดย [Tomomi Imura](https://twitter.com/girlie_mac) HTML หรือ HyperText Markup Language เป็นพื้นฐานของทุกเว็บไซต์ที่คุณเคยเยี่ยมชม ลองนึกถึง HTML ว่าเป็นโครงกระดูกที่ให้โครงสร้างแก่หน้าเว็บ – มันกำหนดว่าคอนเทนต์จะอยู่ที่ไหน จัดระเบียบอย่างไร และแต่ละส่วนมีความหมายอย่างไร ในขณะที่ CSS จะช่วยตกแต่ง HTML ด้วยสีและการจัดวาง และ JavaScript จะเพิ่มความมีชีวิตชีวาด้วยการโต้ตอบ HTML เป็นโครงสร้างสำคัญที่ทำให้ทุกอย่างเป็นไปได้ ในบทเรียนนี้ คุณจะสร้างโครงสร้าง HTML สำหรับอินเทอร์เฟซ terrarium เสมือนจริง โครงการที่ลงมือทำนี้จะช่วยให้คุณเรียนรู้แนวคิดพื้นฐานของ HTML ในขณะที่สร้างสิ่งที่น่าสนใจทางสายตา คุณจะได้เรียนรู้วิธีจัดระเบียบคอนเทนต์โดยใช้องค์ประกอบเชิงความหมาย ทำงานกับภาพ และสร้างพื้นฐานสำหรับแอปพลิเคชันเว็บที่มีการโต้ตอบ เมื่อจบบทเรียนนี้ คุณจะมีหน้า HTML ที่แสดงภาพต้นไม้ในคอลัมน์ที่จัดระเบียบ พร้อมสำหรับการตกแต่งในบทเรียนถัดไป ไม่ต้องกังวลหากมันดูเรียบง่ายในตอนแรก – นั่นคือสิ่งที่ HTML ควรทำก่อนที่ CSS จะเพิ่มความสวยงาม ## แบบทดสอบก่อนเรียน [แบบทดสอบก่อนเรียน](https://ff-quizzes.netlify.app/web/quiz/15) > 📺 **ดูและเรียนรู้**: ดูวิดีโอแนะนำที่มีประโยชน์นี้ > > [![วิดีโอพื้นฐาน HTML](https://img.youtube.com/vi/1TvxJKBzhyQ/0.jpg)](https://www.youtube.com/watch?v=1TvxJKBzhyQ) ## การตั้งค่าโครงการของคุณ ก่อนที่เราจะเริ่มเขียนโค้ด HTML มาเตรียมพื้นที่ทำงานสำหรับโครงการ terrarium ของคุณ การสร้างโครงสร้างไฟล์ที่จัดระเบียบตั้งแต่เริ่มต้นเป็นนิสัยที่สำคัญที่จะช่วยคุณได้ตลอดการเดินทางในสายงานพัฒนาเว็บ ### งาน: สร้างโครงสร้างโครงการของคุณ คุณจะสร้างโฟลเดอร์เฉพาะสำหรับโครงการ terrarium และเพิ่มไฟล์ HTML แรกของคุณ มีสองวิธีที่คุณสามารถใช้ได้: **ตัวเลือกที่ 1: ใช้ Visual Studio Code** 1. เปิด Visual Studio Code 2. คลิก "File" → "Open Folder" หรือใช้ `Ctrl+K, Ctrl+O` (Windows/Linux) หรือ `Cmd+K, Cmd+O` (Mac) 3. สร้างโฟลเดอร์ใหม่ชื่อ `terrarium` และเลือกมัน 4. ในแถบ Explorer คลิกไอคอน "New File" 5. ตั้งชื่อไฟล์ของคุณว่า `index.html` ![VS Code Explorer แสดงการสร้างไฟล์ใหม่](../../../../translated_images/vs-code-index.e2986cf919471eb984a0afef231380c8b132b000635105f2397bd2754d1b689c.th.png) **ตัวเลือกที่ 2: ใช้คำสั่ง Terminal** ```bash mkdir terrarium cd terrarium touch index.html code index.html ``` **สิ่งที่คำสั่งเหล่านี้ทำ:** - **สร้าง** ไดเรกทอรีใหม่ชื่อ `terrarium` สำหรับโครงการของคุณ - **เข้าสู่**ไดเรกทอรี terrarium - **สร้าง**ไฟล์ `index.html` ว่างเปล่า - **เปิด**ไฟล์ใน Visual Studio Code เพื่อแก้ไข > 💡 **เคล็ดลับมือโปร**: ชื่อไฟล์ `index.html` มีความพิเศษในงานพัฒนาเว็บ เมื่อมีคนเยี่ยมชมเว็บไซต์ เบราว์เซอร์จะค้นหา `index.html` โดยอัตโนมัติเป็นหน้าเริ่มต้นที่จะแสดง ซึ่งหมายความว่า URL เช่น `https://mysite.com/projects/` จะให้บริการไฟล์ `index.html` จากโฟลเดอร์ `projects` โดยไม่จำเป็นต้องระบุชื่อไฟล์ใน URL ## ทำความเข้าใจโครงสร้างเอกสาร HTML เอกสาร HTML ทุกฉบับมีโครงสร้างเฉพาะที่เบราว์เซอร์ต้องการเพื่อแสดงผลอย่างถูกต้อง ลองนึกถึงโครงสร้างนี้เหมือนจดหมายทางการ – มันมีองค์ประกอบที่จำเป็นในลำดับที่เฉพาะเจาะจงที่ช่วยให้ผู้รับ (ในกรณีนี้คือเบราว์เซอร์) ประมวลผลคอนเทนต์ได้อย่างเหมาะสม มาเริ่มต้นด้วยการเพิ่มพื้นฐานที่จำเป็นที่เอกสาร HTML ทุกฉบับต้องมี ### การประกาศ DOCTYPE และองค์ประกอบราก สองบรรทัดแรกของไฟล์ HTML ใด ๆ ทำหน้าที่เป็น "การแนะนำ" เอกสารให้กับเบราว์เซอร์: ```html ``` **ทำความเข้าใจว่ารหัสนี้ทำอะไร:** - **ประกาศ**ประเภทเอกสารเป็น HTML5 โดยใช้ `` - **สร้าง**องค์ประกอบราก `` ที่จะมีคอนเทนต์ทั้งหมดของหน้า - **กำหนด**มาตรฐานเว็บสมัยใหม่สำหรับการแสดงผลเบราว์เซอร์ที่เหมาะสม - **รับรอง**การแสดงผลที่สม่ำเสมอในเบราว์เซอร์และอุปกรณ์ต่าง ๆ > 💡 **เคล็ดลับ VS Code**: วางเมาส์เหนือแท็ก HTML ใด ๆ ใน VS Code เพื่อดูข้อมูลที่เป็นประโยชน์จาก MDN Web Docs รวมถึงตัวอย่างการใช้งานและรายละเอียดความเข้ากันได้ของเบราว์เซอร์ > 📚 **เรียนรู้เพิ่มเติม**: การประกาศ DOCTYPE ป้องกันเบราว์เซอร์จากการเข้าสู่ "quirks mode" ซึ่งเคยใช้เพื่อสนับสนุนเว็บไซต์เก่ามาก ๆ การพัฒนาเว็บสมัยใหม่ใช้การประกาศ `` ที่เรียบง่ายเพื่อรับรอง [การแสดงผลที่สอดคล้องกับมาตรฐาน](https://developer.mozilla.org/docs/Web/HTML/Quirks_Mode_and_Standards_Mode) ## การเพิ่มข้อมูลเมตาที่จำเป็นของเอกสาร ส่วน `` ของเอกสาร HTML มีข้อมูลสำคัญที่เบราว์เซอร์และเครื่องมือค้นหาต้องการ แต่ผู้เยี่ยมชมจะไม่เห็นโดยตรงบนหน้า ลองนึกถึงมันว่าเป็นข้อมูล "เบื้องหลัง" ที่ช่วยให้หน้าเว็บของคุณทำงานได้อย่างถูกต้องและปรากฏอย่างเหมาะสมในอุปกรณ์และแพลตฟอร์มต่าง ๆ ข้อมูลเมตานี้บอกเบราว์เซอร์ว่าจะแสดงผลหน้าเว็บของคุณอย่างไร ใช้การเข้ารหัสตัวอักษรแบบใด และจัดการกับขนาดหน้าจออย่างไร – ทั้งหมดนี้จำเป็นสำหรับการสร้างหน้าเว็บที่เป็นมืออาชีพและเข้าถึงได้ ### งาน: เพิ่มส่วนหัวของเอกสาร แทรกส่วน `` นี้ระหว่างแท็ก `` เปิดและปิดของคุณ: ```html Welcome to my Virtual Terrarium ``` **แยกย่อยสิ่งที่แต่ละองค์ประกอบทำ:** - **ตั้งค่า**ชื่อหน้าที่ปรากฏในแท็บเบราว์เซอร์และผลการค้นหา - **ระบุ**การเข้ารหัสตัวอักษร UTF-8 เพื่อแสดงข้อความอย่างถูกต้องทั่วโลก - **รับรอง**ความเข้ากันได้กับเวอร์ชันสมัยใหม่ของ Internet Explorer - **กำหนดค่า**การออกแบบที่ตอบสนองโดยตั้งค่ามุมมองให้ตรงกับความกว้างของอุปกรณ์ - **ควบคุม**ระดับการซูมเริ่มต้นเพื่อแสดงคอนเทนต์ในขนาดธรรมชาติ > 🤔 **ลองคิดดู**: จะเกิดอะไรขึ้นหากคุณตั้งค่าแท็กเมตา viewport แบบนี้: ``? สิ่งนี้จะบังคับให้หน้าเว็บมีความกว้าง 600 พิกเซลเสมอ ซึ่งจะทำลายการออกแบบที่ตอบสนอง! เรียนรู้เพิ่มเติมเกี่ยวกับ [การกำหนดค่ามุมมองที่เหมาะสม](https://developer.mozilla.org/docs/Web/HTML/Viewport_meta_tag) ## การสร้างเนื้อหาเอกสาร องค์ประกอบ `` มีคอนเทนต์ที่มองเห็นได้ทั้งหมดของหน้าเว็บของคุณ – ทุกสิ่งที่ผู้ใช้จะเห็นและโต้ตอบ ในขณะที่ส่วน `` ให้คำแนะนำแก่เบราว์เซอร์ ส่วน `` มีคอนเทนต์จริง: ข้อความ รูปภาพ ปุ่ม และองค์ประกอบอื่น ๆ ที่สร้างอินเทอร์เฟซผู้ใช้ของคุณ มาเพิ่มโครงสร้างของส่วน body และทำความเข้าใจว่าแท็ก HTML ทำงานร่วมกันอย่างไรเพื่อสร้างคอนเทนต์ที่มีความหมาย ### ทำความเข้าใจโครงสร้างแท็ก HTML HTML ใช้แท็กคู่เพื่อกำหนดองค์ประกอบ แท็กส่วนใหญ่มีแท็กเปิด เช่น `

` และแท็กปิด เช่น `

` โดยมีคอนเทนต์อยู่ระหว่าง: `

Hello, world!

` สิ่งนี้สร้างองค์ประกอบย่อหน้าที่มีข้อความ "Hello, world!" ### งาน: เพิ่มองค์ประกอบ Body อัปเดตไฟล์ HTML ของคุณเพื่อรวมองค์ประกอบ ``: ```html Welcome to my Virtual Terrarium ``` **นี่คือสิ่งที่โครงสร้างทั้งหมดนี้ให้:** - **กำหนด**กรอบเอกสาร HTML5 พื้นฐาน - **รวม**ข้อมูลเมตาที่จำเป็นสำหรับการแสดงผลเบราว์เซอร์ที่เหมาะสม - **สร้าง** body ว่างเปล่าพร้อมสำหรับคอนเทนต์ที่มองเห็นได้ของคุณ - **ปฏิบัติตาม**แนวทางปฏิบัติที่ดีที่สุดในการพัฒนาเว็บสมัยใหม่ ตอนนี้คุณพร้อมที่จะเพิ่มองค์ประกอบที่มองเห็นได้ของ terrarium แล้ว เราจะใช้องค์ประกอบ `
` เป็นตัวจัดระเบียบส่วนต่าง ๆ ของคอนเทนต์ และองค์ประกอบ `` เพื่อแสดงภาพต้นไม้ ### การทำงานกับภาพและตัวจัดระเบียบเลย์เอาต์ ภาพมีความพิเศษใน HTML เพราะใช้แท็ก "ปิดตัวเอง" ต่างจากองค์ประกอบ เช่น `

` ที่ครอบคลุมคอนเทนต์ แท็ก `` มีข้อมูลทั้งหมดที่ต้องการภายในแท็กเองโดยใช้แอตทริบิวต์ เช่น `src` สำหรับเส้นทางไฟล์ภาพ และ `alt` สำหรับการเข้าถึง ก่อนเพิ่มภาพลงใน HTML ของคุณ คุณจะต้องจัดระเบียบไฟล์โครงการของคุณอย่างเหมาะสมโดยการสร้างโฟลเดอร์ภาพและเพิ่มกราฟิกต้นไม้ **ขั้นแรก ตั้งค่าไฟล์ภาพของคุณ:** 1. สร้างโฟลเดอร์ชื่อ `images` ภายในโฟลเดอร์โครงการ terrarium ของคุณ 2. ดาวน์โหลดภาพต้นไม้จาก [โฟลเดอร์โซลูชัน](../../../../3-terrarium/solution/images) (รวมทั้งหมด 14 ภาพ) 3. คัดลอกภาพต้นไม้ทั้งหมดลงในโฟลเดอร์ `images` ใหม่ของคุณ ### งาน: สร้างเลย์เอาต์การแสดงผลต้นไม้ ตอนนี้เพิ่มภาพต้นไม้ที่จัดระเบียบในสองคอลัมน์ระหว่างแท็ก `` ของคุณ: ```html
plant
plant
plant
plant
plant
plant
plant
plant
plant
plant
plant
plant
plant
plant
``` **ทีละขั้นตอน นี่คือสิ่งที่เกิดขึ้นในโค้ดนี้:** - **สร้าง**ตัวจัดระเบียบหน้าเว็บหลักด้วย `id="page"` เพื่อเก็บคอนเทนต์ทั้งหมด - **กำหนด**ตัวจัดระเบียบคอลัมน์สองคอลัมน์: `left-container` และ `right-container` - **จัดระเบียบ**ต้นไม้ 7 ต้นในคอลัมน์ซ้ายและ 7 ต้นในคอลัมน์ขวา - **ครอบคลุม**ภาพต้นไม้แต่ละภาพใน div `plant-holder` เพื่อการจัดตำแหน่งเฉพาะ - **ใช้**ชื่อคลาสที่สม่ำเสมอสำหรับการตกแต่ง CSS ในบทเรียนถัดไป - **กำหนด** ID เฉพาะให้กับภาพต้นไม้แต่ละภาพสำหรับการโต้ตอบ JavaScript ในภายหลัง - **รวม**เส้นทางไฟล์ที่เหมาะสมที่ชี้ไปยังโฟลเดอร์ภาพ > 🤔 **ลองพิจารณา**: สังเกตว่าภาพทั้งหมดในปัจจุบันมีข้อความ alt เดียวกันว่า "plant" ซึ่งไม่เหมาะสำหรับการเข้าถึง ผู้ใช้เครื่องอ่านหน้าจอจะได้ยินคำว่า "plant" ซ้ำ ๆ 14 ครั้งโดยไม่รู้ว่าภาพแต่ละภาพแสดงต้นไม้ชนิดใด คุณคิดว่าข้อความ alt ที่อธิบายได้ดีกว่าสำหรับแต่ละภาพคืออะไร? > 📝 **ประเภทองค์ประกอบ HTML**: องค์ประกอบ `
` เป็น "block-level" และใช้ความกว้างเต็ม ในขณะที่องค์ประกอบ `` เป็น "inline" และใช้ความกว้างที่จำเป็นเท่านั้น คุณคิดว่าจะเกิดอะไรขึ้นหากคุณเปลี่ยนแท็ก `
` ทั้งหมดเป็นแท็ก ``? เมื่อเพิ่มมาร์กอัปนี้แล้ว ต้นไม้จะปรากฏบนหน้าจอ แม้ว่ามันจะยังดูไม่สวยงาม – นั่นคือสิ่งที่ CSS จะช่วยในบทเรียนถัดไป! ตอนนี้คุณมีพื้นฐาน HTML ที่มั่นคงที่จัดระเบียบคอนเทนต์ของคุณอย่างเหมาะสมและปฏิบัติตามแนวทางการเข้าถึงที่ดีที่สุด ## การใช้ HTML เชิงความหมายเพื่อการเข้าถึง HTML เชิงความหมายหมายถึงการเลือกใช้องค์ประกอบ HTML ตามความหมายและวัตถุประสงค์ ไม่ใช่แค่ลักษณะการแสดงผล เมื่อคุณใช้มาร์กอัปเชิงความหมาย คุณกำลังสื่อสารโครงสร้างและความหมายของคอนเทนต์ของคุณไปยังเบราว์เซอร์ เครื่องมือค้นหา และเทคโนโลยีช่วยเหลือ เช่น เครื่องอ่านหน้าจอ วิธีนี้ทำให้เว็บไซต์ของคุณเข้าถึงได้มากขึ้นสำหรับผู้ใช้ที่มีความบกพร่อง และช่วยให้เครื่องมือค้นหาเข้าใจคอนเทนต์ของคุณได้ดีขึ้น เป็นหลักการพื้นฐานของการพัฒนาเว็บสมัยใหม่ที่สร้างประสบการณ์ที่ดีขึ้นสำหรับทุกคน ### การเพิ่มชื่อหน้าเชิงความหมาย มาเพิ่มหัวข้อที่เหมาะสมให้กับหน้า terrarium ของคุณ แทรกบรรทัดนี้หลังแท็ก `` เปิดของคุณ: ```html

My Terrarium

``` **ทำไมมาร์กอัปเชิงความหมายถึงสำคัญ:** - **ช่วย**เครื่องอ่านหน้าจอในการนำทางและเข้าใจโครงสร้างหน้า - **ปรับปรุง**การเพิ่มประสิทธิภาพเครื่องมือค้นหา (SEO) โดยการชี้แจงลำดับชั้นของคอนเทนต์ - **เพิ่ม**การเข้าถึงสำหรับผู้ใช้ที่มีความบกพร่องทางสายตาหรือความแตกต่างทางปัญญา - **สร้าง**ประสบการณ์ผู้ใช้ที่ดีขึ้นในทุกอุปกรณ์และแพลตฟอร์ม - **ปฏิบัติตาม**มาตรฐานเว็บและแนวทางปฏิบัติที่ดีที่สุดสำหรับการพัฒนามืออาชีพ **ตัวอย่างการเลือกเชิงความหมาย vs. ไม่เชิงความหมาย:** | วัตถุประสงค์ | ✅ ตัวเลือกเชิงความหมาย | ❌ ตัวเลือกไม่เชิงความหมาย | |---------|-------------------|------------------------| | หัวข้อหลัก | `

Title

` | `
Title
` | | การนำทาง | `` | `
` | | ปุ่ม | `` | `Click me` | | คอนเทนต์บทความ | `

` | `
` | > 🎥 **ดูการทำงาน**: ดู [วิธีที่เครื่องอ่านหน้าจอโต้ตอบกับหน้าเว็บ](https://www.youtube.com/watch?v=OUDV1gqs9GA) เพื่อเข้าใจว่าทำไมมาร์กอัปเชิงความหมายถึงสำคัญสำหรับการเข้าถึง สังเกตว่าโครงสร้าง HTML ที่เหมาะสมช่วยให้ผู้ใช้นำทางได้อย่างมีประสิทธิภาพ ## การสร้างตัวจัดระเบียบ Terrarium ตอนนี้มาเพิ่มโครงสร้าง HTML สำหรับ terrarium เอง – ภาชนะแก้วที่ต้นไม้จะถูกวางในที่สุด ส่วนนี้แสดงให้เห็นถึงแนวคิดสำคัญ: HTML ให้โครงสร้าง แต่หากไม่มีการตกแต่ง CSS องค์ประกอบเหล่านี้จะยังไม่ปรากฏให้เห็น มาร์กอัป terrarium ใช้ชื่อคลาสที่อธิบายได้ซึ่งจะทำให้การตกแต่ง CSS เป็นเรื่องง่ายและดูแลรักษาได้ในบทเรียนถัดไป ### งาน: เพิ่มโครงสร้าง Terrarium แทรกมาร์กอัปนี้เหนือแท็ก `
` สุดท้าย (ก่อนแท็กปิดของตัวจัดระเบียบหน้า): ```html
``` **ทำความเข้าใจโครงสร้าง terrarium นี้:** - **สร้าง**ตัวจัดระเบียบ terrarium หลักพร้อม ID เฉพาะสำหรับการตกแต่ง - **กำหนด**องค์ประกอบแยกสำหรับแต่ละส่วนประกอบภาพ (ด้านบน ผนัง ดิน ด้านล่าง) - **รวม**องค์ประกอบที่ซ้อนกันสำหรับเอฟเฟกต์การสะท้อนแก้ว (องค์ประกอบ glossy) - **ใช้**ชื่อคลาสที่อธิบายได้ชัดเจนที่ระบุว **คำสั่ง:** สร้างส่วน HTML แบบ semantic ที่มีหัวข้อหลัก "คู่มือการดูแลพืช" และมีสามหัวข้อย่อยคือ "การรดน้ำ", "ความต้องการแสง", และ "การดูแลดิน" โดยแต่ละหัวข้อย่อยมีย่อหน้าที่ให้ข้อมูลเกี่ยวกับการดูแลพืช ใช้แท็ก HTML แบบ semantic เช่น `
`, `

`, `

`, และ `

` เพื่อจัดโครงสร้างเนื้อหาให้เหมาะสม เรียนรู้เพิ่มเติมเกี่ยวกับ [agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) ที่นี่ ## ท้าทายประวัติศาสตร์ HTML **เรียนรู้เกี่ยวกับวิวัฒนาการของเว็บ** HTML ได้พัฒนาไปอย่างมากตั้งแต่ Tim Berners-Lee สร้างเว็บเบราว์เซอร์ตัวแรกที่ CERN ในปี 1990 แท็กเก่าบางตัว เช่น `` ถูกยกเลิกไปแล้วเนื่องจากไม่เหมาะสมกับมาตรฐานการเข้าถึงและหลักการออกแบบที่ตอบสนองในยุคปัจจุบัน **ลองทำการทดลองนี้:** 1. ลองใส่หัวข้อ `

` ของคุณในแท็ก `` ชั่วคราว: `

My Terrarium

` 2. เปิดหน้าเว็บของคุณในเบราว์เซอร์และสังเกตผลการเลื่อน 3. พิจารณาว่าทำไมแท็กนี้ถึงถูกยกเลิก (คำใบ้: คิดถึงประสบการณ์ผู้ใช้และการเข้าถึง) 4. ลบแท็ก `` และกลับไปใช้การมาร์กอัปแบบ semantic **คำถามสะท้อนความคิด:** - หัวข้อที่เลื่อนอาจส่งผลต่อผู้ใช้ที่มีความบกพร่องทางสายตาหรือความไวต่อการเคลื่อนไหวอย่างไร? - เทคนิค CSS สมัยใหม่ใดที่สามารถสร้างเอฟเฟกต์ภาพที่คล้ายกันได้โดยเข้าถึงได้มากกว่า? - ทำไมการใช้มาตรฐานเว็บปัจจุบันแทนองค์ประกอบที่ถูกยกเลิกจึงสำคัญ? สำรวจเพิ่มเติมเกี่ยวกับ [องค์ประกอบ HTML ที่ล้าสมัยและถูกยกเลิก](https://developer.mozilla.org/docs/Web/HTML/Element#Obsolete_and_deprecated_elements) เพื่อทำความเข้าใจว่ามาตรฐานเว็บพัฒนาไปอย่างไรเพื่อปรับปรุงประสบการณ์ผู้ใช้ ## แบบทดสอบหลังการบรรยาย [แบบทดสอบหลังการบรรยาย](https://ff-quizzes.netlify.app/web/quiz/16) ## ทบทวนและศึกษาด้วยตนเอง **เพิ่มพูนความรู้เกี่ยวกับ HTML ของคุณ** HTML เป็นพื้นฐานของเว็บมานานกว่า 30 ปี โดยพัฒนาจากภาษามาร์กอัปเอกสารธรรมดาไปสู่แพลตฟอร์มที่ซับซ้อนสำหรับการสร้างแอปพลิเคชันแบบโต้ตอบ การเข้าใจวิวัฒนาการนี้ช่วยให้คุณชื่นชมมาตรฐานเว็บสมัยใหม่และตัดสินใจพัฒนาได้ดีขึ้น **เส้นทางการเรียนรู้ที่แนะนำ:** 1. **ประวัติและวิวัฒนาการของ HTML** - ศึกษาไทม์ไลน์ตั้งแต่ HTML 1.0 ถึง HTML5 - สำรวจว่าทำไมแท็กบางตัวถึงถูกยกเลิก (การเข้าถึง, ความเหมาะสมกับมือถือ, การบำรุงรักษา) - ตรวจสอบคุณสมบัติ HTML ใหม่และข้อเสนอที่กำลังเกิดขึ้น 2. **เจาะลึก HTML แบบ semantic** - ศึกษารายการองค์ประกอบ semantic ของ [HTML5](https://developer.mozilla.org/docs/Web/HTML/Element) - ฝึกการระบุว่าเมื่อใดควรใช้ `
`, `
`, `