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 -->.
עברית
הערות
- תגית היא הערה לך, ולא לקורא.
- הדפדפן מתעלם ממנה — היא לעולם לא מופיעה בעמוד.
- כתוב אותה כך:
<!-- 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>.
עברית
כעת תנסו בעצמכם
- הערות עוזרות לך להתארגן; השתייה בונה מבנה.
- הותירו הערה, ולאחר מכן השתילו פרגרף בתוך ⟨
<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>.