แอตทริบิวต์ href
แอตทริบิวต์ href เป็นหนึ่งในแอตทริบิวต์ที่สำคัญที่สุดใน HTML
href ใช้สำหรับระบุ URL สำหรับ:
- ไฮเปอร์ลิงก์ (เรียกเพียงว่า "ลิงก์")
- หรือสำหรับนำเข้ารีซอร์สภายนอก เช่น สไตล์และสคริปต์
กรณีการใช้งานที่พบบ่อยที่สุดของ href คือเพิ่มลิงก์ภายในหรือภายนอก (URL) บนแองคอร์เอลิเมนต์ <a>:
<a href="link-path">Click</a>ลิงก์ภายใน (Internal Links) ด้วย href
มาสร้างลิงก์ที่พาผู้ใช้ไปหน้าหน้าเมื่อคลิกกัน
เราจะเรียกมันว่า Home
ก่อนอื่น เรากำหนดแองคอร์เอลิเมนต์:
<a>Home</a>ตอนนี้เพื่อทำให้เอลิเมนต์ <a> กลายเป็นไฮเปอร์ลิงก์ เราเพิ่มแอตทริบิวต์ href:
<a href>Home</a>และกำหนดค่าเป็น "/":
<a href="/">Home</a>วิธีการแสดงในเบราว์เซอร์:
Home
เพื่อความสมบูรณ์ มาแยกตัวอย่างแองคอร์เอลิเมนต์:
<a>คือแท็กแองคอร์เปิด</a>คือแท็กแองคอร์ปิดHomeคือเนื้อหา (ส่วนเดียวที่มองเห็นในเบราว์เซอร์)hrefคือ ชื่อ แอตทริบิวต์=คือตัวดำเนินการกำหนดค่า"/"คือ ค่า แอตทริบิวต์
บนเว็บไซต์นี้ แองคอร์เอลิเมนต์นี้ห่อหุ้มโลโก้ TechStacker ในมุมซ้ายบนของเฮดเดอร์ (หากคุณคลิก คุณจะไปหน้าหน้า)
คุณจะมักเห็นตัวอย่างโค้ดนี้ใช้ภายในแถบนำทาง <nav>...</nav> ของเว็บไซต์
สมมติว่าเว็บไซต์ของคุณมีทั้งหมด 3 หน้า เช่น Home, About, Contact และคุณต้องการทำ ลิงก์ภายใน สำหรับพวกเขา
ก่อนอื่น เอกสาร HTML ของแต่ละหน้าควรมีชื่อดังนี้:
- Home ควรเป็น
index.html - About ควรเป็น
about.html - Contact ควรเป็น
contact.html
และจากนั้นคุณกำหนดเส้นทางหน้าแบบสัมพัทธ์ (URL) สำหรับแต่ละเอกสารดังนี้:
<a href="/">Home</a> <a href="/about">About</a> <a href="/contact">Contact</a>ตอนนี้คุณสามารถห่อแองคอร์เอลิเมนต์แต่ละตัวไว้ในเอลิเมนต์ <nav>:
<nav> <a href="/">Home</a> <a href="/about">About</a> <a href="/contact">Contact</a> </nav>ตอนนี้คุณมีคอมโพเนนต์นำทางที่คุณสามารถวางใน เฮดเดอร์, ฟッター, หรือ ไซด์บาร์ บนเว็บไซต์ของคุณ
ลิงก์ภายนอก (External Links) ด้วย href
หากคุณต้องการลิงก์ไปเว็บไซต์อื่นนอกจากของคุณเอง ให้ใช้รูปแบบ ลิงก์ภายนอก ที่คุณระบุเส้นทางสัมบูรณ์:
<a href="https://www.youtube.com">Link to YouTube.com</a>ฉันจะใช้โอกาสนี้ลิงก์ไปยังช่อง YouTube ของฉันเอง:
ลิงก์ไปช่อง YouTube ของฉัน (TechStacker)
