| النوع | الشكل | أمثلة | ملاحظة |
|---|---|---|---|
| Opening Tag (وسم فتح) | <tagname> | <p>، <div>، <h1> | بداية العنصر |
| Closing Tag (وسم إغلاق) | </tagname> | </p>، </div>، </h1> | يحتوي / قبل الاسم |
| Element (عنصر زوجي) | <tag>محتوى</tag> | <p>نص</p> | وسم فتح + محتوى + وسم إغلاق |
| Void Element (مفرد) | <tag> أو <tag/> | <br>، <img>، <input> | لا يحتاج وسم إغلاق |
| Nested Element (متداخل) | عنصر داخل عنصر | <div><p>نص</p></div> | أساس هيكل HTML |
| Container Element (حاوية) | عنصر يحتوي آخرين | <div>، <section>، <ul> | لا محتوى نصي مباشر عادةً |
| Text Content (محتوى نصي) | النص بين الوسمين | <h1>العنوان هنا</h1> | يظهر للمستخدم مباشرة |
كثير من المبتدئين يستخدمون كلمتي "وسم" و"عنصر" كمترادفتين، لكن في HTML لكل منهما معنى دقيق مختلف، وفهم الفرق بينهما يُحسّن كتابتك للكود ويمنع الأخطاء المفاهيمية.
الوسم (Tag): هو الكلمة المحاطة بأقواس الزاوية < > مثل <p> أو </p> أو <img>. الوسم مجرد علامة توجيهية تخبر المتصفح بنوع المحتوى. ينقسم إلى نوعين: وسم الفتح (Opening Tag) مثل <p>، ووسم الإغلاق (Closing Tag) مثل </p> الذي يتميز بشرطة مائلة / قبل اسم الوسم.
العنصر (Element): هو الكيان الكامل الذي يتكون من وسم الفتح + المحتوى + وسم الإغلاق. مثلاً: <p>هذا نص</p> — هذا عنصر كامل. المتصفح يتعامل مع العنصر كوحدة واحدة ويبني له عقدة (Node) في شجرة DOM.
العناصر الزوجية (Paired Elements): معظم عناصر HTML تحتاج وسم فتح ووسم إغلاق مثل: <h1>...</h1>، <p>...</p>، <div>...</div>، <a>...</a>. هذه العناصر تحتوي على محتوى (نص أو عناصر أخرى) بين وسمَيها.
العناصر المفردة أو الذاتية الإغلاق (Void/Self-closing Elements): بعض عناصر HTML لا تحتوي على محتوى بطبيعتها وتكتفي بوسم واحد فقط مثل: <br> للسطر الجديد، <hr> للخط الأفقي، <img> للصورة، <input> لحقل الإدخال، <meta> و<link>. في HTML5 يمكن كتابتها بشكل عادي <br> أو بشكل ذاتي الإغلاق <br /> (الشكل الثاني شائع في JSX/React).
التداخل الصحيح للعناصر: يجب إغلاق العناصر بنفس الترتيب المعاكس لفتحها. تخيل عناصر HTML كصناديق تُوضع داخل بعضها — إذا فتحت صندوق A ثم صندوق B، يجب إغلاق B أولاً ثم A.
المحتوى (Content): ما يقع بين وسم الفتح ووسم الإغلاق. قد يكون نصاً عادياً، أو عناصر HTML أخرى متداخلة، أو كليهما معاً. العناصر التي تحتوي على عناصر أخرى تسمى عناصر حاوية (Container Elements).
| 1 | <!-- الصياغة الأساسية للعنصر الزوجي --> |
| 2 | <tagname>المحتوى هنا</tagname> |
| 3 | |
| 4 | <!-- مثال على عناصر زوجية --> |
| 5 | <h1>عنوان رئيسي</h1> |
| 6 | <p>فقرة نصية</p> |
| 7 | <div>حاوية تحتوي عناصر أخرى</div> |
| 8 | <a href="#">رابط</a> |
| 9 | <strong>نص بخط عريض</strong> |
| 10 | |
| 11 | <!-- الصياغة الأساسية للعنصر المفرد (لا يحتاج إغلاق) --> |
| 12 | <tagname> |
| 13 | <tagname /> <!-- صياغة JSX/React --> |
| 14 | |
| 15 | <!-- مثال على عناصر مفردة --> |
| 16 | <br> <!-- سطر جديد --> |
| 17 | <hr> <!-- خط أفقي --> |
| 18 | <img src="..." alt="..."> <!-- صورة --> |
| 19 | <input type="text"> <!-- حقل إدخال --> |
| 20 | <meta charset="UTF-8"> <!-- بيانات وصفية --> |
مثال 1: الفرق بين الوسوم والعناصر — توضيح مرئي
| 1 | <!DOCTYPE html> |
| 2 | <html lang="ar" dir="rtl"> |
| 3 | <head><meta charset="UTF-8"><title>Elements vs Tags</title></head> |
| 4 | <body> |
| 5 | |
| 6 | <!-- مثال 1: عنصر زوجي كامل --> |
| 7 | <!-- [وسم فتح] [محتوى] [وسم إغلاق] --> |
| 8 | <h1> مرحباً بالعالم </h1> |
| 9 | <!-- الثلاثة معاً = عنصر <h1> كامل --> |
| 10 | |
| 11 | <!-- مثال 2: عناصر متداخلة (nesting) بشكل صحيح --> |
| 12 | <div> |
| 13 | <p>هذه فقرة داخل حاوية div</p> |
| 14 | <p>هذه فقرة ثانية داخل نفس الحاوية</p> |
| 15 | </div> |
| 16 | |
| 17 | <!-- مثال 3: عناصر مفردة (لا تحتاج إغلاقاً) --> |
| 18 | <p>السطر الأول<br>هذا سطر جديد</p> |
| 19 | <hr> |
| 20 | <img src="photo.jpg" alt="صورة"> |
| 21 | <input type="email" placeholder="بريدك الإلكتروني"> |
| 22 | |
| 23 | </body> |
| 24 | </html> |
مثال 2: تداخل صحيح مقابل تداخل خاطئ
| 1 | <!-- ✅ تداخل صحيح — الإغلاق بالترتيب المعاكس --> |
| 2 | <div> |
| 3 | <p> |
| 4 | هذا <strong>نص عريض</strong> داخل فقرة |
| 5 | </p> |
| 6 | </div> |
| 7 | |
| 8 | <!-- ❌ تداخل خاطئ — strong يُغلق بعد p وهذا خطأ --> |
| 9 | <!-- <div> |
| 10 | <p> |
| 11 | هذا <strong>نص |
| 12 | </p> |
| 13 | عريض</strong> |
| 14 | </div> --> |
| 15 | |
| 16 | <!-- ✅ مثال صحيح آخر: قائمة متداخلة --> |
| 17 | <ul> |
| 18 | <li>عنصر أول</li> |
| 19 | <li>عنصر ثانٍ |
| 20 | <ul> |
| 21 | <li>عنصر فرعي</li> |
| 22 | </ul> |
| 23 | </li> |
| 24 | <li>عنصر ثالث</li> |
| 25 | </ul> |