HTML Elements
โดยทั่วไป HTML Elements ถูกกำหนดโดยแท็กเริ่มต้น เนื้อหาบางส่วน และแท็กปิดท้าย
<tagname> เนื้อหา </tagname>
อธิบาย: จากตัวอย่าง HTML Element คือ ทุกอย่างตั้งแต่เปิด Tag ไปจนถึงปิด Tag
ตัวอย่างบางส่วนของ HTML Element :
<h1> My First Heading </h1>
<p> My first paragraph. </p>
| Tag เริ่มต้น | เนื้อหา Element | Tag ปิด |
|---|---|---|
| <h1> | My First Heading | </h1> |
| <p> | My first paragraph. | </p> |
| <br> | ไม่มี | ไม่มี |
📝 หมายเหตุ
HTML Element บางตัวไม่มีเนื้อหา ( เช่น Element <br> ) Element เหล่านี้เรียกว่า Empty Element จะไม่มี Tag ปิดท้าย
HTML Elements ที่ซ้อนกัน
HTML Elements สามารถซ้อนกันได้ (ใน Element สามารถมี Element อื่น ๆ ได้) เอกสาร HTML ทั้งหมดประกอบด้วยองค์ประกอบ HTML ที่ซ้อนกัน
ตัวอย่างต่อไปนี้ประกอบด้วยองค์ประกอบ HTML หลัก 4 รายการ (
<html>, <body>, <h1> และ <p>) ตัวอย่าง
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
อธิบายตัวอย่าง
Element
<html> เป็นตัวระบุว่าเอกสารเป็น HTML ทั้งหมด
มี Tag เปิด
<html> และ Tag ปิด </html>
จากนั้นภายใน Element <html> จะมี Element <body>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
Element <body> เป็นส่วนที่บอกถึงเนื้อหาภายในที่จะแสดงผลหน้าเว็บ โดยจะมี Tag เปิด <body> และ Tag ปิด </body> เสมอ
จากนั้นภายใน Element <body> จะมี Element อื่นอีก 2 Element คือ <h1> และ <p>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
Element <h1> ส่วนหัวเรื่อง มี Tag เปิด <h1> และ Tag ปิด </h1>
<h1>My First Heading</h1>
Element <p> ส่วนย่อหน้า (paragraph) มี Tag เปิด <p> และ Tag ปิด </p>
<p>My first paragraph.</p>
อย่าลืม Tag ปิด
ถึงแม้ว่าการลืมใส่ Tag ปิด จะไม่มีผลต่อการแสดงผลบนหน้าเว็บ แต่ก็ไม่ควรลืมใส่ เพราะหลายครั้งอาจทำให้แสดงผลผิด
<!DOCTYPE html>
<html>
<body>
<h1>This is header
<p>This is a paragraph.
</body>
</html>
Empty HTML Elements
Element ที่ไม่มีเนื้อหาเราจะเรียกมันว่า Empty Element เช่น Tag
<br> ใช้สำหรับแบ่งบรรทัดเป็น Empty Element ไม่ต้องปิด Tag
ตัวอย่าง
<p>This is a <br> paragraph with a line break.</p>
การพิมพ์ Tag
โดยปกติเราสามารถพิมพ์ Tag ได้ทั้งตัวพิมพ์เล็กและใหญ่ เช่น
<p> หรือ <P> แต่บางเอกสารก็จะเคร่งใช้ได้เฉพาะ Tag ที่เป็นตัวพิมพ์เล็ก อย่างเช่น เอกสาร XHTML