HTML hyperlink ให้คุณนำทางไปหน้าอื่น แท็ก <a> กำหนด anchor Attribute "href" ระบุตำแหน่งที่ผู้ใช้จะถูกนำไปเมื่อคลิกลิงก์ ระหว่างแท็ก <a> และแท็กปิด </> คือ anchor text ที่จะแสดงให้ผู้ใช้เห็น
เมื่อคุณสร้างหน้าเว็บ คุณอาจต้องการอ้างอิงหน้าเว็บหรือเว็บไซต์อื่น ตัวอย่างเช่น คุณอาจสร้างบล็อกและต้องการลิงก์ไปบทความที่คุณคิดว่าเกี่ยวข้อง
Hyperlinks หรือลิงก์ ใช้เชื่อมต่อหน้าเว็บหนึ่งไปอีกหน้า และอนุญาตให้ผู้ใช้เคลื่อนที่ระหว่างหน้าเว็บหลายหน้าได้อย่างรวดเร็ว Hyperlinks สามารถใช้ลิงก์ไปหน้าอื่นบนเว็บไซต์ของคุณเอง หรือหน้าบนเว็บไซต์อื่นได้
ในคู่มือนี้ เราจะแยกวิเคราะห์พื้นฐานของ hyperlinking ใน HTML เราจะพูดถึงวิธีตั้ง targets สำหรับลิงก์ วิธีสร้าง anchors สำหรับบุ๊กมาร์ค และลิงก์ไปที่อยู่อีเมลและ elements เว็บ
HTML Hyperlink
HTML hyperlink ชี้ไปทรัพยากรเว็บอื่น Hyperlink ถูกกำหนดระหว่างแท็ก <a> และแท็กปิด </a> ข้อความระหว่างสองแท็กนี้จะนำผู้ใช้ไปทรัพยากรเว็บที่ลิงก์เมื่อคลิกลิงก์
Hyperlinks ถูกสร้างโดยใช้แท็ก <a> นี่คือ syntax สำหรับ hyperlink ในไฟล์ HTML:
<a href="your_url">This text will go to a URL.</a>
ข้อความระหว่างแท็กของเราจะลิงก์ไป URL ที่เราระบุในแท็กเปิด เราใช้ attribute href เลือก target ของ URL นี่อาจเป็น absolute URL หรือ absolute link เช่น https://www.careerkarma.com หรือ URL สัมพัทธ์กับที่ใดที่หนึ่งบนเว็บไซต์ของเรา
นี่คือตัวอย่างลิงก์ที่ชี้ไปที่อยู่เว็บของหน้าแรก Career Karma:
81% of participants stated they felt more confident about their tech job prospects after attending a bootcamp. Get matched to a bootcamp today.
The average bootcamp grad spent less than six months in career transition, from starting a bootcamp to finding their first job.
<a href="https://www.careerkarma.com">Career Karma</a>
HTML Hyperlink Tag Types
มี 3 ประเภทของลิงก์ที่อาจปรากฏในเบราว์เซอร์ ดังนี้:
- Unvisited links ซึ่งปรากฏเป็นสีน้ำเงิน
- Visited links ซึ่งปรากฏเป็นสีม่วง
- Active links ซึ่งปรากฏเป็นสีแดง
บางเว็บไซต์ทับสีเหล่านี้ ทำให้มันปรากฏต่างออกไป แต่เหล่านี้คือประเภทหลักของลิงก์ที่คุณสามารถจัดสไตล์ใน HTML
Hyperlink HTML: Targets
คุณสามารถเปลี่ยนวิธีที่ลิงก์เปิดได้ ตัวอย่างเช่น สมมติคุณต้องการลิงก์เปิดในแท็บใหม่ในเบราว์เซอร์ของผู้ใช้ นี่จะทำให้แน่ใจว่าผู้ใช้ไม่สูญเสียตำแหน่งบนหน้าเว็บที่พวกเขากำลังดูอยู่
นี่คือที่มาของ link targetHTML attribute ด้วยการใช้ link target attribute คุณสามารถระบุได้ว่าเบราว์เซอร์ควรเปิดทรัพยากรที่คุณลิงก์ไว้ที่ไหน
มี 4 ประเภทของ targets ที่คุณสามารถใช้ ดังนี้:
- _self: เยี่ยมชมทรัพยากรเว็บในหน้าต่างและแท็บเดียวกัน นี่คือ target เริ่มต้นที่ใช้ใน HTML hyperlinks
- _parent: เยี่ยมชมทรัพยากรเว็บในหน้าต่าง parent
- _blank: เยี่ยมชมทรัพยากรเว็บในหน้าต่างหรือแท็บใหม่
- _top: เยี่ยมชมทรัพยากรเว็บในหน้าต่างเบราว์เซอร์เต็ม
นี่คือตัวอย่างบางอย่างของลิงก์เหล่านี้ในการทำงาน:
<a href="https://www.careerkarma.com" target="_self">This link will open in this tab.</a> <a href="https://www.careerkarma.com" target="_parent">This link will open a parent window.</a> <a href="https://www.careerkarma.com" target="_blank">This link will open in a new tab.</a> <a href="https://www.careerkarma.com" target="_top">This link will open in a full browser window.</a>
Hyperlink HTML: Bookmark Anchors
Hyperlinks ใน HTML สามารถอ้างอิงส่วนเฉพาะของเอกสาร HTML ได้ นี่มีประโยชน์หากคุณมีหน้าเว็บยาวและต้องการนำทางผู้ใช้ไปตำแหน่งเฉพาะในข้อความ
ก่อนที่คุณจะเริ่มใช้ bookmark anchors คุณต้องกำหนด ID attribute บน element ที่คุณต้องการให้ผู้ใช้ไปก่อน นี่คือตัวอย่างการประกาศ ID attribute บน title ในหน้าเว็บ:
<h3 id="subtitle3">Subtitle 3</h3>
เราให้แท็ก HTML heading id subtitle3 ซึ่งเราสามารถใช้เพื่ออ้างอิงใน hyperlink ได้
นี่คือตัวอย่าง hyperlink ที่อ้างอิง heading นี้:
<a href="#subtitle3">Go to Subtitle 3</a>
แทนที่จะระบุ URL ในแท็ก href ของเรา เราระบุ ID ของ element ที่เราต้องการลิงก์ไป เราเพิ่มเครื่องหมายแฮชก่อน id (#) เพื่อให้เบราว์เซอร์รู้ว่าเอกสารที่ลิงก์อยู่บนหน้าเว็บของเรา
HTML Anchor Tag
HTML anchor tag หมายถึงแท็ก แท็กนี้ลิงก์ผู้ใช้ไปทรัพยากรเว็บอื่น Attribute "href" กำหนดทรัพยากรที่ผู้ใช้จะถูกนำไปเมื่อคลิกลิงก์
HTML Anchor Tag Examples
มาเดินผ่านตัวอย่างบางอย่างของการใช้ HTML <a> tag
Relative URLs
หากคุณลิงก์ไปทรัพยากรบนเอกสาร HTML เดียวกันที่คุณกำลังพัฒนา คุณสามารถใช้ relative URL Relative URLs ยังเรียกว่า local links และไม่ใช้ syntax "https://www.sitename.com" แทนที่จะ relative URLs ชี้ไป file path ของทรัพยากรเว็บเฉพาะบน local server
สมมติเรากำลังสร้างลิงก์บนเว็บไซต์ Career Karma ที่ควรชี้ไปบล็อกของเรา แทนที่จะใช้ absolute URL เราสามารถใช้ local URL ได้ เพราะเว็บไซต์ของเราคือ Career Karma นี่คือโค้ดที่เราจะใช้สร้างลิงก์นี้:
<a href="/blog">Career Karma blog</a>
เมื่อเราคลิกข้อความ Career Karma blog เราถูกส่งไปทรัพยากร /blog บนเว็บไซต์ของเรา
Email Address
แท็ก anchor ยังสามารถใช้ลิงก์ไปที่อยู่อีเมลได้ เมื่อลิงก์ไปที่อยู่อีเมลถูกคลิก โปรแกรมอีเมลเริ่มต้นของผู้ใช้จะเปิด ผู้ใช้จะถูกถามว่าต้องการส่งข้อความไปที่อยู่อีเมลที่คุณระบุหรือไม่
เพื่อลิงก์ไปที่อยู่อีเมล เราต้องเริ่มลิงก์ของเราด้วย protocol mailto: นี่คือตัวอย่างการลิงก์ไปที่อยู่อีเมลใน HTML:
<a href="mailto:nothing@google.com">Send an email to us!</a>
เมื่อเราคลิกลิงก์ของเรา โปรแกรมอีเมลของเราเปิดขึ้นและขอให้เราส่งอีเมลไป "nothing@google.com"
Link to an Element
แท็ก anchor สามารถลิงก์ไป element บนหน้าเว็บ คุณสามารถสร้างลิงก์นี้โดยระบุ id ของ element ที่ anchor ควรชี้ สมมติเราต้องการลิงก์พา user ไปที่ heading Test Heading บนหน้าเว็บ เราสามารถสร้างลิงก์นี้ด้วยโค้ดต่อไปนี้:
<a href="#test_heading">Jump to Test Heading</a> <h2 id="test_heading">Test Heading</h2>
เมื่อเราคลิกลิงก์ของเรา หน้าเว็บของเราจะเลื่อนลงไป element ที่มี id test_heading
สรุป
Hyperlinks สามารถใช้ใน HTML ลิงก์หน้าเว็บหรือทรัพยากรหนึ่งไปอีกอัน คุณสามารถใช้ hyperlinks เชื่อมต่อทรัพยากรบนเว็บไซต์ของคุณ หรือบนเว็บไซต์อื่น ในคู่มือนี้ เราแยกวิเคราะห์วิธีใช้ hyperlinks ในเอกสาร HTML
ด้วยข้อมูลทั้งหมดนี้ คุณพร้อมที่จะสร้าง hyperlinks ใน HTML อย่างมาสเตอร์แล้ว!
เพื่อเรียนรู้เพิ่มเติมเกี่ยวกับการเขียนโค้ดใน HTML อ่านคู่มือ How to Learn HTML ของเรา
