พัฒนาเว็บไซต์ด้วย HTML5

HTML5 การใช้งาน base Tag

ใน HTML5 แท็ก <base> ใช้เพื่อกำหนด URL พื้นฐานสำหรับลิงก์ทั้งหมดในเอกสารเว็บเพจ โดยจะถูกใช้ในกรณีที่ลิงก์ภายในเอกสารนั้นใช้ URL ที่สัมพันธ์กัน (Relative URL) เพื่อให้บราวเซอร์สามารถประมวลผลลิงก์เหล่านั้นได้ถูกต้องเมื่อมีการกำหนด URL พื้นฐานไว้

การใช้งาน <base> จะถูกวางไว้ในส่วน <head> ของเอกสาร และสามารถระบุค่าด้วยสองแอตทริบิวต์หลัก ได้แก่

  1. href: เพื่อกำหนด URL พื้นฐานสำหรับลิงก์ทั้งหมดในหน้า
  2. target: เพื่อกำหนดค่าเป้าหมายของลิงก์ (คล้ายกับแอตทริบิวต์ target ของแท็ก <a>)

การใช้งานแท็ก <base>

HTML
<!DOCTYPE html>
<html lang="th">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ตัวอย่างการใช้แท็ก base</title>
    
    <!-- ตั้งค่า URL พื้นฐาน -->
    <base href="https://www.example.com/" target="_blank">
</head>
<body>
    <h1>ยินดีต้อนรับสู่เว็บไซต์ของเรา</h1>
    
    <!-- ลิงก์จะใช้ URL พื้นฐานที่กำหนด -->
    <a href="page1.html">หน้า 1</a>
    <a href="page2.html">หน้า 2</a>
</body>
</html>

การประยุกต์ใช้ในสถานการณ์ต่าง ๆ

ใช้ URL พื้นฐานสำหรับลิงก์: เมื่อมีการตั้งค่า <base href="https://www.example.com/"> ทุกลิงก์ที่ใช้ URL แบบสัมพันธ์กัน (Relative URL) เช่น <a href="page1.html"> จะถูกแปลงให้เป็น URL ที่สมบูรณ์ เช่น https://www.example.com/page1.html โดยอัตโนมัติ

กำหนดค่า Target เริ่มต้นให้ลิงก์ทั้งหมด: แอตทริบิวต์ target สามารถใช้เพื่อกำหนดว่าเมื่อผู้ใช้คลิกลิงก์ให้เปิดหน้าในแท็บใหม่หรือหน้าต่างใหม่ เช่น

HTML
<base href="https://www.example.com/" target="_blank">

ตัวอย่างนี้หมายความว่าทุกลิงก์ที่ถูกคลิกจะถูกเปิดในแท็บใหม่โดยอัตโนมัติ

หลีกเลี่ยงปัญหาลิงก์ภายใน (Internal Links): หากหน้าเว็บมีการใช้งานลิงก์ภายใน เช่นการเลื่อนตำแหน่งไปยังจุดต่าง ๆ ของหน้า การใช้ <base> อาจทำให้ลิงก์ภายในทำงานผิดพลาดได้ เนื่องจากบราวเซอร์จะใช้ URL พื้นฐานสำหรับลิงก์เหล่านั้นเช่นกัน ดังนั้นควรระมัดระวังในการใช้งาน <base> ในกรณีนี้

ยกเลิกการตั้งค่า URL พื้นฐาน: หากต้องการยกเลิก URL พื้นฐานในลิงก์บางตัว เราสามารถใช้ URL ที่สมบูรณ์ (Absolute URL) ในแท็ก <a> ได้ เช่น

HTML
<a href="https://www.otherwebsite.com">ลิงก์ไปยังเว็บไซต์อื่น</a>

สรุป

แท็ก <base> เป็นเครื่องมือที่มีประโยชน์ในการจัดการกับลิงก์ที่สัมพันธ์กันในหน้าเว็บ โดยช่วยลดความซับซ้อนและความผิดพลาดในการจัดการ URL อย่างไรก็ตาม ควรใช้อย่างระมัดระวังโดยเฉพาะในหน้าเว็บที่มีการใช้งานลิงก์ภายใน

Tags
แชร์เรื่องนี้

เรื่องที่น่าสนใจ