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 สี่รายการ ( <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> กำหนดข้อความย่อหน้า
มี 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