HTML <a>แท็ก
ตัวอย่าง
สร้างลิงค์ไปยัง W3Schools.com:
<a href="https://www.w3schools.com">Visit W3Schools.com!</a>
ตัวอย่าง "ลองใช้เอง" เพิ่มเติมด้านล่าง
ความหมายและการใช้งาน
แท็ ก<a>กำหนดไฮเปอร์ลิงก์ ซึ่งใช้เพื่อเชื่อมโยงจากหน้าหนึ่งไปยังอีกหน้าหนึ่ง
คุณลักษณะที่สำคัญที่สุดของ<a>องค์ประกอบคือ
hrefแอตทริบิวต์ ซึ่งระบุปลายทางของลิงก์
ตามค่าเริ่มต้น ลิงก์จะปรากฏดังนี้ในทุกเบราว์เซอร์:
- ลิงก์ที่ยังไม่ได้เข้าชมจะถูกขีดเส้นใต้และสีน้ำเงิน
- ลิงก์ที่เข้าชมถูกขีดเส้นใต้และสีม่วง
- ลิงก์ที่ใช้งานอยู่จะถูกขีดเส้นใต้และสีแดง
เคล็ดลับและหมายเหตุ
เคล็ดลับ:ถ้า<a>แท็กไม่มี
hrefแอตทริบิวต์ แท็กนั้นจะเป็นตัวยึดสำหรับไฮเปอร์ลิงก์เท่านั้น
เคล็ดลับ:โดยปกติหน้าที่เชื่อมโยงจะแสดงในหน้าต่างเบราว์เซอร์ปัจจุบัน เว้นแต่คุณจะระบุเป้าหมายอื่น
เคล็ดลับ:ใช้ CSS เพื่อกำหนดรูปแบบลิงก์: ลิงก์CSS และปุ่ม CSS
รองรับเบราว์เซอร์
| Element | |||||
|---|---|---|---|---|---|
| <a> | Yes | Yes | Yes | Yes | Yes |
คุณลักษณะ
| Attribute | Value | Description |
|---|---|---|
| download | filename | Specifies that the target will be downloaded when a user clicks on the hyperlink |
| href | URL | Specifies the URL of the page the link goes to |
| hreflang | language_code | Specifies the language of the linked document |
| media | media_query | Specifies what media/device the linked document is optimized for |
| ping | list_of_URLs | Specifies a space-separated list of URLs to which, when the link is followed, post requests with the body ping will be sent by the browser (in the background). Typically used for tracking. |
| referrerpolicy | no-referrer no-referrer-when-downgrade origin origin-when-cross-origin same-origin strict-origin-when-cross-origin unsafe-url |
Specifies which referrer information to send with the link |
| rel | alternate author bookmark external help license next nofollow noreferrer noopener prev search tag |
Specifies the relationship between the current document and the linked document |
| target | _blank _parent _self _top |
Specifies where to open the linked document |
| type | media_type | Specifies the media type of the linked document |
คุณสมบัติสากล
แท็ ก<a>ยังสนับสนุน Global Attributes ในHTML
คุณสมบัติของเหตุการณ์
แท็ ก<a>ยังสนับสนุนแอตทริบิวต์เหตุการณ์ใน HTML
ตัวอย่างเพิ่มเติม
ตัวอย่าง
วิธีใช้รูปภาพเป็นลิงค์:
<a href="https://www.w3schools.com">
<img border="0" alt="W3Schools"
src="logo_w3s.gif" width="100" height="100">
</a>
ตัวอย่าง
วิธีเปิดลิงก์ในหน้าต่างเบราว์เซอร์ใหม่:
<a href="https://www.w3schools.com" target="_blank">Visit W3Schools.com!</a>
ตัวอย่าง
วิธีเชื่อมโยงไปยังหมายเลขโทรศัพท์:
<a href="tel:+4733378901">+47 333 78 901</a>
ตัวอย่าง
วิธีเชื่อมโยงไปยังส่วนอื่นในหน้าเดียวกัน:
<a href="#section2">Go to Section 2</a>
ตัวอย่าง
วิธีเชื่อมโยงไปยัง JavaScript:
<a href="javascript:alert('Hello World!');">Execute JavaScript</a>
หน้าที่เกี่ยวข้อง
กวดวิชา HTML: ลิงก์ HTML
การอ้างอิง HTML DOM: Anchor Object
กวดวิชา CSS: ลิงค์จัดแต่งทรงผม
การตั้งค่า CSS เริ่มต้น
เบราว์เซอร์ส่วนใหญ่จะแสดง<a>องค์ประกอบด้วยค่าเริ่มต้นดังต่อไปนี้:
a:link, a:visited {
color: (internal value);
text-decoration: underline;
cursor: auto;
}
a:link:active, a:visited:active {
color: (internal value);
}