แอตทริบิวต์ HTML
แอตทริบิวต์ HTML ให้ข้อมูลเพิ่มเติมเกี่ยวกับองค์ประกอบ HTML
แอตทริบิวต์ HTML
- องค์ประกอบ HTML ทั้งหมดสามารถมีแอตทริบิวต์ ได้
- คุณสมบัติให้ข้อมูลเพิ่มเติมเกี่ยวกับองค์ประกอบ
- แอตทริบิวต์ระบุไว้ในแท็กเริ่มต้น เสมอ
- แอตทริบิวต์มักจะมาในคู่ชื่อ/ค่าเช่น: name="value"
แอตทริบิวต์ href
แท็ ก<a>กำหนดไฮเปอร์ลิงก์ แอตทริบิวต์
hrefระบุ URL ของหน้าที่ลิงก์ไปที่:
ตัวอย่าง
<a href="https://www.w3schools.com">Visit W3Schools</a>
คุณจะได้เรียนรู้เพิ่มเติมเกี่ยวกับลิงก์ในบทลิงก์ HTMLของ เรา
แอตทริบิวต์ src
แท็ ก<img>ใช้เพื่อฝังรูปภาพในหน้า HTML แอตทริบิวต์srcระบุเส้นทางไปยังภาพที่จะแสดง:
ตัวอย่าง
<img src="img_girl.jpg">
มีสองวิธีในการระบุ URL ในsrc
แอตทริบิวต์:
1. Absolute URL - ลิงค์ไปยังรูปภาพภายนอกที่โฮสต์บนเว็บไซต์อื่น ตัวอย่าง: src="https://www.w3schools.com/images/img_girl.jpg "
หมายเหตุ:รูปภาพภายนอกอาจอยู่ภายใต้ลิขสิทธิ์ หากคุณไม่ได้รับอนุญาตให้ใช้ คุณอาจกำลังละเมิดกฎหมายลิขสิทธิ์ นอกจากนี้ คุณไม่สามารถควบคุมภาพภายนอกได้ มันสามารถลบออกหรือเปลี่ยนแปลงได้ทันที
2. Relative URL - ลิงค์ไปยังรูปภาพที่โฮสต์ภายในเว็บไซต์ ที่นี่ URL ไม่รวมชื่อโดเมน หาก URL เริ่มต้นโดยไม่มีเครื่องหมายทับ URL นั้นจะสัมพันธ์กับหน้าปัจจุบัน ตัวอย่าง: src="img_girl.jpg". หาก URL ขึ้นต้นด้วยเครื่องหมายทับ URL จะสัมพันธ์กับโดเมน ตัวอย่าง: src="/images/img_girl.jpg"
เคล็ดลับ:เป็นการดีที่สุดที่จะใช้ URL ที่เกี่ยวข้องกัน จะไม่แตกถ้าคุณเปลี่ยนโดเมน
คุณสมบัติความกว้างและความสูง
แท็ ก<img>ควรมี
แอตทริบิวต์ widthและ
heightซึ่งระบุความกว้างและความสูงของรูปภาพ (เป็นพิกเซล):
ตัวอย่าง
<img src="img_girl.jpg" width="500" height="600">
แอตทริบิวต์ alt
altแอตทริบิวต์ที่จำเป็น สำหรับ <img>
แท็กระบุข้อความสำรองสำหรับรูปภาพ หากไม่สามารถแสดงรูปภาพด้วยเหตุผลบางประการได้ ซึ่งอาจเกิดจากการเชื่อมต่อช้า หรือข้อผิดพลาดในsrcแอตทริบิวต์ หรือหากผู้ใช้ใช้โปรแกรมอ่านหน้าจอ
ตัวอย่าง
<img src="img_girl.jpg" alt="Girl
with a jacket">
ตัวอย่าง
ดูว่าเกิดอะไรขึ้นถ้าเราพยายามแสดงภาพที่ไม่มีอยู่:
<img src="img_typo.jpg" alt="Girl
with a jacket">
คุณจะได้เรียนรู้เพิ่มเติมเกี่ยวกับรูปภาพในบท HTML Imagesของ เรา
แอตทริบิวต์สไตล์
คุณลักษณะstyleนี้ใช้เพื่อเพิ่มสไตล์ให้กับองค์ประกอบ เช่น สี แบบอักษร ขนาด และอื่นๆ
ตัวอย่าง
<p style="color:red;">This is a red paragraph.</p>
คุณจะได้เรียนรู้เพิ่มเติมเกี่ยวกับสไตล์ในบทสไตล์ HTMLของ เรา
แอตทริบิวต์ lang
คุณควรใส่langแอตทริบิวต์ไว้ใน<html>แท็กเสมอ เพื่อประกาศภาษาของหน้าเว็บ มีขึ้นเพื่อช่วยเหลือเครื่องมือค้นหาและเบราว์เซอร์
ตัวอย่างต่อไปนี้ระบุภาษาอังกฤษเป็นภาษา:
<!DOCTYPE html>
<html lang="en">
<body>
...
</body>
</html>
นอกจากนี้ยังเพิ่มรหัสประเทศลงในรหัสภาษาในlang
แอตทริบิวต์ได้อีกด้วย ดังนั้น อักขระสองตัวแรกกำหนดภาษาของหน้า HTML และอักขระสองตัวสุดท้ายกำหนดประเทศ
ตัวอย่างต่อไปนี้ระบุภาษาอังกฤษเป็นภาษาและสหรัฐอเมริกาเป็นประเทศ:
<!DOCTYPE html>
<html lang="en-US">
<body>
...
</body>
</html>
คุณสามารถดูรหัสภาษาทั้งหมดใน การอ้างอิงรหัสภาษา HTMLของ เรา
ชื่อแอตทริบิวต์
แอตทริบิวต์titleกำหนดข้อมูลเพิ่มเติมเกี่ยวกับองค์ประกอบ
ค่าของแอตทริบิวต์ title จะแสดงเป็นคำแนะนำเครื่องมือเมื่อคุณวางเมาส์เหนือองค์ประกอบ:
ตัวอย่าง
<p title="I'm a tooltip">This is a paragraph.</p>
เราแนะนำ: ใช้แอตทริบิวต์ตัวพิมพ์เล็กเสมอ
มาตรฐาน HTML ไม่ต้องการชื่อแอตทริบิวต์ตัวพิมพ์เล็ก
แอตทริบิวต์ title (และแอตทริบิวต์อื่นๆ ทั้งหมด) สามารถเขียนด้วยตัวพิมพ์ใหญ่หรือตัวพิมพ์เล็กเช่นtitleหรือTITLE
อย่างไรก็ตาม W3C แนะนำแอตทริบิวต์ตัวพิมพ์เล็กใน HTML และต้องการ แอตทริบิวต์ตัวพิมพ์เล็กสำหรับประเภทเอกสารที่เข้มงวดกว่า เช่น XHTML
ที่ W3Schools เราใช้ชื่อแอตทริบิวต์ตัวพิมพ์เล็กเสมอ
เราแนะนำ: เสนอราคาแอตทริบิวต์เสมอ
มาตรฐาน HTML ไม่ต้องการเครื่องหมายคำพูดรอบค่าแอตทริบิวต์
อย่างไรก็ตาม W3C แนะนำ ใบเสนอ ราคาในรูปแบบ HTML และต้องการใบเสนอราคาสำหรับประเภทเอกสารที่เข้มงวดกว่า เช่น XHTML
ดี:
<a href="https://www.w3schools.com/html/">Visit our HTML tutorial</a>แย่:
<a href=https://www.w3schools.com/html/>Visit our HTML tutorial</a>บางครั้งคุณต้องใช้เครื่องหมายคำพูด ตัวอย่างนี้จะไม่แสดงแอตทริบิวต์ title อย่างถูกต้อง เนื่องจากมีช่องว่าง:
ตัวอย่าง
<p
title=About W3Schools>
ที่ W3Schools เราใช้เครื่องหมายคำพูดรอบค่าแอตทริบิวต์เสมอ
คำคมเดี่ยวหรือคู่?
อัญประกาศคู่รอบค่าแอททริบิวต์มักใช้ใน HTML แต่สามารถใช้อัญประกาศเดี่ยวได้
ในบางสถานการณ์ เมื่อค่าแอตทริบิวต์เองมีเครื่องหมายคำพูดคู่ จำเป็นต้องใช้เครื่องหมายคำพูดเดี่ยว:
<p title='John "ShotGun" Nelson'>
หรือในทางกลับกัน:
<p title="John 'ShotGun' Nelson">
สรุปบท
- องค์ประกอบ HTML ทั้งหมดสามารถมีแอตทริบิวต์ ได้
- คุณลักษณะ
hrefของ<a>ระบุ URL ของหน้าที่ลิงก์ไปที่ - แอตทริบิวต์
srcระบุ<img>เส้นทางไปยังภาพที่จะแสดง widthและคุณลักษณะheightของการ<img>ให้ข้อมูลขนาดสำหรับภาพ- คุณลักษณะ
altของ<img>จัดเตรียมข้อความสำรองสำหรับรูปภาพ - คุณลักษณะ
styleนี้ใช้เพื่อเพิ่มสไตล์ให้กับองค์ประกอบ เช่น สี แบบอักษร ขนาด และอื่นๆ - แอตทริบิวต์
langของ<html>แท็กประกาศภาษาของหน้าเว็บ - แอตทริบิวต์
titleกำหนดข้อมูลเพิ่มเติมเกี่ยวกับองค์ประกอบ
แบบฝึกหัด HTML
การอ้างอิงแอตทริบิวต์ HTML
รายการแอตทริบิวต์ทั้งหมดสำหรับองค์ประกอบ HTML แต่ละรายการมีอยู่ในรายการของเรา: การอ้างอิงแอตทริบิวต์ HTML