Comments and neat nesting · ความคิดเห็นและการจัดวางที่เรียบร้อย
This page needs a recent browser (with SharedArrayBuffer support). Please update Chrome, Edge, Firefox or Safari to the latest version. · หน้านี้ต้องใช้เบราว์เซอร์ล่าสุด (รองรับ SharedArrayBuffer) กรุณาอัปเดต Chrome, Edge, Firefox หรือ Safari เป็นเวอร์ชันล่าสุด
English
Comments
- A comment is a note for you, not for the reader.
- The browser ignores it — it never shows on the page.
- Write it like this:
<!-- this is a comment -->.
ไทย
_heading
- Comment คือหมายเหตุสำหรับ คุณ ไม่ใช่สำหรับผู้อ่าน
- เบราว์เซอร์ ข้าม มัน — มันไม่เคยแสดงบนหน้าเว็บ
- เขียนรูปแบบดังนี้:
<!-- this is a comment -->
<!-- The header goes here -->
<h1>Welcome</h1>
<!-- TODO: add a photo below -->
English
Tags go inside tags
- HTML tags nest: one pair can sit inside another.
- A
<div>is a plain box you can put other things in. - Indent the inside tags a little, so the nesting is easy to read.
ไทย
แท็กอยู่ภายในแท็ก
- แท็ก HTML ซ้อนกัน: คู่หนึ่งสามารถอยู่ภายในอีกคู่หนึ่งได้
- ⟨
<div>⟩ เป็นกล่องธรรมดาที่คุณสามารถใส่สิ่งอื่นเข้าไปข้างในได้ - ขยับแท็กด้านในออกเล็กน้อย เพื่อให้การซ้อนอ่านง่าย
<div>
<h2>My card</h2>
<p>Some text inside the box.</p>
</div>
English
Common mistakes
- Tags must nest, not overlap:
<b><i>x</i></b>, never<b><i>x</b></i>. - A comment is
<!-- ... -->and is ignored by the browser.
ไทย
ข้อผิดพลาดที่พบบ่อย
- แท็กต้องซ้อนกัน ไม่ควรทับซ้อน: ⟨
<b><i>x</i></b>⟩ อย่าใช้ ⟨<b><i>x</b></i>⟩ - คอมเมนต์คือ
<!-- ... -->และเบราว์เซอร์จะข้ามการแสดงผลไป
English
Now you try
- Comments help you stay organised; nesting builds structure.
- Leave a comment, then nest a paragraph inside a
<div>.
ไทย
ลองดูเลย
- Comment ช่วยให้คุณจัดระเบียบ; การซ้อนสร้างโครงสร้าง
- ใส่คอมเมนต์ แล้วซ้อนย่อหน้าไว้ภายใน ⟨
<div>⟩
Explore · สำรวจ
Neat nesting = the tree · การจัดวางที่เรียบร้อย = ต้นไม้
Indentation in your HTML mirrors the parent/child tree. · การเว้นวรรคใน HTML ของคุณสะท้อนโครงสร้าง แม่/ลูก
Leave a note for yourself. Add a comment, like <!-- TODO: add a photo -->. · ทิ้งหมายเหตุไว้สำหรับตัวเอง เพิ่มคอมเมนต์ เช่น <!-- TODO: add a photo -->
Put the paragraph inside a box. Wrap it in a <div> … </div>. · วางย่อหน้า ภายใน กล่อง ห่อด้วย <div> … </div>