HTML Elements

< บทเรียนก่อนหน้า
บทเรียนถัดไป >

HTML Elements

HTML Elements ถูกกำหนดโดยแท็กเริ่มต้น เนื้อหาบางส่วน และแท็กปิดท้าย :

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

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

ตัวอย่างบางส่วนของ HTML Element :

<h1>My First Heading</h1>

<p>My first paragraph.</p>

tag เปิดเนื้อหา elementtag ปิด
<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 เปิด<mark style="background-color:#cfcfcf" class="has-inline-color has-vivid-red-color"><html></mark> และtagปิด <mark style="background-color:#cfcfcf" class="has-inline-color has-vivid-red-color"></html></mark>

จากนั้นภายใน 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

บทเรียนก่อนหน้า
บทเรียนถัดไป