รู้จักกับ Element (อิลิเมนต์)

HTML Elements

หนึ่ง HTML Element จะประกอบด้วย Tag เปิดและปิดเสมอ ที่มีเนื้อหาต่างๆ อยู่ระหว่าง Tag

<tagname>...เนื้อหา...</tagname>

จากตัวอย่าง HTML Element คือ ทุกอย่างตั้งแต่เปิด Tag ไปจนถึงปิด Tag

<p>ย่อหน้าแรก</p> 

 มีบาง Element ที่ไม่มีการปิด Tag ซึ่งเรียกว่า Empty Element เช่น <br> (คำสั่งเว้นบรรทัด)

Nested HTML Elements

HTML Elements สามารถอยู่ซ้อนกันได้ (ภายใน Element สามารถมี Element อื่นๆ ได้)

ทุกๆ เอกสาร HTML จะประกอบด้วย HTML Elements ซ้อนๆ กันทั้งสิ้น

ตัวอย่าง

<!DOCTYPE html>
<html>
<body>
<h1>This is header</h1>
<p>This is paragraph</p>
</body>
</html>
 


อธิบายตัวอย่าง

  • <html> Element ระบุว่าทั้งหมดในนี้เป็น HTML
  • เอกสาร HTML จะมีเปิด Tag ด้วย <html> และปิด Tag ด้วย </html> เสมอ
  • เนื้อหาส่วนแสดงผลจะอยู่ใน HTML Element <body>
<html>
<body>
<h1>This is header</h1>
<p>This is paragraph</p>
</body>
</html>

 

  • <body> Element ระบุว่านี่เป็นส่วนของเนื้อหาที่ไว้แสดงผล
  • เริ่มต้นด้วยการเปิด Tag <body> และปิดด้วย Tag </body> เสมอ
  • Element ระบุรูปแบบการแสดงผลจะอยู่ใน Tag <h1> และ <p>
<body>
<h1>This is header</h1>
<p>This is paragraph</p>
</body>
 
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX


  • <h1> Element ระบุว่านี่ก็ส่วนหัวข้อ
  • เริ่มต้นด้วยการเปิด Tag <h1> และปิดด้วย Tag </h1>
  • เนื้อหาของ Element คือ This is header
<h1>This is header</h1>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

  • <p> Element ระบุว่านี่ก็ส่วนย่อหน้า
  • เริ่มต้นด้วยการเปิด Tag <p> และปิดด้วย Tag </p>
  • เนื้อหาของ Element คือ This is paragraph
<p>This is paragraph</p>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

อย่าลืมปิด Tag

แม้บางครั้งการลืมปิด Tag HTML Elements ก็ยังสามารถแสดงผลได้ถูกต้อง แต่คุณก็ไม่ควรลืม เพราะส่วนใหญ่มันจะแสดงผลผิดพลาด

ตัวอย่าง

<html>
<body>
<h1>This is header
<p>This is paragraph
</body>
</html> 
 


Empty HTML Elements

HTML Elements ที่ไม่มีเนื้อหาเราเรียกว่า Empty Elements

<br> คือ Empty Element ที่ไม่มีการปิด Tag (ใช้ระบุการเว้นบรรทัด)

Empty Element สามารถปิด Tag ได้ด้วยการปิดใน Tag เปิด แบบนี้ <br/>

HTML5 ไม่จำเป็นจะต้องปิด Tag Empty Element แต่ถ้าคุณต้องการเคร่งครัดความถูกต้อง หรือถ้าคุณต้องการแน่ใจว่ามันสามารถอ่านได้ใน XML parsers คุณต้องปิดทุกๆ Element

ใช้ Tags ตัวพิมพ์เล็ก

แม้ว่าใน HTML5 การใช้ Tags ตัวพิมพ์เล็กหรือตัวพิมพ์ใหญ่ไม่มีผลอะไรต่อการแสดงผล แต่คุณก็ควรจะใช้ตัวพิมพ์เล็กไว้ เพื่อการแสดงผลในประเภทเอกสารอื่นๆ เช่น XHTML

แสดงความคิดเห็น

0ความคิดเห็น

แสดงความคิดเห็น (0)