คำถามและคำตอบสัมภาษณ์ HTML 50 อันดับแรก (2026)
เอ็มม่าเดวิส
เตรียมตัวสัมภาษณ์งาน HTML หรือยัง? ลองคิดให้รอบคอบเกี่ยวกับคำถามที่คุณอาจเจอ การสัมภาษณ์เหล่านี้มีความสำคัญ เพราะเผยให้เห็นถึงความลึกซึ้งทางเทคนิค แนวทางการแก้ปัญหา และการนำแนวคิดการพัฒนาเว็บที่สำคัญไปประยุกต์ใช้จริง
โอกาสในตำแหน่งงาน HTML ครอบคลุมหลากหลายสาขา ตั้งแต่มือใหม่ไปจนถึงผู้เชี่ยวชาญระดับสูงที่มีประสบการณ์การทำงานในสาขานี้ 5 หรือ 10 ปี นายจ้างจะประเมินความเชี่ยวชาญทางเทคนิค ความเชี่ยวชาญเฉพาะด้าน และวิเคราะห์ทักษะผ่านคำถามและคำตอบ ประสบการณ์วิชาชีพที่แข็งแกร่ง ประสบการณ์ระดับพื้นฐาน และทักษะที่หลากหลาย ช่วยให้ผู้สมัครสามารถรับมือกับความท้าทายทั้งขั้นพื้นฐาน ขั้นสูง และทางเทคนิค
การวิเคราะห์ของเรารวบรวมจากความคิดเห็นจากผู้นำทางเทคนิคกว่า 60 คน ข้อมูลเชิงลึกจากผู้จัดการกว่า 45 คน และการหารือกับผู้เชี่ยวชาญกว่า 100 คน มุมมองเหล่านี้สะท้อนถึงความคาดหวังที่หลากหลายและความต้องการของอุตสาหกรรมที่เปลี่ยนแปลงไป
คำถามและคำตอบสัมภาษณ์ HTML ยอดนิยม
1) HTML คืออะไร และเหตุใดจึงถือเป็นกระดูกสันหลังของการพัฒนาเว็บ
ภาษามาร์กอัปไฮเปอร์เท็กซ์ (HTML) เป็นภาษาพื้นฐานของเว็บ ออกแบบมาเพื่อจัดโครงสร้างเอกสารและให้ความหมายแก่เนื้อหาเว็บ โดยกำหนดองค์ประกอบต่างๆ เช่น หัวข้อ ย่อหน้า ลิงก์ รูปภาพ และมัลติมีเดีย ช่วยให้เบราว์เซอร์สามารถตีความและแสดงผลได้ เหตุผลที่ถูกเรียกว่าเป็นหัวใจสำคัญของการพัฒนาเว็บก็เพราะทุกเว็บเพจไม่ว่าจะมีความซับซ้อนเพียงใด จะใช้ HTML เพื่อกำหนดเค้าโครงและเนื้อหา หากปราศจาก HTML เทคโนโลยีอย่าง CSS และ Javaสคริปต์จะไม่มีฐานสำหรับการกำหนดรูปแบบหรือจัดการ
👉 ดาวน์โหลด PDF ฟรี: คำถามสัมภาษณ์ HTML
2) อธิบายความแตกต่างระหว่าง HTML และ HTML5 พร้อมตัวอย่าง
HTML เป็นภาษาการมาร์กอัปมาตรฐาน ในขณะที่ HTML5 เป็นเวอร์ชันที่ทันสมัยและทรงพลังกว่าซึ่งเปิดตัวในปี 2014 HTML5 นำองค์ประกอบเชิงความหมาย การรองรับมัลติมีเดีย และ API มาใช้ ซึ่งทำให้ไม่จำเป็นต้องใช้ปลั๊กอินจากบริษัทอื่น เช่น Flash
| คุณสมบัติ (Feature) | HTML | HTML5 |
|---|---|---|
| ประเภทเอกสาร | ยาวและซับซ้อน | เรียบง่าย: |
| มัลติมีเดีย | จำเป็นต้องมีปลั๊กอิน | - |
| กราฟิก | ไม่รองรับโดยพื้นฐาน | - |
| รูปแบบ | อินพุตที่จำกัด | อินพุตใหม่เช่น email, date |
| แท็กความหมาย | เป็นที่พึ่งได้ | - - |
ตัวอย่าง:
<video controls> <source src="sample.mp4" type="video/mp4"> </video>
3) โครงสร้างพื้นฐานของเอกสาร HTML จัดอย่างไร?
เอกสาร HTML ทุกฉบับมีโครงสร้างที่กำหนดไว้เพื่อให้มั่นใจว่าเบราว์เซอร์จะตีความเนื้อหาได้อย่างถูกต้อง ด้านบนคือ คำประกาศที่ระบุการใช้งาน HTML5 องค์ประกอบครอบคลุมเนื้อหาทั้งหมด แบ่งออกเป็น และ . การ ประกอบด้วยข้อมูลเมตา ชื่อเรื่อง ลิงก์ไปยัง CSS และสคริปต์ ในขณะที่แสดงเนื้อหาที่มองเห็นได้ ตัวอย่างเช่น:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Sample Page</title> </head> <body> <h1>Hello World</h1> </body> </html>
4) แท็กและองค์ประกอบใน HTML คืออะไร? จงยกตัวอย่างประกอบ
แท็กคือคำสำคัญที่อยู่ภายในวงเล็บเหลี่ยม ซึ่งทำหน้าที่แนะนำเบราว์เซอร์เกี่ยวกับวิธีแสดงเนื้อหา อย่างไรก็ตาม องค์ประกอบหมายถึงโครงสร้างที่สมบูรณ์ซึ่งประกอบด้วยแท็กเปิด แท็กเนื้อหา และแท็กปิด ตัวอย่างเช่น
- คีย์เวิร์ด: และ
- องค์ประกอบ: นี่คือย่อหน้า
องค์ประกอบบางอย่างจะปิดตัวเอง เช่น และ หมายความว่าไม่จำเป็นต้องมีแท็กปิด
5) HTML รองรับรายการประเภทใดบ้าง และใช้ที่ไหน
รองรับ HTML ประเภทรายการหลักสามประเภท:
- รายการสั่งซื้อ ( - – รายการจะปรากฏเป็นตัวเลขหรือตัวอักษร
- รายการไม่เรียงลำดับ ( - – รายการจะปรากฏพร้อมสัญลักษณ์หัวข้อย่อย
- Descriptรายการไอออน ( - – ใช้สำหรับคำศัพท์และคำจำกัดความ
ตัวอย่าง:
<dl> <dt>HTML</dt> <dd>HyperText Markup Language</dd> </dl>
รายการมักใช้สำหรับเมนูการนำทาง การจัดระเบียบเนื้อหา และเงื่อนไขในคำศัพท์
6) แอตทริบิวต์ใช้ใน HTML อย่างไร และมีตัวอย่างทั่วไปอะไรบ้าง
แอตทริบิวต์จะให้ข้อมูลเพิ่มเติมแก่องค์ประกอบ HTML แอตทริบิวต์เหล่านี้มักจะระบุไว้ภายในแท็กเปิดและตามด้วยคู่ชื่อ-ค่า ตัวอย่างทั่วไป ได้แก่:
srcใน สำหรับตำแหน่งภาพhrefสำหรับปลายทางไฮเปอร์ลิงก์idและclassสำหรับการจัดแต่งทรงและ Javaการกำหนดเป้าหมายสคริปต์altในภาพเพื่อการเข้าถึง
ตัวอย่างเช่น:
<img src="logo.png" alt="Company Logo">
7) องค์ประกอบ HTML แบบซีแมนติกคืออะไร และมีประโยชน์อย่างไร?
องค์ประกอบทางความหมายอธิบายความหมายได้อย่างชัดเจนทั้งต่อนักพัฒนาและเบราว์เซอร์ ตัวอย่างเช่น - - - , และ -
ประโยชน์ที่ได้รับ:
- ปรับปรุงการเข้าถึงสำหรับโปรแกรมอ่านหน้าจอ
- ให้ความหมายของเนื้อหาได้ชัดเจนยิ่งขึ้น (SEO)
- เพิ่มความสามารถในการอ่านและบำรุงรักษาโค้ด
ตัวอย่าง:
<article> <h2>News Update</h2> <p>Latest update about web development trends.</p> </article>
8) อธิบายความแตกต่างระหว่างองค์ประกอบระดับบล็อกและอินไลน์พร้อมตัวอย่าง
องค์ประกอบระดับบล็อก เช่น - , และ ครอบคลุมความกว้างทั้งหมดของคอนเทนเนอร์และเริ่มต้นบรรทัดใหม่ องค์ประกอบอินไลน์ เช่น , , และ จะใช้ความกว้างตามที่กำหนดให้กับเนื้อหาเท่านั้น
| ประเภท | ตัวอย่าง | ลักษณะ |
|---|---|---|
| ระดับบล็อก | - | เริ่มต้นบรรทัดใหม่ ความกว้างเต็ม |
| อินไลน์ | - | การไหลภายในข้อความ ความกว้างขึ้นอยู่กับเนื้อหา |
9) ไฮเปอร์ลิงก์สร้างขึ้นได้อย่างไร และไฮเปอร์ลิงก์แบบสัมบูรณ์และแบบสัมพัทธ์แตกต่างกันอย่างไร URLs?
ไฮเปอร์ลิงก์ถูกสร้างขึ้นโดยใช้ แท็กที่มี href คุณลักษณะ
- แน่นอน URL: ประกอบด้วยเส้นทางแบบเต็มรวมทั้งโปรโตคอลและโดเมน
ตัวอย่าง:<a href="https://example.com/page.html">Visit</a> - ญาติ URL: หมายถึงไฟล์ที่เกี่ยวข้องกับหน้าปัจจุบัน
ตัวอย่าง:<a href="/th/about.html">About Us</a>
แน่นอน URLมักใช้ s เมื่อเชื่อมโยงไปยังแหล่งข้อมูลภายนอก ในขณะที่การใช้ relative เป็นที่นิยมมากกว่า URLฟังก์ชันต่างๆ มีประสิทธิภาพภายในเว็บไซต์เดียวกัน
10) บทบาทของคืออะไร แท็กและคุณสมบัติของมัน?
การ แท็กนี้ใช้เพื่อรวบรวมอินพุตของผู้ใช้และส่งไปยังเซิร์ฟเวอร์ แอตทริบิวต์ที่สำคัญที่สุดสองประการคือ:
- การกระทำ – กำหนดว่าข้อมูลจะถูกส่งไปที่ไหน
- วิธี – ระบุวิธี HTTP (
GETorPOST).
ตัวอย่าง:
<form action="/th/submit" method="post"> <input type="text" name="username"> <input type="submit"> </form>
11) แบบฟอร์ม HTML5 มีฟิลด์อินพุตประเภทใดบ้าง?
HTML5 แนะนำประเภทอินพุตใหม่เพื่อปรับปรุงการใช้งานและลดการพึ่งพา Javaการตรวจสอบสคริปต์ ประเภททั่วไป ได้แก่:
- แบบข้อความ: ข้อความ, รหัสผ่าน, อีเมล์, url, การค้นหา, หมายเลขโทรศัพท์
- ตามวันที่และเวลา: วันที่, วันที่เวลาท้องถิ่น, เดือน, สัปดาห์, เวลา
- ตัวเลข: ตัวเลข,ช่วง
- บูลีน: ช่องกาเครื่องหมาย, วิทยุ
- ไฟล์และสี: ไฟล์,สี.
ตัวอย่าง:
<input type="email" placeholder="Enter your email"> <input type="date"> <input type="range" min="1" max="10">
ประเภทอินพุตเหล่านี้ช่วยให้เบราว์เซอร์สามารถนำเสนอการควบคุม UI ที่ได้รับการเพิ่มประสิทธิภาพ เช่น ปฏิทินสำหรับวันที่หรือตัวเลือกสี ซึ่งจะช่วยปรับปรุงประสบการณ์ของผู้ใช้และลดข้อผิดพลาดของแบบฟอร์ม
12) แท็กความหมาย HTML5 เช่น - - , และ แตกต่างกันในการใช้งานอย่างไร?
แท็กความหมายถูกนำมาใช้แทนแบบทั่วไป องค์ประกอบและให้ความหมายกับโครงสร้างหน้า
| แท็ก | จุดมุ่งหมาย | ตัวอย่าง |
|---|---|---|
| ส่วนบน มักมีโลโก้/ระบบนำทาง | การนำทางไซต์ | |
| ส่วนล่าง ลิขสิทธิ์ หรือ ลิงค์ | ส่วนท้ายของหน้า | |
| กลุ่มตรรกะping ของเนื้อหาที่เกี่ยวข้อง | ส่วนบล็อก | |
| เนื้อหาอิสระที่สามารถยืนหยัดได้ด้วยตัวเอง | หัวข้อข่าว |
ตัวอย่าง:
<article> <header><h2>Breaking News</h2></header> <p>Details of the story...</p> <footer>Author: John Doe</footer> </article>
การใช้องค์ประกอบเหล่านี้ช่วยปรับปรุง SEO และการเข้าถึง
13) อธิบายความแตกต่างระหว่าง CSS แบบอินไลน์, CSS แบบภายใน และ CSS แบบภายนอก
มีสามวิธีหลักในการใช้ CSS กับ HTML:
- อินไลน์ CSS: นำไปใช้โดยตรงกับองค์ประกอบโดยใช้
styleคุณลักษณะ
ตัวอย่าง:<p style="color:red;">Text</p> - CSS ภายใน: ประกาศภายใน tags in the .
- CSS ภายนอก: เชื่อมโยงผ่าน
.cssไฟล์ที่ใช้ -
| วิธี | ข้อดี | ข้อเสีย |
|---|---|---|
| อินไลน์ | รวดเร็ว เฉพาะเจาะจง | ยากต่อการดูแลรักษา ไม่สามารถนำกลับมาใช้ซ้ำได้ |
| ภายใน | เหมาะสำหรับหน้าเดียว | ไม่สามารถนำกลับมาใช้ซ้ำได้ในหลายหน้า |
| ภายนอก | นำกลับมาใช้ใหม่ได้ สะอาด | ต้องโหลดไฟล์เพิ่มเติม |
แนวทางปฏิบัติที่ดีที่สุดคือการใช้ CSS ภายนอก เพื่อความสามารถในการบำรุงรักษา
14) เอนทิตี HTML คืออะไร และนำมาใช้ทำไม?
เอนทิตี HTML คือโค้ดพิเศษที่ใช้แทนอักขระสงวน สัญลักษณ์ หรืออักขระที่มองไม่เห็นในเอกสาร HTML เอนทิตีเหล่านี้ช่วยให้แน่ใจว่าอักขระอย่าง <, > และ & จะแสดงอย่างถูกต้อง แทนที่จะถูกตีความว่าเป็นโค้ด
ตัวอย่างของเอนทิตีทั่วไป:
- <
- > >
- & &
- © → ©
- → ช่องว่างไม่ตัด
ตัวอย่างเช่น:
<p>Use <strong> instead of <b>.</p>
เอนทิตีมีความสำคัญต่อการรักษาความสามารถในการอ่านโค้ดและป้องกันปัญหาการเรนเดอร์
15) ทำอย่างไร องค์ประกอบต่างๆ มีการทำงานอย่างไร และมีข้อดีข้อเสียอย่างไรบ้าง?
การ แท็กนี้อนุญาตให้ฝังหน้า HTML หนึ่งหน้าลงในอีกหน้าหนึ่ง มักใช้สำหรับการฝังวิดีโอ แผนที่ หรือวิดเจ็ตภายนอก
ข้อดี:
- การบูรณาการเนื้อหาภายนอกได้อย่างง่ายดาย เช่น YouTube or Google แผนที่
- การแยกเนื้อหาออกจากหน้าหลัก
ข้อเสีย:
- ประสิทธิภาพการโหลดช้าลงเนื่องจากมีการร้องขอเพิ่มเติม
- ความเสี่ยงด้านความปลอดภัย (การคลิกแจ็คกิ้ง การโจมตีแบบสคริปต์ข้ามไซต์)
- ไม่เป็นมิตรกับ SEO เสมอไป
ตัวอย่าง:
<iframe src="https://www.example.com" width="600" height="400"></iframe>
ทางเลือกสมัยใหม่มักแนะนำ API หรือวิธีการฝังที่มีการควบคุมและความปลอดภัยที่ดีกว่า
16) เมตาแท็กใน HTML คืออะไร และส่งผลต่อ SEO อย่างไร
เมตาแท็กคือข้อมูลสั้นๆ ที่วางอยู่ภายใน ส่วนหนึ่งของเอกสาร HTML ซึ่งให้ข้อมูลเมตาเกี่ยวกับหน้า แต่จะไม่แสดงให้ผู้ใช้เห็น
ประเภทหลักของเมตาแท็ก:
- Descriptไอออน:
- คำสำคัญ (ไม่สนับสนุนแล้ว):
- ช่องมองภาพ (การออกแบบที่ตอบสนอง):
- อักขระ:
เครื่องมือค้นหาใช้คำอธิบายเมตาเพื่อสร้างข้อความสั้นๆ ในผลการค้นหา ซึ่งส่งผลโดยตรงต่อ อัตราการคลิกผ่าน (CTR).
17) ความแตกต่างระหว่างเส้นทางแบบสัมบูรณ์ แบบสัมพันธ์ และแบบสัมพันธ์กับรากในลิงก์ HTML คืออะไร
ลิงก์สามารถเขียนได้สามวิธีขึ้นอยู่กับการอ้างอิงเส้นทาง
| ประเภท | ตัวอย่าง | ใช้กรณี |
|---|---|---|
| แน่นอน | https://example.com/images/pic.jpg | แหล่งข้อมูลภายนอก |
| ญาติ | รูปภาพ/pic.jpg | ไดเรกทอรีหรือไดเรกทอรีย่อยเดียวกัน |
| ญาติราก | /ทรัพย์สิน/รูปภาพ/pic.jpg | จากรากโดเมน |
เส้นทางสัมบูรณ์รับประกันการดึงทรัพยากร แต่ลดความสามารถในการพกพา เส้นทางสัมพัทธ์ทำให้เนื้อหาเคลื่อนย้ายได้ง่ายขึ้น ในขณะที่เส้นทางสัมพัทธ์รูทช่วยให้มั่นใจได้ถึงความสอดคล้องภายในไซต์ขนาดใหญ่
18) API ของ HTML5 เช่น Geolocation, Web Storage และ Canvas เพิ่มประสิทธิภาพการทำงานหรือไม่?
HTML5 นำเสนอ API ที่ขยายความสามารถของแอปพลิเคชันเว็บโดยไม่ต้องใช้ปลั๊กอิน
- API การระบุตำแหน่งทางภูมิศาสตร์: ดึงข้อมูลตำแหน่งของผู้ใช้ (โดยได้รับอนุญาต)
- API การจัดเก็บข้อมูลบนเว็บ: ให้
localStorageและsessionStorageสำหรับการจัดเก็บข้อมูลคีย์-ค่าสูงสุด 10MB - CanvaAPI ของ s: ช่วยให้สามารถวาดรูปทรง รูปภาพ และแอนิเมชั่นได้โดยตรงบนเว็บเพจ
ตัวอย่าง: การจัดเก็บข้อมูลภายในเครื่อง
localStorage.setItem("user", "John");
alert(localStorage.getItem("user"));
API เหล่านี้ช่วยปรับปรุงการโต้ตอบและประสิทธิภาพในแอปพลิเคชันสมัยใหม่
19) อธิบายข้อดีและข้อเสียของการใช้ องค์ประกอบสำหรับการออกแบบเค้าโครง
ตารางเคยถูกใช้สำหรับเค้าโครงหน้าแต่ปัจจุบันไม่นิยมใช้อีกต่อไป
ข้อดี:
- จัดโครงสร้างให้กับข้อมูลแบบตาราง
- รองรับบนทุกเบราว์เซอร์
ข้อเสีย:
- การเข้าถึงโปรแกรมอ่านหน้าจอจะไม่ดีหากใช้งานผิดวิธี
- ทำให้การแสดงผลหน้าช้าลง
- ยากต่อการบำรุงรักษาเมื่อเทียบกับระบบเค้าโครง CSS เช่น Flexbox และ Grid
ปฏิบัติที่ดีที่สุด: ใช้ โดยเฉพาะสำหรับข้อมูลตาราง (เช่น กำหนดการ การเปรียบเทียบผลิตภัณฑ์) และ CSS สำหรับเค้าโครง
20) สามารถใช้คลาส CSS หลายคลาสกับองค์ประกอบ HTML เดียวได้หรือไม่? ทำอย่างไร?
ใช่ HTML อนุญาตให้ใช้คลาส CSS หลายคลาสกับองค์ประกอบเดียวโดยแยกด้วยช่องว่างใน class คุณลักษณะ เทคนิคนี้ช่วยให้สามารถสร้างรูปแบบโมดูลาร์ที่นำกลับมาใช้ใหม่ได้ และหลีกเลี่ยงการทำซ้ำ
ตัวอย่าง:
<p class="text-bold text-red highlight">Important Notice</p>
ที่นี่ องค์ประกอบสืบทอดสไตล์จากทั้งสามคลาส วิธีนี้รองรับ ความสามารถในการประกอบทำให้การออกแบบปรับขนาดได้มากขึ้นและง่ายต่อการดูแลรักษามากขึ้น
21) ความแตกต่างระหว่าง และ ใน HTML ล่ะ?
ทั้งคู่ และ เป็นภาชนะทั่วไป แต่มีวัตถุประสงค์การใช้งานที่แตกต่างกัน
- เป็นองค์ประกอบระดับบล็อกที่ใช้ในการจัดกลุ่มส่วนเนื้อหาหรือโครงสร้างเค้าโครงที่ใหญ่ขึ้น
- เป็นองค์ประกอบแบบอินไลน์ที่ใช้สำหรับการจัดรูปแบบหรือการจัดกลุ่มping ข้อความสั้นๆ
| คุณสมบัติ (Feature) | ||
|---|---|---|
| แสดง | ระดับบล็อก | อินไลน์ |
| การใช้ | เค้าโครงตู้คอนเทนเนอร์ | การเน้นข้อความ |
| ตัวอย่าง | ห่อping ส่วน | คำพูดที่ใช้แต่ง |
ตัวอย่าง:
<div class="container"> <p>This is a <span class="highlight">highlighted</span> word.</p> </div>
22) ทำอย่างไร งานองค์ประกอบ และใช้ที่ไหน?
การ องค์ประกอบใน HTML5 มอบพื้นผิวการวาดภาพแบบบิตแมปที่ขึ้นอยู่กับความละเอียด ใช้สำหรับการแสดงผลกราฟิก แอนิเมชัน แผนภูมิ และแม้แต่เกมง่ายๆ โดยตรงในเบราว์เซอร์ JavaAPI ของสคริปต์ เช่น getContext("2d") ช่วยให้นักพัฒนาสามารถวาดรูปทรง เส้นทาง รูปภาพ และข้อความได้
ตัวอย่าง:
<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
let c = document.getElementById("myCanvas");
let ctx = c.getContext("2d");
ctx.fillStyle = "blue";
ctx.fillRect(20, 20, 150, 50);
</script>
กรณีการใช้งานได้แก่แดชบอร์ด การแสดงภาพแบบเรียลไทม์ และแอนิเมชั่นแบบโต้ตอบ
23) อธิบายความแตกต่างระหว่าง id และ class คุณสมบัติใน HTML
ทั้งสอง id และ class เป็นคุณสมบัติที่ใช้ในการจัดแต่งทรงและ Javaการกำหนดเป้าหมายสคริปต์ แต่มีความแตกต่างกันในความเฉพาะตัวและการใช้งาน
| คุณลักษณะ | ลักษณะ | ตัวอย่าง |
|---|---|---|
| id | จะต้องไม่ซ้ำกันในเอกสาร ใช้สำหรับองค์ประกอบเดียว | |
| ชั้น | สามารถนำไปใช้กับองค์ประกอบหลายอย่างได้ ช่วยให้จัดกลุ่มได้ping. |
ตัวอย่างการใช้งาน:
<div id="main-header">Welcome</div> <p class="text-highlight">Hello</p>
แนวทางปฏิบัติที่ดีที่สุด: ใช้ id สำหรับตัวระบุเฉพาะและ class สำหรับกลุ่มการจัดแต่งทรงที่สามารถนำกลับมาใช้ซ้ำได้
24) แอตทริบิวต์ data-* ใน HTML5 คืออะไร และมีประโยชน์อย่างไร?
การขอ data-* แอตทริบิวต์ช่วยให้นักพัฒนาสามารถจัดเก็บข้อมูลที่กำหนดเองได้โดยตรงภายในองค์ประกอบ HTML แอตทริบิวต์เหล่านี้มีคำนำหน้าด้วย data- ตามด้วยชื่อ ทำให้เข้าถึงได้ผ่าน Javaต้นฉบับ
ประโยชน์ที่ได้รับ:
- เปิดใช้งานการจัดเก็บข้อมูลเมตาแบบน้ำหนักเบาโดยไม่กระทบต่อ DOM
- มีประโยชน์สำหรับแอปพลิเคชันแบบไดนามิก คำแนะนำเครื่องมือ หรือการประมวลผลด้านไคลเอนต์
ตัวอย่าง:
<button data-user="123" data-role="admin">Edit User</button>
<script>
let btn = document.querySelector("button");
console.log(btn.dataset.user); // 123
</script>
คุณลักษณะนี้ส่งเสริมความยืดหยุ่นในการจัดการสถานะและพฤติกรรมแบบไดนามิก
25) การเข้าถึงข้อมูลใน HTML โดยใช้บทบาทและแอตทริบิวต์ ARIA ได้รับการรับรองอย่างไร
การเข้าถึงได้ใน HTML ช่วยให้มั่นใจได้ว่าแอปพลิเคชันเว็บสามารถใช้งานได้โดยผู้พิการ บทบาทและแอตทริบิวต์ ARIA (Accessible Rich Internet Applications) มอบบริบทเพิ่มเติมให้กับเทคโนโลยีช่วยเหลือ
ตัวอย่างคุณลักษณะ ARIA:
- role=”navigation” – กำหนดเมนูการนำทาง
- aria-label=”ปิด” – ให้ป้ายคำอธิบาย
- aria-hidden=”true” – ซ่อนองค์ประกอบจากโปรแกรมอ่านหน้าจอ
ตัวอย่าง:
<button aria-label="Close window">X</button>
ด้วยการรวม HTML เชิงความหมายกับแอตทริบิวต์ ARIA นักพัฒนาจึงปรับปรุงการรวมและปฏิบัติตามมาตรฐานการเข้าถึง เช่น WCAG
26) ความแตกต่างระหว่างองค์ประกอบ inline, block และ inline-block คืออะไร
องค์ประกอบ HTML จะถูกแบ่งหมวดหมู่ตามลักษณะการแสดงผล
| ประเภท | ลักษณะ | ตัวอย่าง |
|---|---|---|
| อินไลน์ | อย่าเริ่มบรรทัดใหม่ แต่ให้กว้างเท่ากับเนื้อหา | - |
| ปิดกั้น | ครอบคลุมความกว้างทั้งหมดโดยเริ่มจากบรรทัดใหม่ | - |
| อินไลน์บล็อค | มีลักษณะเหมือนอินไลน์แต่จะอนุญาตให้ใช้คุณสมบัติแบบบล็อก (ความสูง ความกว้าง) | , สไตล์ |
ตัวอย่าง:
<span>Inline</span> <div>Block</div> <span style="display:inline-block; width:100px;">Inline-block</span>
27) คุณจะเพิ่มประสิทธิภาพรูปภาพใน HTML เพื่อประสิทธิภาพที่ดีขึ้นได้อย่างไร
การปรับแต่งรูปภาพจะช่วยลดเวลาในการโหลดหน้าเว็บและปรับปรุง SEO กลยุทธ์ประกอบด้วย:
- การใช้รูปแบบที่ทันสมัยเช่น WebP or เอวิฟ.
- การใช้ภาพตอบสนองด้วย และ
srcset. - การตั้งค่าคุณลักษณะความกว้างและความสูงเพื่อหลีกเลี่ยงการเปลี่ยนแปลงเค้าโครง
- การบีบอัดรูปภาพก่อนอัพโหลด
- การโหลดแบบ Lazy โดยใช้
loading="lazy".
ตัวอย่าง:
<img src="image.webp" alt="Optimized Image" loading="lazy">
รูปภาพที่ได้รับการปรับให้เหมาะสมอย่างดีจะช่วยเพิ่มประสบการณ์ของผู้ใช้และปรับปรุงคะแนน Core Web Vitals
28) วงจรชีวิตของหน้า HTML ในเบราว์เซอร์คืออะไร
วงจรชีวิตของหน้า HTML มีหลายขั้นตอนดังนี้:
- การแยกวิเคราะห์: เบราว์เซอร์อ่าน HTML และสร้าง Document Object Model (DOM)
- การโหลดทรัพยากร: ดึง CSS, JS และรูปภาพที่เชื่อมโยงมา
- การแสดงผล: เบราว์เซอร์ใช้รูปแบบและเค้าโครงองค์ประกอบ
- การเขียนสคริปต์: Javaสคริปต์จะดำเนินการและจัดการ DOM หากจำเป็น
- ปฏิสัมพันธ์: เหตุการณ์ต่างๆ เช่น การคลิกและการเลื่อนจะได้รับการประมวลผล
การทำความเข้าใจวงจรชีวิตนี้ช่วยให้นักพัฒนาเพิ่มประสิทธิภาพ ความเร็วในการเรนเดอร์ลดการบล็อกสคริปต์ให้เหลือน้อยที่สุด และให้แน่ใจว่าหน้าโหลดอย่างมีประสิทธิภาพ
29) การใช้ HTML แบบซีแมนติกมีข้อดีและข้อเสียอะไรบ้าง?
HTML แบบความหมายช่วยปรับปรุงความหมายและการเข้าถึงของหน้าเว็บแต่ก็มีข้อควรพิจารณาเช่นกัน
| ข้อดี | ข้อเสีย |
|---|---|
| ปรับปรุงการเข้าถึงสำหรับโปรแกรมอ่านหน้าจอ | จำเป็นต้องเรียนรู้แท็กใหม่ |
| เพิ่มประสิทธิภาพ SEO ด้วยการชี้แจงโครงสร้าง | อาจเพิ่มเวลาการพัฒนาเบื้องต้น |
| อ่านโค้ดได้ง่ายขึ้นและบำรุงรักษาได้ง่ายขึ้น | เบราว์เซอร์รุ่นเก่าอาจมีการรองรับที่จำกัด |
โดยรวมแล้ว ข้อดีมีมากกว่าข้อเสีย ทำให้ HTML แบบความหมายเป็นแนวทางปฏิบัติที่ดีที่สุดในการพัฒนาสมัยใหม่
30) เป็นยังไงบ้าง องค์ประกอบที่ใช้สำหรับรูปภาพที่ตอบสนอง?
การ องค์ประกอบนี้ช่วยให้นักพัฒนาสามารถจัดเตรียมแหล่งภาพหลายแหล่งสำหรับอุปกรณ์หรือความละเอียดหน้าจอที่แตกต่างกันได้ โดยใช้วิธีการซ้อนกัน องค์ประกอบที่มีคุณลักษณะเช่น media และ type.
ตัวอย่าง:
<picture> <source srcset="image-large.webp" media="(min-width: 800px)"> <source srcset="image-small.webp" media="(max-width: 799px)"> <img src="fallback.jpg" alt="Responsive Image"> </picture>
ซึ่งจะทำให้มั่นใจได้ว่าอุปกรณ์พกพาจะโหลดภาพขนาดเล็กลง ในขณะที่เดสก์ท็อปจะได้รับภาพความละเอียดสูง ซึ่งช่วยปรับปรุง ประสิทธิภาพและการตอบสนอง.
31) มีวิธีการฝังเสียงใน HTML5 อย่างไรบ้าง?
HTML5 นำเสนอ องค์ประกอบนี้ช่วยลดความจำเป็นในการใช้ปลั๊กอินภายนอก รองรับหลายรูปแบบ เช่น MP3รองรับไฟล์เสียง OGG และ WAV เพื่อให้ใช้งานได้กับทุกเบราว์เซอร์ นักพัฒนาสามารถระบุแหล่งที่มาหลายแหล่งได้ภายในไฟล์ องค์ประกอบนี้อนุญาตให้เบราว์เซอร์เลือกรูปแบบที่รองรับรูปแบบแรกได้
ตัวอย่าง:
<audio controls> <source src="sound.mp3" type="audio/mpeg"> <source src="sound.ogg" type="audio/ogg"> Your browser does not support the audio element. </audio>
ข้อดีได้แก่ การควบคุมแบบเนทีฟ การเล่นอัตโนมัติ และอื่นๆpingและสามารถเข้าถึงได้ด้วยคำบรรยายผ่านทางtracเค>.
32) ทำอย่างไร งานแท็กและมีข้อดีอะไรบ้าง?
การ องค์ประกอบนี้อนุญาตให้ฝังวิดีโอโดยไม่ต้องใช้โปรแกรมเล่นจากบุคคลที่สาม รูปแบบที่รองรับ ได้แก่ MP4 (H.264), WebM และ Ogg นักพัฒนาสามารถเพิ่มแหล่งที่มาและแอตทริบิวต์ได้หลายรายการ เช่น controls, autoplay, loopและ poster.
ตัวอย่าง:
<video controls width="600" poster="thumbnail.jpg"> <source src="movie.mp4" type="video/mp4"> <source src="movie.webm" type="video/webm"> Your browser does not support the video tag. </video>
ข้อดี:
- ยกเลิกการพึ่งพา Flash
- ให้การเข้าถึงในตัวพร้อมคำบรรยาย
- มอบประสิทธิภาพและความปลอดภัยที่ดีกว่า
33) ข้อดีและข้อเสียของการใช้แบบฟอร์ม HTML มีอะไรบ้าง?
แบบฟอร์มมีความจำเป็นสำหรับการป้อนข้อมูลของผู้ใช้แต่ก็มีจุดแข็งและจุดอ่อนเช่นกัน
| ข้อดี | ข้อเสีย |
|---|---|
| มาตรฐาน รองรับบนทุกเบราว์เซอร์ | เสี่ยงต่อความเสี่ยงด้านความปลอดภัย (เช่น XSS, CSRF) |
| การบูรณาการกับเซิร์ฟเวอร์แบ็กเอนด์ได้อย่างง่ายดาย | แบบฟอร์มที่ได้รับการออกแบบไม่ดีจะทำให้การใช้งานลดลง |
| รองรับการตรวจสอบและประเภทอินพุตหลายประเภท | ต้องใช้ HTTPS เพื่อการจัดการข้อมูลที่ปลอดภัย |
แนวทางปฏิบัติที่ดีที่สุด: ใช้แท็กแบบฟอร์มความหมาย การตรวจสอบฝั่งไคลเอนต์และเซิร์ฟเวอร์ และวิธีการส่งข้อมูลที่ปลอดภัย
34) การตรวจสอบแบบฟอร์มฝั่งไคลเอนต์แตกต่างจากการตรวจสอบฝั่งเซิร์ฟเวอร์อย่างไร
การตรวจสอบฝั่งไคลเอนต์ ดำเนินการในเบราว์เซอร์โดยใช้แอตทริบิวต์ HTML5 ( required, pattern ) หรือ Javaสคริปต์ ให้ผลตอบรับทันทีแต่สามารถข้ามได้
การตรวจสอบด้านเซิร์ฟเวอร์ เกิดขึ้นหลังจากข้อมูลถูกส่งไปยังเซิร์ฟเวอร์ เพื่อให้แน่ใจว่ามีความปลอดภัยและถูกต้อง
| แง่มุม | ด้านลูกค้า | ฝั่งเซิร์ฟเวอร์ |
|---|---|---|
| ความเร็ว | ข้อเสนอแนะทันที | ช้าลงหลังจากส่ง |
| ความปลอดภัย | สามารถข้ามได้ | ปลอดภัยมากขึ้น |
| ตัวอย่าง | การตรวจสอบ PHP, Node.js |
แนวทางปฏิบัติที่ดีที่สุดคือการรวมทั้งสองวิธีเข้าด้วยกันเพื่อให้ใช้งานได้ดีที่สุดและปลอดภัยที่สุด
35) จุดประสงค์ของการดำเนินการคืออะไร viewport เมตาแท็กในการออกแบบแบบตอบสนอง?
การขอ viewport เมตาแท็กช่วยให้มั่นใจว่าหน้าเว็บแสดงผลอย่างถูกต้องบนอุปกรณ์เคลื่อนที่ โดยค่าเริ่มต้น เบราว์เซอร์บนมือถือหลายตัวจะปรับขนาดหน้าเว็บเดสก์ท็อปลง แท็กช่องมองภาพช่วยให้สามารถควบคุมการปรับขนาดและความกว้างได้
ตัวอย่าง:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
ประโยชน์ที่ได้รับ:
- รับประกันเค้าโครงที่ตอบสนอง
- ป้องกันปัญหาการซูม
- ปรับปรุง Core Web Vitals และการใช้งานบนหน้าจอขนาดเล็ก
หากไม่มีสิ่งนี้ เว็บไซต์อาจดูเล็กและไม่สามารถใช้งานได้บนอุปกรณ์เคลื่อนที่
36) ทำอย่างไร และ องค์ประกอบต่างๆ ช่วยปรับปรุงแอปพลิเคชัน HTML5 อย่างไร?
- ให้วิธีการดั้งเดิมในการสร้างป๊อปอัปแบบโมดอล สามารถเปิดหรือปิดได้ผ่าน Javaสคริปต์ ( show() และ close() ).
- กำหนดส่วน HTML ที่นำมาใช้ซ้ำได้ซึ่งจะไม่แสดงผลจนกว่าจะเปิดใช้งานโดย Javaต้นฉบับ
ตัวอย่าง:
<dialog id="myDialog">Hello!</dialog> <template id="card"> <div class="card">Reusable content</div> </template>
ประโยชน์ที่ได้รับ:
- ลบการพึ่งพาไลบรารีโมดอลภายนอก
- ช่วยให้สามารถเรนเดอร์แบบไดนามิกได้โดยไม่รบกวน DOM
37) อธิบายความแตกต่างระหว่าง , , and .
สคริปต์อาจบล็อกการแสดงผลหน้าได้หากไม่ได้รับการจัดการอย่างถูกต้อง
| คุณลักษณะ | พฤติกรรม | ใช้กรณี |
|---|---|---|
| บล็อกการแยกวิเคราะห์ HTML จนกว่าการดำเนินการจะเสร็จสิ้น | สคริปต์อินไลน์ขนาดเล็ก | |
| โหลดแบบอะซิงโครนัส ดำเนินการทันทีเมื่อพร้อม | การวิเคราะห์ โฆษณา | |
| โหลดแบบอะซิงโครนัส ดำเนินการหลังจากการวิเคราะห์ HTML | สคริปต์ที่ขึ้นอยู่กับ DOM |
ตัวอย่าง:
<script src="main.js" defer></script>
การใช้ async และ defer ปรับปรุงประสิทธิภาพและป้องกันปัญหาการบล็อกการเรนเดอร์
38) คุณจะมั่นใจได้อย่างไรว่าการจัดการแบบฟอร์มใน HTML ปลอดภัย?
การรักษาความปลอดภัยแบบฟอร์มต้องใช้ทั้งแนวทาง HTML และการป้องกันแบ็กเอนด์
แนวทางปฏิบัติหลัก ได้แก่ :
- ใช้ HTTPS เสมอสำหรับการส่งข้อมูล
- ตรวจสอบอินพุตทั้งฝั่งไคลเอนต์และฝั่งเซิร์ฟเวอร์
- ใช้
autocomplete="off"แอตทริบิวต์สำหรับฟิลด์ที่ละเอียดอ่อนเช่นรหัสผ่าน - สมัครสมาชิก
rel="noopener noreferrer"เกี่ยวกับการดำเนินการแบบฟอร์มภายนอก - ป้องกันการปลอมแปลงคำขอข้ามไซต์ (CSRF) ด้วยโทเค็น
ตัวอย่าง:
<form method="post" action="/th/secure" autocomplete="off"> <input type="password" name="pwd" required> </form>
แบบฟอร์มที่ปลอดภัยช่วยป้องกันการรั่วไหลของข้อมูลและช่องโหว่ทั่วไป
39) ความแตกต่างระหว่างคุกกี้ localStorage และ sessionStorage ใน HTML5 คืออะไร
HTML5 แนะนำ Web Storage เป็นทางเลือกแทนคุกกี้
| ประเภทพื้นที่เก็บข้อมูล | ความจุ | ตลอดชีวิต | ส่งด้วย HTTP หรือไม่? |
|---|---|---|---|
| คุกกี้ | ~4กิโลไบต์ | จนถึงวันหมดอายุ | มี (ใบกำกับภาษีเต็มรูปแบบ) |
| ที่จัดเก็บในเครื่อง | ~5–10MB | คงอยู่จนกว่าจะเคลียร์ | ไม่ |
| พื้นที่เก็บข้อมูลเซสชัน | ~5MB | จนกว่าจะปิดเบราว์เซอร์/แท็บ | ไม่ |
ตัวอย่าง:
localStorage.setItem("theme", "dark");
console.log(localStorage.getItem("theme"));
Web Storage ช่วยปรับปรุงประสิทธิภาพเนื่องจากข้อมูลจะไม่ถูกส่งไปพร้อมกับคำขอ HTTP ทุกครั้ง
40) HTML จัดการการเข้าถึงรูปภาพ แบบฟอร์ม และมัลติมีเดียอย่างไร
การเข้าถึงได้ช่วยให้เกิดการรวมเอาผู้ใช้ที่มีความพิการเข้าไว้ด้วยกัน
- รูปภาพ: ใช้
altคุณสมบัติสำหรับโปรแกรมอ่านหน้าจอ - รูปแบบ: เพิ่ม ลิงค์ด้วย
forคุณลักษณะในการอธิบายอินพุต - มัลติมีเดีย: จัดทำคำบรรยายภาพ (track> สำหรับวิดีโอ) และบทถอดเสียง
ตัวอย่าง:
<img src="logo.png" alt="Company Logo"> <label for="email">Email</label> <input type="email" id="email">
การปฏิบัติตามมาตรฐานการเข้าถึง (WCAG, ARIA) ทำให้แอปพลิเคชันเว็บสามารถใช้งานได้มากขึ้นและเป็นไปตามกฎหมาย
41) ประโยชน์ของการใช้คืออะไรtrack> องค์ประกอบที่มีมัลติมีเดีย?
ดิtracองค์ประกอบ k> ถูกใช้ภายใน หรือ เพื่อระบุข้อความ tracเช่น คำบรรยาย คำบรรทม หรือคำอธิบาย ซึ่งช่วยเพิ่มการเข้าถึงและความสะดวกในการใช้งาน
ประโยชน์ที่ได้รับ:
- ช่วยเหลือผู้ใช้ที่มีความบกพร่องทางการได้ยิน
- เพิ่มประสิทธิภาพ SEO เนื่องจากสามารถรวบรวมข้อความได้
- ปรับปรุงประสบการณ์ผู้ใช้ในสภาพแวดล้อมที่มีเสียงดัง
ตัวอย่าง:
<video controls> <source src="movie.mp4" type="video/mp4"> <track src="captions.vtt" kind="subtitles" srclang="en" label="English"> </video>
ซึ่งช่วยให้เนื้อหามัลติมีเดียเข้าถึงผู้คนได้มากขึ้น
42) วิธีการ contenteditable คุณสมบัติทำงานใน HTML หรือไม่?
การขอ contenteditable คุณลักษณะช่วยให้ผู้ใช้สามารถแก้ไขเนื้อหาขององค์ประกอบโดยตรงในเบราว์เซอร์โดยไม่ต้องใช้เครื่องมือภายนอก
ตัวอย่าง:
<p contenteditable="true">This paragraph is editable.</p>
ใช้กรณี:
- ตัวแก้ไขในเบราว์เซอร์
- แอปพลิเคชันสำหรับการจดบันทึกหรือประเภท CMS
- ต้นแบบping คุณสมบัติเชิงโต้ตอบ
แม้ว่าจะมีประโยชน์ แต่จะต้องจัดการด้วยความระมัดระวัง เนื่องจากการแก้ไขโดยไม่ได้รับการควบคุมอาจทำให้เกิดความเสี่ยงด้านความปลอดภัยเมื่อส่งข้อมูลไปยังเซิร์ฟเวอร์
43) ความแตกต่างระหว่างการปรับปรุงแบบก้าวหน้าและการลดระดับอย่างสง่างามในการออกแบบ HTML คืออะไร
นี่คือสองแนวทางในการจัดการความสามารถของเบราว์เซอร์ที่แตกต่างกัน
| เข้าใกล้ | แนวคิด | ตัวอย่าง |
|---|---|---|
| การเพิ่มประสิทธิภาพแบบก้าวหน้า | เริ่มต้นด้วย HTML ขั้นพื้นฐานและเพิ่มคุณลักษณะขั้นสูงสำหรับเบราว์เซอร์ที่มีความสามารถ | แบบฟอร์มทำงานกับ HTML พื้นฐาน แต่ใช้ Javaการตรวจสอบสคริปต์หากมี |
| การย่อยสลายอย่างสง่างาม | สร้างฟีเจอร์ขั้นสูงก่อนแล้วจึงตรวจสอบให้แน่ใจว่ามีการสำรองข้อมูลสำหรับเบราว์เซอร์รุ่นเก่า | แผนภูมิแบบแคนวาสจะกลับไปเป็นภาพนิ่ง |
การปรับปรุงแบบก้าวหน้าเป็นกลยุทธ์ที่ต้องการในปัจจุบัน เนื่องจากรับประกันการเข้าถึงอย่างทั่วถึง
44) Microdata ใน HTML5 คืออะไร และมีประโยชน์ต่อ SEO อย่างไร
ไมโครดาต้าเป็นวิธีการฝังข้อมูลที่มีโครงสร้างลงในองค์ประกอบ HTML โดยใช้แอตทริบิวต์ เช่น itemscope, itemtypeและ itempropเครื่องมือค้นหาใช้สิ่งนี้เพื่อแสดงตัวอย่างข้อมูลที่หลากหลายในผลลัพธ์
ตัวอย่าง:
<div itemscope itemtype="https://schema.org/Book"> <span itemprop="name">HTML Mastery</span> by <span itemprop="author">Jane Doe</span> </div>
ประโยชน์ที่ได้รับ:
- เพิ่มการมองเห็นด้วยข้อมูลสั้นๆ ที่มีประโยชน์
- ให้บริบทแก่เครื่องมือค้นหา
- ปรับปรุง CTR ในผลการค้นหา
45) ข้อดีและข้อเสียของการใช้เฟรมอินไลน์คืออะไร ( -
เราสัมผัสถึง ก่อนหน้านี้ แต่มาสรุปข้อดีและข้อเสียกันดีกว่า
| ข้อดี | ข้อเสีย |
|---|---|
| การบูรณาการเนื้อหาของบุคคลที่สามได้อย่างง่ายดาย | ทำให้ประสิทธิภาพของหน้าลดลง |
| แยกทรัพยากรภายนอกออกจากกัน | เสี่ยงต่อการถูกคลิกแจ็ค |
| มีประโยชน์สำหรับการฝังแผนที่ วิดีโอ | ไม่เป็นมิตรกับ SEO เนื้อหามักถูกละเลย |
แนวทางปฏิบัติที่ดีที่สุดคือการใช้ อย่างประหยัดและเลือกใช้ API หรือเอ็มเบดที่อนุญาตให้ปรับแต่งและบูรณาการอย่างปลอดภัย
46) คุณใช้อย่างไร และ องค์ประกอบใน HTML5 มีอะไรบ้าง?
องค์ประกอบเหล่านี้สร้างส่วนเนื้อหาที่สามารถยุบได้โดยไม่ต้อง Javaต้นฉบับ
ตัวอย่าง:
<details> <summary>Click for more details</summary> <p>This text is revealed when expanded.</p> </details>
ประโยชน์ที่ได้รับ:
- ปรับปรุงการโต้ตอบของผู้ใช้
- เพิ่มการเข้าถึง (ใช้งานได้กับแป้นพิมพ์และโปรแกรมอ่านหน้าจอ)
- หลีกเลี่ยงการพึ่งพาประเพณี Javaโซลูชันสคริปต์
สิ่งนี้มีประโยชน์อย่างยิ่งสำหรับคำถามที่พบบ่อยหรืออินเทอร์เฟซการเปิดเผยข้อมูลแบบก้าวหน้า
47) ความแตกต่างที่สำคัญระหว่าง HTML และ XHTML คืออะไร
HTML และ XHTML (Extensible HTML) เป็นภาษาการมาร์กอัป แต่ XHTML ปฏิบัติตามกฎ XML ที่เข้มงวดกว่า
| คุณสมบัติ (Feature) | HTML | XHTML |
|---|---|---|
| วากยสัมพันธ์ | เรามีความยืดหยุ่น | เคร่งครัดและสอดคล้องกับ XML |
| การปิดแท็ก | สามารถเลือกหรือไม่เลือกก็ได้ | จำเป็น |
| ความไวของตัวพิมพ์ | ไม่คำนึงถึงตัวพิมพ์ใหญ่-เล็ก | ต้องเป็นตัวพิมพ์เล็ก |
| การจัดการข้อผิดพลาด | เบราว์เซอร์ให้อภัย | ข้อผิดพลาดในการแยกวิเคราะห์ทำให้การเรนเดอร์เสียหาย |
ตัวอย่าง: ถูกต้องใน HTML แต่จะต้อง ใน XHTML ปัจจุบัน HTML5 ได้เข้ามาแทนที่ XHTML เป็นอย่างมากเนื่องจากความยืดหยุ่นของมัน
48) Doctypes หลายประเภทใน HTML มีอะไรบ้าง และเหตุใดจึงมีความสำคัญ?
Doctype จะบอกเบราว์เซอร์ว่าควรใช้ HTML เวอร์ชันใด
ประเภท:
- HTML5: (เรียบง่าย ทันสมัย)
- HTML 4.01 Strict/Transitional/Frameset
- XHTML 1.0 Strict/Transitional/Frameset
การใช้ Doctype ที่ถูกต้องช่วยให้การแสดงผลมีความสอดคล้องกันในทุกเบราว์เซอร์ ปัจจุบัน Doctype ของ HTML5 ถือเป็นมาตรฐานแล้ว
49) คุณจะปรับปรุง SEO ด้วยแท็ก HTML เช่น , <meta> และ <h1>?
SEO ต้องอาศัยโครงสร้างความหมายที่ถูกต้อง
- - กำหนดชื่อหน้าซึ่งมีความสำคัญต่อการจัดอันดับ
- - ให้ข้อมูลสั้นๆ สำหรับเครื่องมือค้นหา
- หัวข้อ ( - - จัดระเบียบลำดับชั้นของเนื้อหา
- คุณสมบัติ alt บนรูปภาพ: ปรับปรุงการมองเห็นการค้นหารูปภาพ
- มาร์กอัปสคีมา: ให้ข้อมูลที่มีโครงสร้าง
ตัวอย่าง:
<title>HTML Interview Questions</title> <meta name="description" content="Comprehensive HTML interview guide with answers."> <h1>Top HTML Questions</h1>
50) ความแตกต่างระหว่าง และ ใน HTML ล่ะ?
แม้ว่าทั้งสองจะใช้ href คุณลักษณะแต่วัตถุประสงค์ก็ต่างกัน
| แท็ก | จุดมุ่งหมาย | ตัวอย่าง |
|---|---|---|
| สร้างไฮเปอร์ลิงก์เพื่อนำทางระหว่างหน้าต่างๆ | คลิกที่นี่ | |
| กำหนดความสัมพันธ์กับทรัพยากรภายนอกเช่น CSS หรือไอคอน |
การ องค์ประกอบจะไม่ปรากฏในเนื้อหาของหน้า แต่ จะสร้างข้อความหรือรูปภาพที่สามารถคลิกได้
🔍 คำถามสัมภาษณ์ HTML ยอดนิยมพร้อมสถานการณ์จริงและคำตอบเชิงกลยุทธ์
1) ความแตกต่างระหว่างองค์ประกอบ HTML แบบความหมายและไม่ใช่ความหมายคืออะไร และเหตุใดจึงสำคัญ?
สิ่งที่ผู้สัมภาษณ์กำลังมองหา: ความเข้าใจด้านความหมาย การเข้าถึง SEO และการบำรุงรักษา
ตัวอย่างคำตอบ:
“องค์ประกอบทางความหมายเช่น - - , และ ถ่ายทอดความหมายและโครงสร้างให้กับทั้งเบราว์เซอร์และเทคโนโลยีช่วยเหลือ สิ่งเหล่านี้ช่วยปรับปรุงการเข้าถึงผ่านการนำทางสถานที่สำคัญที่ดีขึ้น ช่วยให้เครื่องมือค้นหาเข้าใจลำดับชั้นของเนื้อหา และทำให้โค้ดสามารถบำรุงรักษาได้ง่ายขึ้น องค์ประกอบที่ไม่เกี่ยวกับความหมาย เช่น และ ไม่มีความหมายโดยเนื้อแท้ และควรสงวนไว้สำหรับกรณีที่ไม่มีองค์ประกอบเชิงความหมายที่เหมาะสม ผมให้ความสำคัญกับองค์ประกอบเชิงความหมายก่อน จากนั้นจึงเพิ่มคลาสหรือแอตทริบิวต์ ARIA เฉพาะเมื่อจำเป็นเท่านั้น
2) คุณจะสร้างแบบฟอร์มที่ซับซ้อนให้เข้าถึงได้และเป็นมิตรต่อผู้ใช้โดยใช้ HTML ธรรมดาได้อย่างไร
สิ่งที่ผู้สัมภาษณ์กำลังมองหา: ความเชี่ยวชาญในการควบคุมรูปแบบดั้งเดิม ป้ายกำกับ ข้อจำกัด และคุณลักษณะการเข้าถึง
ตัวอย่างคำตอบ:
“ฉันเริ่มต้นด้วย การเชื่อมโยงที่เหมาะสม ใช้สิ่งที่เหมาะสม type คุณสมบัติเช่น email, telและ dateและเพิ่ม required, minและ pattern เพื่อการตรวจสอบข้อจำกัด ฉันจัดกลุ่มฟิลด์ที่เกี่ยวข้องด้วย และ . ฉันใช้ aria-describedby เพื่อเชื่อมโยงอินพุตกับข้อความช่วยเหลือและข้อความแสดงข้อผิดพลาด ให้ข้อมูลที่ชัดเจน placeholder ข้อความโดยไม่ต้องเปลี่ยนป้ายกำกับ และเปิดใช้งาน autocomplete โทเค็นเช่น given-name และ address-line1ฉันอาศัยการส่งข้อความตรวจสอบแบบเนทีฟ แต่จะเสริมด้วยสรุปข้อผิดพลาดที่เข้าถึงได้ซึ่งเน้นไปที่ฟิลด์ที่ไม่ถูกต้องแรก
3) อธิบายว่าคุณจะส่งมอบรูปภาพที่ตอบสนองด้วยประสิทธิภาพที่เหมาะสมที่สุดได้อย่างไร
สิ่งที่ผู้สัมภาษณ์กำลังมองหา: การใช้ในทางปฏิบัติ - sizes, และ -
ตัวอย่างคำตอบ:
“ฉันใช้ กับ srcset เพื่อให้มีความละเอียดหลายระดับและ sizes แอตทริบิวต์ที่สะท้อนความกว้างที่แสดงผลจริงของเค้าโครง สำหรับทิศทางศิลป์ ฉันห่อรูปภาพใน ด้วยสื่อที่มีเงื่อนไข องค์ประกอบต่างๆ ฉันมักจะรวมเอาสิ่งที่เป็นเนื้อแท้ width และ height เพื่อจองพื้นที่และลดการเลื่อนผังและผมพิจารณา loading="lazy" สำหรับภาพแบบครึ่งหน้าล่าง เมื่อเหมาะสม ฉันจะนำเสนอรูปแบบที่ทันสมัย เช่น AVIF หรือ WebP พร้อมตัวเลือกสำรอง
4) หน้าเพจเดิมใช้ตารางเป็นเค้าโครงและไม่สามารถเข้าถึงได้ คุณจะรีแฟกเตอร์มันอย่างไร
สิ่งที่ผู้สัมภาษณ์กำลังมองหา: กลยุทธ์การย้ายถิ่นฐาน การจัดการความเสี่ยง และการทดสอบ
ตัวอย่างคำตอบ (ใช้คำที่จำเป็น #1):
“ในบทบาทก่อนหน้านี้ ฉันได้เปลี่ยนโครงสร้างแบบตารางเป็นคอนเทนเนอร์เชิงความหมาย เช่น , , และใช้ CSS Grid สำหรับการจัดวางเลย์เอาต์ ฉันย้ายข้อมูลเป็นส่วนๆ เพื่อลดความเสี่ยง และสร้างแผนที่ping ฉันได้แบ่งแต่ละส่วนของตารางออกเป็นส่วนต่างๆ ตามความหมาย และตรวจสอบความถูกต้องด้วยตัวตรวจสอบ HTML และ aXe ฉันได้เพิ่มระดับหัวข้อ จุดสังเกต และลำดับการโฟกัสของแป้นพิมพ์ที่เหมาะสม ฉันได้ตรวจสอบความสอดคล้องด้วยการทดสอบการถดถอยทางภาพ และปรับปรุงประสิทธิภาพโดยการลบภาพคั่นและแอตทริบิวต์ที่เลิกใช้แล้ว”
5) ทำอย่างไร defer และ async บน differ, and why should HTML authors care?
สิ่งที่ผู้สัมภาษณ์กำลังมองหา: ความเข้าใจเกี่ยวกับพฤติกรรมการเรนเดอร์และการบล็อค
ตัวอย่างคำตอบ:
"async ดาวน์โหลดและดำเนินการสคริปต์ทันทีที่มีพร้อมใช้งาน ซึ่งอาจทำให้ดำเนินการไม่เป็นไปตามลำดับ defer ดาวน์โหลดระหว่างการแยกวิเคราะห์ แต่รับประกันการดำเนินการหลังจากแยกวิเคราะห์ HTML ตามลำดับ ผู้เขียน HTML ควรระมัดระวัง เนื่องจากสคริปต์ที่บล็อกจะทำให้การแสดงผลครั้งแรกล่าช้า ฉันใช้ค่าเริ่มต้น defer สำหรับสคริปต์เพจที่ขึ้นอยู่กับความพร้อมและการสำรองของ DOM async สำหรับสคริปต์อิสระเช่นการวิเคราะห์”
6) อธิบายครั้งที่คุณสร้างสมดุลคำขอการออกแบบที่สมบูรณ์แบบแบบพิกเซลด้วย HTML ที่เข้าใจง่ายและเข้าถึงได้
สิ่งที่ผู้สัมภาษณ์กำลังมองหา: ความร่วมมือ การสื่อสาร และการแลกเปลี่ยนตามหลักการ
ตัวอย่างคำตอบ (ใช้คำที่จำเป็น #2):
ในตำแหน่งก่อนหน้านี้ การออกแบบเรียกร้องให้มี wrapper ตกแต่งแบบซ้อนกัน ซึ่งส่งเสริมการมาร์กอัปแบบไม่มีความหมาย ผมได้เสนอโครงสร้างแบบมีความหมายก่อน จากนั้นจึงได้ผลลัพธ์ทางภาพด้วย CSS แทนที่จะใช้ CSS เพิ่มเติม องค์ประกอบต่างๆ ผมได้สาธิตการปรับปรุงการนำทางของโปรแกรมอ่านหน้าจอและบันทึก API ของส่วนประกอบที่ตกลงกันไว้ ข้อตกลงนี้ยังคงรักษารูปลักษณ์ที่ต้องการไว้ ขณะเดียวกันก็รักษาการเข้าถึงและการบำรุงรักษาไว้ได้
7) คุณพบการเปลี่ยนแปลงเลย์เอาต์สะสมเนื่องจากรูปภาพและ iframe ที่ไม่มีมิติ แผนของคุณคืออะไร?
สิ่งที่ผู้สัมภาษณ์กำลังมองหา: แนวทางแก้ปัญหาเชิงปฏิบัติเพื่อแก้ไขปัญหาประสิทธิภาพที่แท้จริง
ตัวอย่างคำตอบ (ใช้คำที่จำเป็น #3):
“ในงานเก่าของฉัน ฉันตรวจสอบทั้งหมด และ องค์ประกอบและองค์ประกอบเพิ่มเติม width และ height คุณสมบัติที่ตรงกับอัตราส่วนภาพต้นฉบับ ฉันใช้ CSS max-width: 100% เพื่อปรับขนาดอย่างตอบสนอง และเมื่อเกี่ยวข้องกับเนื้อหาแบบไดนามิก ฉันได้ใช้ CSS aspect-ratio ตัวแทนทรัพย์สินหรือคอนเทนเนอร์ ผมได้ตรวจสอบการปรับปรุงในแผงประสิทธิภาพและ Lighthouse แล้ว ซึ่งยืนยันว่าการเปลี่ยนแปลงเค้าโครงลดลง
8) แนวทางปฏิบัติดีที่สุดสำหรับการเขียนตาราง HTML ที่สามารถเข้าถึงได้คืออะไร
สิ่งที่ผู้สัมภาษณ์กำลังมองหา: การมาร์กอัปโครงสร้างที่ถูกต้องและการสนับสนุนด้านเทคนิคที่ช่วยเหลือ
ตัวอย่างคำตอบ:
“ฉันใช้ สำหรับชื่อเรื่องที่กระชับ - , และ สำหรับโครงสร้างและ เพื่อกำหนดส่วนหัว สำหรับตารางที่ซับซ้อนที่มีส่วนหัวหลายระดับ ฉันใช้ headers และ id แอตทริบิวต์สำหรับแมปเซลล์ ผมหลีกเลี่ยงการใช้ตารางเพื่อจัดวาง มั่นใจว่าข้อความมีความคมชัดเพียงพอสำหรับเนื้อหาภายในเซลล์ และให้ข้อมูลสรุปนอกตารางเพื่อใช้เป็นบริบทหากจำเป็น
9) คุณจัดการกับกำหนดเวลาที่กระชั้นชิดอย่างไรเมื่อเอกสาร HTML หลายรายการแข่งขันกันเพื่อดึงดูดความสนใจ?
สิ่งที่ผู้สัมภาษณ์กำลังมองหา: การกำหนดลำดับความสำคัญ การสื่อสาร และคุณภาพภายใต้แรงกดดัน
ตัวอย่างคำตอบ (ใช้คำที่จำเป็น #4):
ในบทบาทหน้าที่ล่าสุด ฉันได้แบ่งงานตามผลกระทบต่อผู้ใช้และลำดับการพึ่งพา ฉันส่งมอบหน้าเว็บที่มีผลกระทบสูงสุดและมีความเสี่ยงต่ำสุดก่อน สื่อสารข้อแลกเปลี่ยนให้ผู้มีส่วนได้ส่วนเสียทราบ และกำหนดนิยามของคำว่า “เสร็จสิ้น” ซึ่งรวมถึงการตรวจสอบความถูกต้อง การตรวจสอบการเข้าถึง และงบประมาณประสิทธิภาพพื้นฐาน ฉันได้บันทึกการปรับปรุงที่เลื่อนออกไปและกำหนดเวลาการแก้ไขเพื่อติดตามผล เพื่อให้มั่นใจว่าคุณภาพจะไม่ถดถอย
10) ไซต์การตลาดแบบหน้าเดียวจะต้องเป็นมิตรกับ SEO โดยไม่ต้อง Javaการพึ่งพาสคริปต์ คุณใช้กลยุทธ์ HTML อะไรบ้าง
สิ่งที่ผู้สัมภาษณ์กำลังมองหา: ความสามารถในการจัดส่งเนื้อหาที่เป็นมิตรต่อการค้นหาและมีความยืดหยุ่น
ตัวอย่างคำตอบ:
“ฉันมั่นใจว่าเนื้อหาหลักจะถูกแสดงในรูปแบบ HTML ไม่ใช่ถูกแทรกด้วย Javaสคริปต์ ฉันใช้ลำดับชั้นของหัวข้อเชิงตรรกะและเชิงพรรณนา และ <meta name=”description”>, canonical URLรวมถึงส่วนต่างๆ ที่เกี่ยวข้องกับความหมาย ฉันทำเครื่องหมายเนื้อหาด้วยไมโครดาต้าหรือ JSON-LD ที่เหมาะสมเมื่อจำเป็น ตรวจสอบให้แน่ใจว่ามีการเชื่อมโยงภายในที่มีความหมาย และเพิ่มเมตาแท็กโซเชียลสำหรับการแสดงตัวอย่าง ฉันตรวจสอบโครงร่างเอกสารและยืนยันความสามารถในการรวบรวมข้อมูลด้วยแผนผังเว็บไซต์แบบคงที่”
