เรียนรู้พื้นฐานของ HTML(<a> ) องค์ประกอบไฮเปอร์ลิงก์ใช้เพื่อกำหนดลิงก์แบบโต้ตอบบนเว็บ
ใน HTML <a> แท็กใช้เพื่อกำหนดองค์ประกอบลิงก์/ไฮเปอร์ลิงก์:
<a>Link element</a>องค์ประกอบลิงก์เรียกอีกอย่างว่า สมอ ธาตุ
ลิงก์กับไฮเปอร์ลิงก์:
- A ลิงก์ คือที่อยู่ที่ระบุตำแหน่งบนอินเทอร์เน็ต
- A ไฮเปอร์ลิงก์ เป็น ประเภทของลิงค์ ที่คุณสามารถคลิกเพื่อเปิดใช้งานบางอย่างหรือไปยังปลายทาง เช่น เว็บไซต์
ในการสนทนา คนส่วนใหญ่พูดว่า "ไฮเปอร์ลิงก์" และ "ลิงก์" สลับกันได้
วิธีใช้องค์ประกอบ 'a'
<a> องค์ประกอบใช้แอตทริบิวต์หลายรายการโดยที่สำคัญที่สุดคือ href แอตทริบิวต์ซึ่งใช้เพื่อระบุปลายทางของลิงก์ (URL) เมื่อผู้ใช้คลิกที่มัน
ต่อไปนี้คือตัวอย่างลิงก์ที่นำคุณไปยังหน้าแรกของ TechStacker เมื่อคุณคลิก:
<a href="https://techstacker.com">Go to TechStacker’s front page.</a>ลิงก์ด้านบนมีหน่วยการสร้างเหล่านี้:
- เปิดแท็กลิงค์
<a> - ชื่อแอตทริบิวต์:
href - ค่าแอตทริบิวต์:
"https://techstacker.com"(ลิงค์ URL/ปลายทาง) - ข้อความลิงก์
Go to TechStacker’s front page.(ปรากฏแก่ผู้ใช้) - ปิดแท็กลิงค์
</a>
ลิงก์ด้านบนจะมีลักษณะอย่างไรในชีวิตจริง:
ไปที่หน้าแรกของ TechStacker
URL สัมพัทธ์กับสัมพัทธ์
ค่าแอตทริบิวต์ (ปลายทางของลิงก์/URL) สามารถเป็นสัมบูรณ์ หรือ ญาติ เส้นทาง URL ตัวอย่างก่อนหน้านี้เป็น URL ที่สมบูรณ์:
<a href="https://techstacker.com">Go to TechStacker’s front page.</a>นี่ เป็น URL สัมพัทธ์ที่นำไปสู่บทความในเว็บไซต์นี้:
<a href="/html-tags-vs-html-elements-difference"
>HTML Tags vs. HTML Elements.</a
>นี่คือ URL ที่สมบูรณ์ของบทความเดียวกัน:
<a href="https://techstacker.com/html-tags-vs-html-elements-difference"
>HTML Tags vs. HTML Elements.</a
>สังเกตว่า URL แบบสัมบูรณ์ มีข้อมูลมากกว่า URL ที่เกี่ยวข้อง:
- มีโปรโตคอล (
https) - ชื่อโดเมน
techstacker.com - ทาก
/html-tags-vs-html-elements-difference
URL สัมพัทธ์มีตัวบุ้งเท่านั้น
แล้วคุณใช้อันไหน?
- ใช้ URL ที่เกี่ยวข้อง เมื่อคุณเชื่อมโยงไปยังเนื้อหาบนเว็บไซต์ของคุณเอง
- ใช้ URL สัมบูรณ์ เมื่อคุณเชื่อมโยงไปยังเนื้อหาบนเว็บไซต์อื่น
คุณสามารถใช้ URL ที่เกี่ยวข้องเพื่ออ้างอิงเนื้อหาที่มีชีวิต (จัดเก็บไว้) บน เซิร์ฟเวอร์เดียวกัน ที่มีเว็บไซต์ของคุณ มิฉะนั้น ให้ใช้ URL ที่สมบูรณ์
หากคุณสับสนเกี่ยวกับความแตกต่างระหว่างแท็ก HTML และองค์ประกอบ HTML คุณอาจต้องการอ่านบทความเกี่ยวกับแท็ก HTML กับองค์ประกอบ HTML
เอาล่ะ มีอีกหนึ่งคุณลักษณะที่ใช้กันทั่วไปและสำคัญที่ต้องรู้ โดยเฉพาะอย่างยิ่งเมื่อพูดถึง SEO
แอตทริบิวต์เป้าหมาย
แอตทริบิวต์องค์ประกอบลิงก์ที่มีประโยชน์อีกอย่างหนึ่งคือ target แอตทริบิวต์ซึ่งระบุตำแหน่งที่จะเปิดลิงก์เมื่อผู้ใช้คลิกที่ลิงก์
หากคุณคลิกที่ลิงค์นี้:
<a href="https://techstacker.com/">Link to front page</a>คุณจะถูกนำไปที่หน้าแรกของ TechStacker ในแท็บเบราว์เซอร์เดียวกัน/หน้าต่างที่คุณอยู่ตอนนี้ ซึ่งหมายความว่าหากคุณเชื่อมโยงไปยังเว็บไซต์อื่น ผู้ใช้จะถูกย้ายออกจากเว็บไซต์ของคุณและไปยังเว็บไซต์ที่คุณเชื่อมโยง (ซึ่งคุณอาจต้องการหรือไม่ต้องการ)
สิ่งนี้เกิดขึ้นเพราะโดยค่าเริ่มต้น <a> องค์ประกอบมี target แอตทริบิวต์ที่มีค่า _self — ซึ่งหมายความว่าจะเปิดลิงก์ในหน้าต่างเดียวกับที่ผู้ใช้อยู่
ดังนั้นองค์ประกอบลิงก์นี้:
<a href="https://techstacker.com/"></a>คอมพิวเตอร์/เบราว์เซอร์อ่านดังนี้:
<a href="https://techstacker.com/" target="_self"></a>ซึ่งอาจทำให้สับสนได้เพราะคุณมองไม่เห็น (แต่ตอนนี้คุณรู้แล้ว)
หากคุณต้องการให้ลิงก์ของคุณเปิดในแท็บเบราว์เซอร์ใหม่ คุณสามารถแทนที่ค่าเริ่มต้น _self มีค่าด้วย _blank ค่า:
<a href="https://youtube.com" target="_blank" rel="noopener"
>If you click this, the YouTube website opens in a new tab</a
>ควรใช้เมื่อใด
คำตอบง่ายๆ คือ หากคุณไม่ต้องการย้ายผู้ใช้ออกจากเว็บไซต์ของคุณ เช่น เพื่อวัตถุประสงค์ในการทำ SEO ให้ใช้ target="_blank" .
มิฉะนั้น อย่าทำอะไรเลย และลิงก์ของคุณจะถูกเปิดโดยค่าเริ่มต้นในหน้าต่างเบราว์เซอร์เดียวกัน (ผ่าน _self ค่า)
การใช้ส่วนหัวเป็นลิงก์
องค์ประกอบ HTML จำนวนมากสามารถใช้เป็นลิงก์ รวมถึงส่วนหัว อันที่จริงเป็นเรื่องธรรมดามาก สิ่งที่คุณต้องทำคือห่อองค์ประกอบที่คุณต้องการสร้างกับลิงก์ภายในแท็กลิงก์ <a></a> :
<a href="/html-for-beginners">
<h3>HTML for Beginners</h3>
</a>การใช้รูปภาพเป็นลิงก์
องค์ประกอบลิงก์ยังสามารถทำให้รูปภาพเป็นลิงก์ได้ เช่น สำหรับภาพขนาดย่อหรือบทความหรือหน้าผลิตภัณฑ์ ในการทำเช่นนั้น คุณห่อองค์ประกอบรูปภาพของคุณอย่างง่าย<img > ภายในองค์ประกอบลิงก์ <a></a> เช่นนี้:
<a href="/tags/html">
<img src="../../thumbnails/html.png" />
</a>ตัวอย่างข้างต้นจะนำผู้ใช้ไปยังส่วนบทความ HTML นี้เมื่อคลิกที่รูปภาพ
ตัวจริงเป็นยังไง (ลองคลิกดู):
