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

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

ใน HTML5 แท็ก <link> เป็นแท็กที่ใช้สำหรับเชื่อมต่อไฟล์ภายนอกกับหน้าเว็บ โดยเฉพาะอย่างยิ่งไฟล์สไตล์ชีต (CSS) หรือไฟล์ประเภทอื่น ๆ เช่น ไอคอนของเว็บ (favicon) หรือเชื่อมโยงกับรูปแบบการพิมพ์ (print stylesheet) แท็กนี้เป็นส่วนหนึ่งของส่วน <head> ของเอกสาร HTML และไม่ได้แสดงผลออกมาบนหน้าจอผู้ใช้งานโดยตรง

การใช้งาน <link> Tag และตัวอย่างในรูปแบบต่าง ๆ

1. การเชื่อมต่อกับไฟล์ CSS

ตัวอย่างที่พบบ่อยที่สุดคือการใช้ <link> เพื่อเชื่อมต่อไฟล์ CSS เข้ากับ HTML

HTML
<head>
  <link rel="stylesheet" href="styles.css" type="text/css">
</head>
  • rel="stylesheet" ระบุความสัมพันธ์ของไฟล์ที่เชื่อมโยงว่าเป็นสไตล์ชีต
  • href ระบุที่อยู่ของไฟล์ CSS ที่จะนำมาใช้
  • type="text/css" ระบุชนิดของไฟล์ (ส่วนใหญ่จะเป็น CSS)

2. การใช้งานสำหรับ Icon ของเว็บไซต์ (Favicon)

สำหรับการกำหนดไอคอนที่แสดงบนแท็บของเบราว์เซอร์

HTML
<head>
  <link rel="icon" href="favicon.ico" type="image/x-icon">
</head>
  • rel="icon" ใช้สำหรับเชื่อมต่อไอคอนของเว็บ
  • href ระบุที่อยู่ของไฟล์ไอคอน
  • type="image/x-icon" ระบุชนิดของไฟล์ไอคอน

3. การเชื่อมต่อกับ Font

สามารถใช้ <link> เพื่อนำฟอนต์จากแหล่งภายนอกมาใช้ในเว็บไซต์ เช่น การเชื่อมต่อกับ Google Fonts

HTML
<head>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
</head>
  • rel="stylesheet" เหมือนเดิมคือระบุว่าเชื่อมโยงกับไฟล์ CSS
  • href ระบุที่อยู่ของไฟล์ฟอนต์

4. การใช้งานสำหรับ Print Stylesheet

หากต้องการให้เว็บไซต์มีการแสดงผลที่แตกต่างกันเมื่อพิมพ์ออกมา สามารถใช้ media="print" เพื่อเชื่อมโยงกับสไตล์ชีตที่ใช้สำหรับการพิมพ์

HTML
<head>
  <link rel="stylesheet" href="print.css" media="print">
</head>
  • media="print" ระบุว่าสไตล์ชีตนี้จะถูกใช้เมื่อพิมพ์เท่านั้น

5. การใช้สำหรับ Prefetch หรือ Prerender

สามารถใช้ <link> เพื่อบอกเบราว์เซอร์ให้โหลดทรัพยากรล่วงหน้าเพื่อเพิ่มประสิทธิภาพในการทำงาน

ตัวอย่าง Prefetch

HTML
<head>
  <link rel="prefetch" href="image.jpg">
</head>
  • rel="prefetch" ระบุให้เบราว์เซอร์ดาวน์โหลดไฟล์นี้ล่วงหน้าเพื่อนำมาใช้ในภายหลัง

ตัวอย่าง Prerender

HTML
<head>
  <link rel="prerender" href="https://www.example.com">
</head>
  • rel="prerender" ระบุให้เบราว์เซอร์โหลดหน้าเว็บที่เชื่อมโยงนี้ล่วงหน้า (รวมถึงทรัพยากรทั้งหมด) เพื่อให้สามารถแสดงผลได้อย่างรวดเร็วเมื่อมีการเรียกหน้าเว็บนั้น

6. การเชื่อมโยงกับไฟล์ Manifest

สำหรับ Progressive Web Apps (PWA) เราใช้ <link> เพื่อเชื่อมโยงกับไฟล์ manifest

HTML
<head>
  <link rel="manifest" href="/manifest.json">
</head>
  • rel="manifest" เชื่อมโยงกับไฟล์ manifest ที่ใช้ในการกำหนดคุณสมบัติของแอปพลิเคชันเว็บ

การใช้ <link> Tag มีความหลากหลายในการประยุกต์ใช้งานขึ้นอยู่กับว่าผู้พัฒนาเว็บต้องการเชื่อมโยงอะไรกับหน้าเว็บ

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

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