HTML Tag, HTML Elements, HTML Attributes ต่างกันยังไง

มาดูความแตกต่างระหว่าง HTML Tag, HTML Element และ HTML Attributes กันดีกว่าครับ ว่ามันแตกต่างกันยังไง ซึ่งถ้าฟังดูแรก ๆ อาจจะสับสนระหว่างคำพวกนี้นี้

HTML Tag

ในการใช้ภาษา HTML นั้นเราจะรู้แล้วว่าถ้าเราต้องการจะทำ header แล้วเราสามารถใช้ <h1> <h2> <h3> .. ไปเรื่อย ๆ ได้ ซึ่งพวกนี้เราจะเรียกว่า Tag ซึ่งบางแท็กก็จะมีแท็กเปิด เช่น <h1> และก็มีแท็กปิดเช่น </h1> แต่บางแท็กก็ไม่จำเป็นต้องมีแท็กปิด เช่น <br />

HTML Element

HTML Element จะถูกกำหนดโดยการเปิดแท็ก และถ้าแท็กนั้นมีข้อมูลอยู่ก็จะมีแท็กปิด แต่บางแท็กไม่จำเป็นต้องมีแท็กปิด แต่เราจะเขียนโดยมีเครื่องหมายสแลชเพื่อเป็นการบอกว่ามีการปิดแท็กแล้ว มาดูตัวอย่างโค้ดกัน ตามด้านล่าง

<p>This is paragraph content.</p>
<h1>This is heading content.</h1>
<div>This is division content.</div>
<br />

จากตัวอย่างโค้ดเราจะเห็น <p>...</p> ซึ่งเราจะเรียกว่า HTML Element และ <h1>...</h1> ก็เป็นอีกหนึ่ง HTML Element และบาง Html Element ก็ไม่จำเป็นต้องมีแท็กปิด

HTML Attributes

ถ้าเราแปลคำว่า Attributes ให้เป็นภาษาไทยเราจะแปลได้ว่าคุณสมบัติ ซึ่งถ้าเปรียบเทียบกับ HTML Attributes ก็คือการเพิ่มคุณสมบัติให้กับ HTML นั่นเอง ซึ่งปกติถ้าเราใช้แท็กแบบไม่ใส่ Attributes ก็จะเป็นการใช้แบบปกติทั่วไป แต่เรายังสามารถใส่คุณสมบัติต่าง ๆ ตามต้องการให้กับ HMTL ได้

ในการกำหนด Attributes ให้กับ HTML นั้นจะมีส่วนประกอบอยู่ 2 อย่างนั่นคือ name กับ value ซึ่ง name จะเป็นการบอกว่าให้ใส่คุณสมบัติอะไร ส่วน value จะเป็นการบอกว่าให้คุณบัตินั้นเป็นแบบไหน เรามาดูตัวอย่างโค้ดกันดครับ

<p align="left">This is left aligned</p>
<p align="center">This is center aligned</p>
<p align="right">This is right aligned</p>

จากตัวอย่างโค้ดจะเห็นว่า เราจะใส่คุณสมบัติ align ซึ่งเป็นการกำหนดตำแหน่งให้กับแท็ก <p> ซึ่งมีค่า left center right ตามต้องการ ซึ่งถ้าดูแล้ว align ก็คือ name ส่วน left center right ก็คือ value ของ name นั่นเอง