The Structure of HTML

โครงสร้างของ HTML

ส่วนประกอบของ HTML

HTML ประกอบด้วย Element ต่างๆ ใช้สําหรับจัดรูปแบบข้อความ ด้านล่างคือตัวอย่างการใช้งานของ Element ในการจัดย่อหน้าข้อความทั่วไป

<p>This paragraph is part of my content</p>

ประโยคตัวอย่างนี้ ("This paragraph is part of my content") ได้ถูกเขียนระหว่าง Element <p> และ </p> ซึ่งต่อไปนี้ เราจะเรียกว่า tag ทุกๆ tag จะประกอบด้วย วงเล็บและสัญลักษณ์ตัวย่อ <...> ในที่นี้ p เป็นสัญลักษณ์ตัวย่อ มีความหมายว่าเป็นการจัดย่อหน้าข้อความ เมื่อนำ tag <p> และ </p> มารวมกัน เราจะเรียกว่าเป็น 1 Element เพราะฉะนั้นทุกๆ Element จะเริ่มต้นด้วย tag เริ่มต้น (ในที่นี้คือ <p>) และจบด้วย tag จบ (ในที่นี้คือ </p>) ระหว่าง tag ก็จะเป็นข้อความที่เราต้องการจะแสดงผล

Empty Elements (Element เปล่าๆ)

Element ส่วนใหญ่จะมีลักษณะดังนี้ <p></p> อย่างไรก็ตาม HTML ก็มี Element ลักษณะพิเศษอยู่อีกชนิดนึง เรียกว่า Empty Elements (Element เปล่าๆ) เช่น line-break element หรือเรียกว่าการขึ้นบรรทัดใหม่ ดังตัวอย่างด้านล่าง

<br />

ดังที่เห็นข้างต้น จะไม่มี tag จบ และไม่มีข้อความที่เราต้องการจะแสดงผล เพราะฉะนั้นเราจึง เรียกว่า Empty Elements (Element เปล่าๆ) Empty Elements จะจบที่ tag เริ่มต้นเลยโดยการใช้ "/"

เคล็ดลับ!

เว็บเบราว์เซอร์จะอ่านและแปลข้อมูลของ tag ใน HTML5 โดยไม่คำนึงว่าจะเป็นอักษรตัวใหญ่หรือตัวเล็ก แต่นักพัฒนา software บางคนจะให้ความสนใจกับสิ่งนี้และเห็นว่าป็นสิ่งสำคัญ ดังตัวอย่างด้านล่าง

<BR />
<bR />
<Br />
<br />

ในทางปฎิบัติควรจะเขียนเป็นอักษรตัวเล็กทั้งหมด เพื่อที่จะได้อ่านได้ง่ายและฝึกให้คุ้นเคยกับการเขียน tag

สรุป

• HTML Element จะเริ่มต้นด้วย tag เริ่มต้น
• HTML Element จะจบด้วย tag จบ
• HTML Element จะเริ่มต้นด้วย < และจบด้วย >
• อักษรระหว่าง < และ > คือ สัญลักษณ์ตัวย่อ
• ข้อความที่เราต้องการจะแสดงผล จะเขียนระหว่าง tag เริ่มต้น และ tag จบ
• HTML Element บางชนิดจะเป็น Empty Elements (Element เปล่าๆ)
• Empty Elements จะจบที่ tag เริ่มต้นเลย
• ในทางปฎิบัติเขียนเป็นอักษรตัวเล็กทั้งหมด