องค์ประกอบ HTML

เอกสาร HTML จะทำขึ้นโดยองค์ประกอบ HTML

ในไวยากรณ์ HTML องค์ประกอบส่วนใหญ่จะเขียนด้วยแท็กเริ่มต้นและแท็กสิ้นสุดที่มีเนื้อหาในระหว่าง แท็ก HTML ประกอบด้วยชื่อขององค์ประกอบที่ล้อมรอบด้วยวงเล็บมุม แท็กสิ้นสุดนอกจากนี้ยังมีการเฉือนหลังจากวงเล็บมุมเปิดแตกต่างจากแท็กเริ่มต้น

องค์ประกอบ HTML

องค์ประกอบ HTML เขียนด้วยแท็กเริ่มต้นที่มีแท็กสิ้นสุดที่มีเนื้อหาในระหว่าง:

<tagname>content</tagname>

องค์ประกอบ HTML ที่เป็นทุกอย่างจากแท็กเริ่มต้นไปยังแท็กสิ้นสุด:

<p> วรรค HTML แรกของฉัน </p>

แท็กเริ่มต้น	เนื้อหาธาตุ	แท็กสิ้นสุด
<h1>	หัวเรื่องแรกของฉัน	</h1>
<p>	วรรคแรกของฉัน	</p>
<br>

บางองค์ประกอบ HTML ไม่ได้มีแท็กสิ้นสุด

ซ้อนองค์ประกอบ HTML

องค์ประกอบ HTML สามารถซ้อนกัน (elements can contain elements)

เอกสาร HTML ทั้งหมดประกอบด้วยองค์ประกอบ HTML ซ้อนกัน

ตัวอย่างนี้มี 4 องค์ประกอบ HTML:

ตัวอย่าง

<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>

ลองตัวเอง»

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

<html> องค์ประกอบที่กำหนดเอกสารทั้งหมด

แต่ก็มีแท็กเริ่มต้น <html> และแท็กสิ้นสุด </html>

เนื้อหาองค์ประกอบคือองค์ประกอบ HTML อื่น (the <body> element)

<html>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>

<body> องค์ประกอบที่กำหนดตัวเอกสาร

แต่ก็มีแท็กเริ่มต้น <body> และแท็กสิ้นสุด </body>

เนื้อหาองค์ประกอบสององค์ประกอบ HTML อื่น ๆ ( <h1> and <p> )

<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>

<h1> องค์ประกอบกำหนดหัวข้อ

แต่ก็มีแท็กเริ่มต้น <h1> และแท็กสิ้นสุด </h1>

เนื้อหาองค์ประกอบคือหัวเรื่องแรกของฉัน

<h1>My First Heading</h1>

<p> องค์ประกอบที่กำหนดย่อหน้า

แต่ก็มีแท็กเริ่มต้น <p> และแท็กสิ้นสุด </p>

เนื้อหาองค์ประกอบ: วรรคแรกของฉัน

<p>My first paragraph.</p>

อย่าลืมแท็กสิ้นสุด

บางองค์ประกอบ HTML จะแสดงอย่างถูกต้องแม้ว่าคุณจะลืมแท็กสิ้นสุด:

ตัวอย่าง

<html>
<body>

<p>This is a paragraph
<p>This is a paragraph

</body>
</html>

ลองตัวเอง»

ตัวอย่างข้างต้นทำงานในเบราว์เซอร์ทั้งหมดเพราะแท็กปิดที่ถือว่าเป็นตัวเลือก

ไม่เคยพึ่งพานี้ มันอาจจะก่อให้เกิดผลที่ไม่คาดคิดและ / หรือข้อผิดพลาดหากคุณลืมแท็กสิ้นสุด