วิธีใช้ HTML Attributes: คู่มือครบครัน พร้อมตัวอย่าง href, target, defer, data-*

เรียนรู้วิธีใช้แอตทริบิวต์ HTML โดยดูที่ชื่อและค่าแอตทริบิวต์ที่ใช้บ่อยที่สุด

HTML Attributes คืออะไร?

ใน HTML แอตทริบิวต์คือเครื่องมือปรับเปลี่ยนที่ใช้เพิ่มข้อมูลเพิ่มเติมให้กับเอลิเมนต์ HTML หรือเปลี่ยนพฤติกรรมค่าเริ่มต้น (out of the box) ของพวกเขา

เอลิเมนต์ HTML ที่ไม่มีแอตทริบิวต์เพิ่มเติมมีลักษณะดังนี้:

<tag>Content</tag>

เอลิเมนต์ HTML พร้อมแอตทริบิวต์ ถูกกำหนดอย่างนี้:

<tag attribute="value">Content</tag>

ด้วยโมเดลนี้ในใจ มาดูตัวอย่างแอตทริบิวต์ที่เป็นประโยชน์กัน

แอตทริบิวต์ href

แอตทริบิวต์ href เป็นหนึ่งในแอตทริบิวต์ที่สำคัญที่สุดใน HTML

href ใช้สำหรับระบุ URL สำหรับ:

• ไฮเปอร์ลิงก์ (เรียกเพียงว่า "ลิงก์")
• หรือสำหรับนำเข้ารีซอร์สภายนอก เช่น สไตล์และสคริปต์

กรณีการใช้งานที่พบบ่อยที่สุดของ href คือเพิ่ม URL ลิงก์บนแองคอร์เอลิเมนต์ <a>:

<a href="url-path">Link text</a>

ลิงก์เหล่านี้ช่วยให้ผู้ใช้คลิกไปจากหน้าไปหน้าได้ ไม่ว่าจะเป็น ภายใน (บนเว็บไซต์/โดเมนเดียวกัน) หรือ ภายนอก (ไปโดเมนเว็บไซต์อื่น)

ลิงก์ภายใน (Internal Link)

ลิงก์ภายในใช้เส้นทางสัมพัทธ์:

<a href="/">Home</a>

เป็นมาตรฐาน "/" นำไปหน้าหน้าบนเว็บไซต์ใดๆ ซึ่งเป็นหน้า index.html

หากคุณมีหน้าชื่อ About และเอกสาร HTML ที่สอดคล้องชื่อ about.html คุณสามารถลิงก์ภายในไปได้อย่างนี้:

<a href="/about">About</a>

ลิงก์นี้นำไปหน้า About ของ TechStacker

ลิงก์ภายนอก (External Link)

ลิงก์ภายนอกต้องการเส้นทางสัมบูรณ์:

<a href="https://www.youtube.com">Go to YouTube.com</a>

แอตทริบิวต์ target

ขณะที่เรากำลังทำงานกับแองคอร์เอลิเมนต์ มาดูแอตทริบิวต์สำคัญอีกตัวของแองคอร์เอลิเมนต์ คือแอตทริบิวต์ target

แอตทริบิวต์ target ระบุ ที่ ที่จะเปิดลิงก์เมื่อผู้ใช้คลิก

ตัวอย่างเช่น หากคุณคลิกที่ลิงก์ภายนอกด้านล่าง คุณจะถูกนำไป YouTube.com ใน แท็บเบราว์เซอร์เดียวกัน ที่คุณอยู่ตอนนี้:

<a href="https://www.youtube.com/">Go to YouTube.com</a>

Go to YouTube.com

สิ่งนี้เกิดขึ้นเพราะโดยค่าเริ่มต้น เอลิเมนต์ <a> มีแอตทริบิวต์ target ที่มีค่า _self — หมายความว่ามันเปิดค่า href ลิงก์ในหน้าต่างเดียวกับที่ผู้ใช้อยู่

ดังนั้นเอลิเมนต์ลิงก์นี้:

<a href="https://www.youtube.com/"></a>

ถูกอ่านโดยคอมพิวเตอร์/เบราว์เซอร์อย่างนี้:

<a href="https://www.youtube.com/" target="_self"></a>

แตทำไงถ้าคุณต้องการให้ลิงก์เปิดในแท็บเบราว์เซอร์ใหม่?

ไม่เป็นไร คุณสามารถแทนที่ค่า _self เริ่มต้นด้วยค่า _blank:

<a href="https://www.youtube.com" target="_blank" rel="noopener" >Go to YouTube.com (opens in a new tab)</a >

ตอนนี้ลิงก์ YouTube จะเปิดในแท็บเบราว์เซอร์ใหม่:

Go to YouTube.com (new tab)

ฉันจะใช้โอกาสนี้โปรโมทช่อง YouTube ของฉัน:

ลิงก์ไปช่อง YouTube ของฉัน (TechStacker)

อ่านเพิ่มเติมเกี่ยวกับแองคอร์/ลิงก์เอลิเมนต์

แอตทริบิวต์ที่ไม่มีค่า

แอตทริบิวต์ โดยปกติ ประกอบด้วยชื่อแอตทริบิวต์และค่าแอตทริบิวต์ เช่นในตัวอย่างแองคอร์เอลิเมนต์

อย่างไรก็ตาม บางครั้ง ค่า (พฤติกรรม) ถูกสร้างไว้ในตัวชื่อแอตทริบิวต์

ตัวอย่างเช่น แอตทริบิวต์ defer เพื่อแก้ไขเอลิเมนต์ HTML <script>:

<script defer src="app.js"></script>

สังเกตว่าแอตทริบิวต์ defer ไม่มีตัวดำเนินการกำหนดค่า (=) หรือค่า เพราะพฤติกรรมของมันถูกสร้างไว้ในตัว

defer เป็นที่เรียกว่าแอตทริบิวต์ boolean บูลีนใช้สำหรับประเภทข้อมูลที่มีได้เพียงสองค่า true หรือ false (หรือ enable/disable)

ลองดูรายละเอียดแอตทริบิวต์ defer ใกล้ชิดกัน

เอลิเมนต์ <script> นี้ ไม่มี แอตทริบิวต์ defer จะรันโค้ด JavaScript จากค่า src ของ app.js ทันทีที่เบราว์เซอร์โหลดมัน:

<script src="app.js"></script>

โดยค่าเริ่มต้น เอกสาร HTML ถูกแยกวิเคราะห์ (อ่าน) จากบนลงล่าง บรรทัดละบรรทัด หมายความว่าหากคุณวาง JavaScript ใดๆ ที่ด้านบนของเอกสาร มันจะรัน ก่อน ที่ส่วนที่เหลือของเอกสารจะเสร็จสิ้นการแยกวิเคราะห์

นั่นคือพฤติกรรม ค่าเริ่มต้น ของเอลิเมนต์ script

แต่วันที่คุณเพิ่ม defer ให้กับเอลิเมนต์ <script> คุณปิดใช้งานพฤติกรรมค่าเริ่มต้นนั้น:

<script defer src="app.js"></script>

ตอนนี้ โค้ด JavaScript จะไม่รันจนกว่าหน้าทั้งหมดจะโหลดเสร็จ

ในความหมายตามตัวอักษร defer หมายถึง โพสต์โพน/เลื่อน/รอ

เพื่อให้เข้าใจชัดเจน:

• ไม่มี defer, JavaScript รันทันทีที่โหลดเสร็จ
• มี defer JavaScript รอรันจนกว่า HTML หน้าทั้งหมดจะโหลดเสร็จ

หากแอตทริบิวต์ทำให้คุณสับสน อย่ากังวล มันจะมีความหมายมากขึ้น 10 เท่าเมื่อคุณเริ่มใช้งานจริง

Custom Attributes (แอตทริบิวต์แบบกำหนดเอง)

คุณยังสามารถสร้างแอตทริบิวต์แบบกำหนดเองได้ ซึ่งคุณสามารถควบคุมด้วย JavaScript ชื่อแอตทริบิวต์แบบกำหนดเองต้องนำหน้าด้วยฉลาก data-:

<tag data-custom-attribute-name="value">Content</tag>

ตัวอย่าง ให้เรามีเอลิเมนต์อาหารชื่อ "Apple" เมื่อผู้ใช้คลิกที่มัน เราต้องการแสดงประเภทของอาหารในกล่องโต้ตอบป๊อปอัพ

เพื่อทำเช่นนั้น เราจะสร้างแอตทริบิวต์แบบกำหนดเองชื่อ food-type (จำไว้ว่ามีฉลาก data-) และเพิ่มลงในเอลิเมนต์ <div> พร้อมข้อความ Apple ด้านใน:

<div onclick="showDetailsBox(this)" id="apple" data-food-type="fruit"> Apple </div>

และ JavaScript ที่ทำให้ฟีเจอร์ทำงาน:

function showDetailsBox(food) { const foodType = food.getAttribute("data-food-type") alert(food.innerHTML + " is a " + foodType) }

นี่คือตัวอย่างสาธิต

วิธีการทำงานของโค้ด HTML:

• ก่อนอื่น เราเพิ่มแอตทริบิวต์ onclick ให้กับเอลิเมนต์ <div> นี่คือแอตทริบิวต์เหตุการณ์ที่แนบ Event listener ที่ฟัง... คุณเดาถูกต้อง คือ การคลิก!
• จากนั้นเรากำหนดค่าแอตทริบิวต์ showDetailsBox(this) ให้กับแอตทริบิวต์ onclick
• showDetailsBox() คือชื่อฟังก์ชัน JavaScript ที่ถูกเรียกทันทีที่คุณคลิกที่เอลิเมนต์ข้อความ Apple
• ส่วน this ของ (this) คืออาร์กิวเมนต์ที่อ้างถึงออบเจ็กต์ที่มันเป็นของ (this ค่อนข้างขั้นสูงสำหรับผู้เริ่มต้น ไม่เป็นไรหากไม่เข้าใจ)
• id เป็นแอตทริบิวต์ HTML ในตัวที่ใช้ระบุ ID เฉพาะตัวสำหรับเอลิเมนต์ HTML ในกรณีนี้ ID เฉพาะของเราคือ apple

วิธีการทำงานของ โค้ด JavaScript อยู่นอกขอบเขตของบทช่วยสอน HTML นี้ ดังนั้นฉันจะให้คำอธิบายแบบง่ายๆ:

เมื่อฟังก์ชัน showDetailsBox() ถูกเรียกโดยแอตทริบิวต์เหตุการณ์ onclick มันจะรันบล็อกโค้ด { ... }:

function showDetailsBox(food) { ... }

บรรทัดแรกภายในบล็อกโค้ด JavaScript เลือกเอลิเมนต์ HTML ใดๆ ที่มีแอตทริบิวต์แบบกำหนดเอง data-food-type และกำหนดมัน (และค่าแอตทริบิวต์) ให้กับตัวแปรชื่อ foodType:

function showDetailsBox(food) { const foodType = food.getAttribute("data-food-type") ... }

บรรทัดที่สองเรารันเมธอด alert() ในตัว (ที่แสดงกล่องโต้ตอบป๊อปอัพและบอกมันให้แสดงค่าของ foodType ซึ่งเป็น fruit แน่นอน:

function showDetailsBox(food) { const foodType = food.getAttribute("data-food-type") alert(food.innerHTML + " is a " + foodType) }

ไม่ต้องกังวลหากคุณไม่เข้าใจโค้ดตัวอย่างทั้งหมดข้างต้น มีรายละเอียดมากที่ต้องย่อย ทั้งอย่างนักสำหรับผู้เริ่มต้น ด้วยการฝึกฝน จะเข้าใจได้!

สำหรับข้อมูลเพิ่มเติมเกี่ยวกับแอตทริบิวต์ HTML แนะนำให้ขุดค้น MDN web docs HTML attribute reference

สำคัญ: อย่าเก็บเนื้อหาสำคัญที่ควรมองเห็นและเข้าถึงได้ภายใน data attributes เพราะเทคโนโลยี ช่วยเหลือ บางครั้งไม่เข้าถึงพวกเขา ตัวรวบรวมข้อมูลของเครื่องมือค้นหา อาจ ไม่จัดทำดัชนีค่า data attributes — ดังนั้นอย่าใส่เนื้อหา SEO สำคัญที่นี่