แอตทริบิวต์ href ขององค์ประกอบ <a> (anchor) ใช้สำหรับกำหนด ลิงก์ (URL) ของหน้าเว็บปลายทาง
ไวยากรณ์ (Syntax)
<a href="URL">
URL สามารถเป็น:
- Absolute URL — URL เต็ม (เช่น
https://tutorialspoint.com/java) - Relative URL — URL สัมพัทธ์ (เช่น
/javascript,../page.html) - Protocol links —
mailto:email@example.com,tel:+123456789,javascript:alert() - Anchor links —
#section-id(เลื่อนไปยังส่วนในหน้าเดียวกัน)
ตัวอย่าง 1: ลิงก์ทั่วไป
<!DOCTYPE html> <html> <body> <h2>การเรียนรู้น่าสนุก</h2> <p> เรียนรู้แนวคิดของ <a href="https://tutorialspoint.com/java">Java!</a> ลอง JavaScript จากเว็บไซต์เรา: <a href="/javascript">JavaScript!</a> </p> </body> </html>
ตัวอย่าง 2: ลิงก์อีเมล (mailto)
<!DOCTYPE html> <html> <body> <h2>การเรียนรู้น่าสนุก</h2> <p>เรียนรู้แนวคิดของ <a href="https://tutorialspoint.com/java">Java!</a></p> <p>สำหรับบทเรียนเพิ่มเติม กรุณา <a href="mailto:abcd@demo.com?cc=pqr@demo.com&subject=DEMO EMAIL">ส่งอีเมล</a></p> </body> </html>
ผลลัพธ์
ตัวอย่าง 1: ลิงก์ "Java!" ไปยัง tutorialspoint.com, ลิงก์ "JavaScript!" ไปยัง /javascript (relative)
ตัวอย่าง 2: ลิงก์ "ส่งอีเมล" จะเปิด email client (เช่น Outlook, Gmail) พร้อมกรอก to, cc, subject อัตโนมัติ
คำอธิบาย mailto parameters
| พารามิเตอร์ | คำอธิบาย | ตัวอย่าง |
|---|---|---|
to | ผู้รับ (อยู่ใน href หลัง mailto:) | mailto:user@example.com |
cc | ผู้รับแบบคัดลอก | ?cc=copy@example.com |
bcc | ผู้รับแบบลับ | &bcc=secret@example.com |
subject | หัวข้ออีเมล | &subject=Hello |
body | เนื้อหาอีเมล | &body=Message%20here |
แอตทริบิวต์เพิ่มเติมของ <a>: target="_blank" (เปิดแท็บใหม่), rel="noopener noreferrer" (ความปลอดภัย), download (ดาวน์โหลดไฟล์), hreflang, type