HTML Attributes เป็นการใส่หรือกำหนดลักษณะพิเศษให้กับ Tag ต่างๆ โดยจะอยู่ภายใน Elements หรือ Tag โดยจะมีกฎ ดังนี้
- HTML Elements สามารถมี Attributes ได้
- Attributes จะเป็นการกำหนดข้อมูลต่างๆ เกี่ยวกับ Elements
- Attributes จะต้องถูกกำหนดใน tag เปิดของ Elements เท่านั้น
- Attributes จะมาคู่กันในรูปแบบ name/value อย่างเช่น name=”value”
href Attributes
Tag <a> จะเป็น Tag ที่เกี่ยวกับลิงก์ href จะเป็น Attributes ที่ใช้ระบุ URL หน้าเพจที่จะไป
ตัวอย่างการใช้งาน
<!DOCTYPE html>
<html>
<body>
<h2>The href Attribute</h2>
<p>Tag จะเป็น Tag ที่เกี่ยวกับลิงก์ href จะเป็น Attributes ที่ใช้ระบุ URL หน้าเพจที่จะไป:</p>
<a href="https://www.hostatom.com/">เข้าชมเว็บของ hostatom</a>
</body>
</html>คุณจะเรียนรู้เพิ่มเติมเกี่ยวกับการลิงก์ได้ในบทเรียน HTML Links
src Attribute
Tag <img> จะใช้ในกรณีที่มีการใส่ภาพลงในหน้าเพจ ส่วน src จะเป็นการระบุที่อยู่ของภาพ
ตัวอย่างการใช้งาน
<!DOCTYPE html>
<html>
<body>
<h2>The src Attribute</h2>
<p>Tag img จะใช้ในกรณีที่มีการใส่ภาพลงในหน้าเพจ ส่วน src จะเป็นการระบุที่อยู่ของภาพ:</p>
<img src="images/img_white_cat.png" width="500" height="333">
</body>
</html>สำหรับการระบุ URL ใน src Attribute มี 2 แบบ
- Absolute URL – จะเป็นการลิงก์ไปยังรูปที่อยู่ภายนอกโฮสติ้งที่ใช้งานอยู่ หรือลิงก์ไปยังเว็บไซต์อื่น เช่น src=”https://www.hostatom.com/wp-content/uploads/2024/09/banner-header-web-hosting-new.webp“
หมายเหตุ การนำรูปมาใช้นั้นอาจต้องระวังเรื่องลิขสิทธิ์ และเมื่อคุณใช้ภาพที่มาจากเว็บไซต์อื่น คุณจะไม่สามารถควบคุมคุณภาพของรูปรวมไปถึง ภาพถูกลบหรือถูกเปลี่ยนได้
- Relative URL – เป็นการลิงก์ภาพที่อยู่ภายในโฮสติ้งที่เว็บไซต์ใช้งานอยู่ ซึ่ง URL ในที่นี้จะไม่รวมกับชื่อโดเมน ถ้า URL เริ่มต้นโดยไม่มีเครื่องหมาย “/” นั่นหมายถึง จะเป็นการเรียกใช้ไฟล์ โดยการเรียกจากชื่อโดเมน แล้วต่อด้วย Path ที่ใส่ใน src เช่น src=”img_white_cat.png” แต่ถ้ามีเครื่องหมาย “/” หน้า URL หมายถึง จะเป็นการเรียกใช้ไฟล์จากที่อยู่ไฟล์ปัจจุบัน เช่น src=”/images/img_white_cat.png”
เคล็ดลับ: วิธีืที่ดีที่สุดในการระบุ URL ของภาพ แนะนำให้ใช้วิธีที่ 2 Relative URL เพราะหากมีการเปลี่ยนชื่อโดเมนไฟล์ภาพก็จะยังไม่หายหรือพัง
width and height Attributes
ภายใต้ Tag <img> จะมีการระบุความสูงและความกว้างของภาพ (ขนาดเป็น Pixel)
โดยจะใช้ Attributes width และ height
ตัวอย่างการใช้งาน
<!DOCTYPE html>
<html>
<body>
<h2>Width and Height Attributes</h2>
<p>Width กับ Height เป็น Attributes ของ img Tag</p>
<p>ใช้ระบุความสูงและความกว้างของภาพ</p>
<img src="images/img_white_cat.png" width="500" height="333">
</body>
</html>alt Attribute
alt ถือว่าเป็น Attributes ที่สำคัญสำหรับ Tag <img> โดยจะเป็นข้อความ หรือ คำอธิบายสำหรับรูปภาพ ซึ่ง Attributes alt จะช่วยให้ทราบว่าสาเหตุที่รูปไม่แสดงเกิดจากอะไร เช่น ไฟล์ภาพหายไป หรือการเชื่อมต่ออินเตอร์ที่ใช้เวลานาน หรือชื่อไฟล์ผิด เป็นต้น
ตัวอย่างการใช้งาน
<!DOCTYPE html>
<html>
<body>
<h2>The alt Attribute</h2>
<p>Attribute alt จะเป็นข้อความ หรือคำอธิบายสำหรับรูปภาพ</p>
<img src="images/img_white_cat.png" alt="Cute Kitty" width="507" height="333">
</body>
</html>ตัวอย่างในกรณีที่หาภาพไม่พบ
<!DOCTYPE html>
<html>
<body>
<img src="pict-for-html.png" alt="Cute Kitty">
<p>ในกรณีที่ภาพมีปัญหาหรือใช้งานไม่ได้</p>
<p>ค่า alt จะถูกแสดงแทน</p>
</body>
</html>
style Attribute
Attribute style ใช้สำหรับเพิ่มรูปแบบให้กับ Elements อย่างเช่น สี, รูปแบบตัวอักษร, ขนาด และอื่นๆ
ตัวอย่างการใช้งาน
<!DOCTYPE html>
<html>
<body>
<h2>The style Attribute</h2>
<p>Attribute style ใช้เพิ่มรูปแบบให้กับ Elements อย่างเช่น สี, รูปแบบตัวอักษร, ขนาด และอื่นๆ</p>
<p style="color:red;">ข้อความนี้สีแดง</p>
</body>
</html>
lang Attribute
Attribute lang จะเป็นการระบุภาษาที่ใช้ในหน้าเว็บ ว่าเป็นภาษาอะไร โดยจะอยู่ใน Tag <html>
ตัวอย่างการระบุให้หน้า HTML เป็นภาษาอังกฤษ
<!DOCTYPE html>
<html lang="en">
<body>
...
</body>
</html>Attribute lang สามารถใช้รหัสประเทศแทนก็ได้นะคะ ซึ่งรหัสจะประกอบด้วยตัวอักษร 2 แรกของชื่อภาษา และ ตัวอักษร 2 ตัวของชื่อประเทศ
ตัวอย่างการระบุเป็นภาษาอังกฤษ ของประเทศสหรัฐอเมริกา
<!DOCTYPE html>
<html lang="en-US">
<body>
...
</body>
</html>title Attribute
Attribute title เป็นคำอธิบายของข้อความ โดยที่เมื่อเอาเมาส์ไปวางไว้ที่ข้อความ title ที่สร้างไว้ก็จะแสดง
ตัวอย่างการใช้งาน
<!DOCTYPE html>
<html>
<body>
<h2 title="แสดงข้อความของ Header">The title Attribute</h2>
<p title="แสดงข้อความของ Title">เมื่อเอาเมาส์ไปวางไว้ที่ข้อความ title ที่สร้างไว้ก็จะแสดง</p>
</body>
</html>
แนะนำ: เวลาพิมพ์ Attributes ให้ใช้ตัวพิมพ์เล็กทั้งหมด
ปกติแล้ว มาตรฐานของ HTML จะไม่พิมพ์ชื่อ Attributes ด้วยตัวพิมพ์เล็ก แต่ทว่า Attribute title รวมไปถึง Attributes อื่นๆ ทั้งหมด จะใช้ตัวอักษรพิมพ์เล็กหรือพิมพ์ใหญ่ก็ได้ เช่น title หรือ TITLE ก็สามารถใช้ได้เหมือนกัน
แต่แนะนำให้ใช้ตัวพิมพ์เล็กจะดีกว่า เพราะบางโปรแกรมอย่าง XHTML นั้นเวลาพิมพ์ Attributes จะต้องใช้ตัวพิมพ์เล็กเพียงอย่างเดียวเท่านั้น
แนะนำ: ค่าของ Attributes จะต้องอยู่ใน ” ” (Quote) เสมอ
ตามมาตรฐานของ HTML ค่าของ Attributes ไม่จำเป็นจะต้องอยู่ใน ” ” แต่อย่างไรก็ตาม แนะนำให้ใส่ไว้ใน ” ” จะดีกว่า เพราะบางโปรแกรมอย่าง XHTML นั้น
เวลาใส่ค่า Attributes จะต้องอยู่ใน ” ” หรือ Quote เสมอ
ตัวอย่างการเขียน Attributes ที่ดี
<a href="https://www.hostatom.com/">โฮสอะตอมบริการ Web Hosting ที่ดีที่สุด</a>ตัวอย่างการเขียน Attributes ที่ไม่ดี
<a href=https://www.hostatom.com/>โฮสอะตอมบริการ Web Hosting ที่ดีที่สุด</a>บางครั้งก็ต้องใช้เครื่องหมาย ” ” จากตัวอย่างด้านล่างนี้ Attribute title จะไม่แสดง นั่นก็เพราะว่าข้อความใน title มีช่องว่าง
ตัวอย่างที่ไม่ใส่ ” ” หรือ Quote
<!DOCTYPE html>
<html>
<body>
<h1>การใช้งาน Quote</h1>
<p title=การใช้งาน Quote>
อย่าลืมใส่ Quote ในกรณีที่มีการเว้นวรรคข้อความ
</p>
<p><b>
ในกรณีนี้ หากไม่ใส่ Quote
เมื่อเอาเมาส์ไปวางที่ข้อความ จะแสดงแค่ข้อความแรกเท่านั้น
</b></p>
</body>
</html>
จะใช้ Quotes แบบเดี่ยว หรือแบบคู่?
Quotes แบบเดี่ยว คือ “ข้อความ“
Quotes แบบคู่ คือ ‘ข้อความ “ข้อความ“ ข้อความ‘
ซึ่งตามปกติแล้วใน HTML ค่า Attributes จะใส่ Quotes แบบคู่ แต่ Quotes แบบเดี่ยว ก็สามารถใช้ได้เหมือนกัน
ตัวอย่างการใช้งาน Quotes แบบคู่
<p title='John "ShotGun" Nelson'>หรือจะสลับที่ Quotes
<!DOCTYPE html>
<html>
<body>
<h2>Quotes แบบเดี่ยว หรือแบบคู่</h2>
<p>ในบางที หากค่า Attribute เป็นแบบ Quotes แบบคู่ อาจต้องใช้ Quotes แบบเดี่ยว:</p>
<p>นำเมาส์ไปวางไว้เหนือข้อความด้านล่างเพื่อดูความแตกต่าง</p>
<p title='John "ShotGun" Nelson'>John with double quotes</p>
<p title="John 'ShotGun' Nelson">John with single quotes</p>
</body>
</html>
สรุป
- Elements ของ HTML ทั้งหมด สามารถมี Attributes ได้
- Attribute href ของ <a> จะใช้เพื่อระบุ URL ของเพจที่ต้องการจะลิงก์ไป
- Attribute src ของ <img> จะใช้เพื่อระบุ Path ของรูปที่ต้องการแสดง
- Attribute width และ height ของ <img> จะใช้เพื่อระบุขนาดของรูปภาพ
- Attribute alt ของ <img> จะใช้เพื่อแสดงคำอธิบายของรูปภาพ
- Attribute style จะใช้เพื่อเพิ่มรูปแบบให้กับ Elements อย่างเช่น สี, รูปแบบตัวอักษร, ขนาด และอื่นๆ
- Attribute lang ของ <html> จะใช้เพื่อระบุภาษาที่ใช้ในหน้าเว็บ
- Attribute title จะใช้เพื่อบอกข้อมูลที่สำคัญของ Element