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>.