home

หน้าแรก
 Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> HTML

แท็ก HTML <frame>: ล้าสมัยใน HTML5 ใช้ <iframe> แทน

แท็ก <frame> ใน HTML คืออะไร?

แท็ก <frame> ใช้สร้าง เฟรม (Frame) ซึ่งเป็นหน้าต่างย่อยภายใน <frameset> แสดงหน้าเว็บอีกหน้าหนึ่ง แต่ แท็กนี้ล้าสมัย (Deprecated) ใน HTML5 แล้ว ควรใช้ <iframe> แทน

แอตทริบิวต์ของ <frame> (สำหรับการอ้างอิงเท่านั้น)

แอตทริบิวต์คำอธิบาย
frameborderแสดงเส้นขอบรอบเฟรม
longdescหน้าที่มีรายละเอียดยาวของเนื้อหาในเฟรม
marginheightระยะห่างบน-ล่างในเฟรม
marginwidthระยะห่างซ้าย-ขวาในเฟรม
nameชื่อของเฟรม (สำหรับ target)
noresizeห้ามปรับขนาดเฟรม
scrollingแสดง scrollbar หรือไม่
srcURL ของหน้าที่จะแสดงในเฟรม

ตัวอย่าง (โค้ดเก่า - ไม่ควรใช้ในโปรเจกต์ใหม่)

<!DOCTYPE html>
<html>
<frameset cols="30%,30%,20%,20%">
  <frame src="https://www.example.com/page1.html">
  <frame src="https://www.example.com/page2.html">
  <frame src="https://www.example.com/page3.html">
  <frame src="https://www.example.com/page4.html">
</frameset>
</html>

ตัวเลือกแทนที่: <iframe>

<!-- HTML5 มาตรฐาน -->
<iframe src="https://www.example.com/page1.html" 
        width="300" height="200" 
        style="border: none;"></iframe>

ทำไมต้องเลิกใช้ <frame> และ <frameset>?

  • ปัญหา SEO: สูตรค้นหาเข้าถึงเนื้อหาในเฟรมยาก
  • ปัญหา Accessibility: Screen reader อ่านไม่ถูกต้อง
  • ปัญหา UX: URL ไม่เปลี่ยน ไม่บุ๊กมาร์กได้ ไม่แชร์ลิงก์ได้
  • ไม่รองรับ Responsive Design
  • ลบออกจากมาตรฐาน HTML5 แล้ว

สรุป

ใช้ <iframe> แทนสำหรับการฝังหน้าเว็บอื่น และใช้ CSS Layout (Flexbox, Grid) สำหรับการจัดหน้าแทน Frameset