HTML Attributes

< บทเรียนก่อนหน้า
บทเรียนถัดไป >

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> จะใช้ในกรณีที่มีการใส่ภาพลงในหน้าเพจ ส่วน <scr> จะเป็นการระบุที่อยู่ของภาพ

ตัวอย่างการใช้งาน

<!DOCTYPE html>
<html>
<body>

<h2>The src Attribute</h2>
<p>tag img จะใช้ในกรณีที่มีการใส่ภาพลงในหน้าเพจ ส่วน scr จะเป็นการระบุที่อยู่ของภาพ:</p>

<img src="https://kb.hostatom.com/wp-content/uploads/2022/11/pict-for-html.png" width="500" height="333">

</body>
</html>

รูปแบบที่แสดง

html-src-attributes

สำหรับการระบุ URL ใน scr attribute มี 2 แบบ

  1. Absolute URL – จะเป็นการลิงก์ไปยังรูปที่อยู่ภายนอกโฮสติ้งที่ใช้งานอยู่ หรือลิงก์ไปยังเว็บไซต์อื่น เช่น src=”https://kb.hostatom.com/wp-content/uploads/2022/11/pict-for-html.png”

    หมายเหตุ การนำรูปมาใช้นั้นอาจต้องระวังเรื่องลิขสิทธิ์ด้วยนะคะ และเมื่อคุณใช้ภาพที่มาจากเว็บไซต์อื่น คุณจะไม่สามารถควบคุมคุณภาพของรูปรวมไปถึง ภาพถูกลบหรือถูกเปลี่ยนได้
  1. Relative URL – เป็นการลิงก์ภาพที่อยู่ภายในโฮสติ้งที่เว็บไซต์ใช้งานอยู่ ซึ่ง URL ในที่นี้จะไม่รวมกับชื่อโดเมน ถ้า URL เริ่มต้นโดยไม่มีเครื่องหมาย “/” นั่นหมายถึง จะเป็นการเรียกใช้ไฟล์ โดยการเรียกจากชื่อโดเมน แล้วต่อด้วย path ที่ใส่ใน src เช่น src=”pict-for-html.png” แต่ถ้ามีเครื่องหมาย “/” หน้า URL หมายถึง จะเป็นการเรียกใช้ไฟล์จากที่อยู่ไฟล์ปัจจุบัน เช่น src=”/images/pict-for-html.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="https://kb.hostatom.com/wp-content/uploads/2022/11/pict-for-html.png" width="500" height="333">

</body>
</html>

รูปแบบที่แสดง

html-width-height-attribute

alt Attribute

alt ถือว่าเป็น attributes ที่สำคัญสำหรับ tag <img> โดยจะเป็นข้อความ หรือ คำอธิบายสำหรับรูปภาพ ซึ่ง attributes alt จะช่วยให้ทราบว่าสาเหตุที่รูปไม่แสดงเกิดจากอะไร เช่นไฟล์ภาพหายไป หรือการเชื่อมต่ออินเตอร์ที่ใช้เวลานาน หรือชื่อไฟล์ผิด เป็นต้น

ตัวอย่างการใช้งาน

<!DOCTYPE html>
<html>
<body>

<h2>The alt Attribute</h2>
<p>attribute alt โดยจะเป็นข้อความ หรือคำอธิบายสำหรับรูปภาพ</p>

<img src="https://kb.hostatom.com/wp-content/uploads/2022/11/pict-for-html.png" alt="Cute Kitty" width="507" height="333">

</body>
</html>

รูปแบบที่แสดง

html-alt-attribute

ตัวอย่างในกรณีที่หาภาพไม่พบ

<!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>อย่างเช่น สี, รูปแบบตัวอักษร, ขนาด และอื่นๆ</p>

<p style="color:red;">ข้อความนี้สีแดง</p>

</body>
</html>
html-style-attribute

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>The title Attribute</h2>

<p title="แสดงข้อความของ Title">เมื่อเอาเมาส์ไปวางไว้ที่ข้อความ title ที่สร้างไว้ก็จะแสดง</p>

</body>
</html>
html-title-attribute

แนะนำ: เวลาพิมพ์ 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>
อย่าลืมใส่ quite ในกรณีที่มีการเว้นวรรข้อความ 
</p>

<p><b>
แต่ในกรณีนี้ หากไม่ใส่ Quote
เมื่อเอาเมาส์ไปวางที่ข้อความ จะแสดงแค่ข้อความแรกเท่านั้น
</b></p>

</body>
</html>
html-quote-attribute

จะใช้ 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>
html-quote-attribute-1

สรุป

  • 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
< บทเรียนก่อนหน้านี้
บทเรียนถัดไป >