HTML Attributes พื้นฐาน

ยินดีต้อนรับสู่บทเรียน HTML บทแรก! ในบทนี้ เราจะมาเรียนรู้เกี่ยวกับสิ่งที่เรียกว่า "HTML Attributes" ซึ่งเป็นส่วนสำคัญในการกำหนดคุณสมบัติเพิ่มเติมให้กับ elements ต่างๆ ใน HTML ของเรา ลองนึกภาพว่า HTML elements เป็นเหมือนกล่องเปล่าๆ และ attributes คือสติกเกอร์ที่เราแปะบนกล่องเหล่านั้น เพื่อบอกรายละเอียดเพิ่มเติมเกี่ยวกับกล่องนั้นๆ นั่นเอง

HTML Attributes คืออะไร?

HTML Attributes คือสิ่งที่ใช้กำหนดคุณสมบัติพิเศษให้กับ HTML elements Attributes จะถูกเขียนไว้ภายใน opening tag ของ element ในรูปแบบ attribute="value"

• attribute คือ ชื่อของ attribute
• value คือ ค่าของ attribute

ตัวอย่างเช่น:

<a href="https://www.example.com">Visit Example</a>

ในตัวอย่างนี้ href คือ attribute ที่ใช้กำหนด URL ของลิงก์ และ "https://www.example.com" คือ value ซึ่งเป็น URL ที่เราต้องการให้ลิงก์ไปยัง

Attributes พื้นฐานที่ควรรู้

เรามาดูกันว่า attributes พื้นฐานที่ควรรู้มีอะไรบ้าง ในบทนี้เราจะเน้นไปที่ class, id, style, และ title

1. Attribute ชื่อ class

class attribute ใช้เพื่อกำหนดชื่อ class ให้กับ element ซึ่งชื่อ class นี้จะถูกใช้ในการกำหนดสไตล์ (style) ให้กับ element นั้นๆ ผ่าน CSS (Cascading Style Sheets) เราสามารถกำหนดหลาย class ให้กับ element เดียวได้ โดยคั่นด้วยช่องว่าง

ตัวอย่าง:

<p class="highlight important">This is a highlighted and important paragraph.</p>

ในตัวอย่างนี้ paragraph element มี 2 class: highlight และ important CSS สามารถใช้ class เหล่านี้เพื่อกำหนดสีพื้นหลัง, ขนาดตัวอักษร, หรือคุณสมบัติอื่นๆ ให้กับ paragraph นี้ได้

ประโยชน์ของ class:

• การจัดกลุ่ม: ช่วยให้เราจัดกลุ่ม elements ที่มีลักษณะคล้ายกัน เพื่อกำหนดสไตล์ได้ง่าย
• การนำสไตล์กลับมาใช้ใหม่: สามารถนำ class ไปใช้กับ elements อื่นๆ ได้ ทำให้ไม่ต้องเขียน CSS ซ้ำๆ

ตัวอย่างการใช้งานกับ CSS (ไม่ต้องกังวลถ้ายังไม่เข้าใจ CSS เราจะเรียนรู้ในบทต่อๆ ไป):

.highlight {
  background-color: yellow;
}

.important {
  font-weight: bold;
}

โค้ด CSS ด้านบน จะทำให้ paragraph ที่มี class highlight มีพื้นหลังสีเหลือง และ paragraph ที่มี class important มีตัวอักษรเป็นตัวหนา

2. Attribute ชื่อ id

id attribute ใช้เพื่อกำหนด unique identifier (ตัวระบุที่ไม่ซ้ำกัน) ให้กับ element แต่ละตัวใน HTML document id มีประโยชน์ในการอ้างอิงถึง element นั้นๆ จาก CSS, JavaScript, หรือจากภายใน HTML เอง

ข้อควรจำ: id แต่ละตัวควรมีค่าที่ไม่ซ้ำกันในทั้งหน้า HTML

ตัวอย่าง:

<h2 id="main-heading">This is the main heading</h2>

ในตัวอย่างนี้ heading element มี id ชื่อ main-heading เราสามารถใช้ id นี้เพื่อกำหนดสไตล์ให้กับ heading หรือเพื่ออ้างอิงถึง heading จาก JavaScript

ประโยชน์ของ id:

• การอ้างอิงเฉพาะเจาะจง: ใช้เพื่อกำหนดสไตล์หรือจัดการ element ที่ต้องการได้อย่างแม่นยำ
• การทำ Anchor Links: สามารถใช้ id เพื่อสร้าง anchor links ที่นำผู้ใช้ไปยังส่วนต่างๆ ของหน้าเว็บ

ตัวอย่างการใช้งานกับ CSS (ไม่ต้องกังวลถ้ายังไม่เข้าใจ CSS เราจะเรียนรู้ในบทต่อๆ ไป):

#main-heading {
  color: blue;
}

โค้ด CSS ด้านบน จะทำให้ heading ที่มี id ชื่อ main-heading มีสีน้ำเงิน

3. Attribute ชื่อ style

style attribute ใช้เพื่อกำหนด inline styles ให้กับ element Inline styles คือ styles ที่ถูกกำหนดโดยตรงภายใน HTML element

ข้อควรระวัง: การใช้ style attribute มากเกินไป อาจทำให้โค้ด HTML ของคุณดูรกและยากต่อการแก้ไข โดยทั่วไปแล้วควรใช้ CSS files แยกต่างหากเพื่อจัดการ styles จะดีกว่า

ตัวอย่าง:

<p style="color: red; font-size: 16px;">This is a red paragraph with a font size of 16 pixels.</p>

ในตัวอย่างนี้ paragraph element มี inline styles ที่กำหนดให้สีตัวอักษรเป็นสีแดง และขนาดตัวอักษรเป็น 16 pixels

ประโยชน์ของ style (ในบางกรณี):

• Quick Fixes: ใช้สำหรับแก้ไขสไตล์เล็กๆ น้อยๆ ได้อย่างรวดเร็ว โดยไม่ต้องแก้ไข CSS files
• Dynamic Styling: สามารถใช้ร่วมกับ JavaScript เพื่อเปลี่ยนแปลงสไตล์ของ element แบบ dynamic

4. Attribute ชื่อ title

title attribute ใช้เพื่อกำหนด tooltip text (ข้อความที่แสดงเมื่อผู้ใช้นำเมาส์ไปวางเหนือ element) ให้กับ element

ตัวอย่าง:

<a href="https://www.example.com" title="Visit the Example website">Example</a>

ในตัวอย่างนี้ เมื่อผู้ใช้นำเมาส์ไปวางเหนือลิงก์ "Example" จะมี tooltip แสดงข้อความ "Visit the Example website"

ประโยชน์ของ title:

• Accessibility: ช่วยให้ผู้ใช้เข้าใจความหมายของ element ได้ง่ายขึ้น โดยเฉพาะอย่างยิ่งสำหรับ elements ที่อาจจะไม่ชัดเจน
• User Experience: ให้ข้อมูลเพิ่มเติมแก่ผู้ใช้ โดยไม่ต้องคลิกหรือทำอะไรเพิ่มเติม

สรุป

ในบทนี้ เราได้เรียนรู้เกี่ยวกับ HTML attributes พื้นฐาน 4 ตัว: class, id, style, และ title Attributes เหล่านี้เป็นเครื่องมือสำคัญในการกำหนดคุณสมบัติเพิ่มเติมให้กับ HTML elements และช่วยให้เราสร้างเว็บไซต์ที่มีโครงสร้างและสไตล์ที่สวยงามได้ ในบทต่อไป เราจะมาเรียนรู้เกี่ยวกับ Inline Elements และ Block-level Elements ซึ่งเป็นอีกหนึ่งแนวคิดพื้นฐานที่สำคัญในการสร้างโครงสร้างเว็บไซต์