انت مشغل الـ AdBlock !!
ياريت تقفله لوسمحت 😊 😊
تنبيه هام ✋
إذا كانت الإعلانات مزعجة بالنسبة لك، فيُمكنك التبرع ب50$ وسيتم إيقاف الإعلانات لمدة شهر لجميع زوار الموقع 🧡 ويُمكنك التواصل معنا عن طريق صفحة الفيس بوك
جميع وسوم HTML مع الشرح
جميع وسوم html مع الشرح مُرتبة ابجديا بالإضافة الى الشرح المختصر بجوار كل وسم وعند الضغط على الوسوم ستذهب الى الشرح الكامل بالإضافة الى ان لكل وسم مثال عليه داخل الشرح
⚠ وسم=tag ؛ وسوم=tags
| تسلسل | الوسم | الإستخدام |
|---|---|---|
| 1 | <a> | هذا الوسم يُستخدم لعمل الروابط |
| 2 | <abbr> | هذا الوسم يُستخدم عندما نريد كتابة اختصار |
| 3 | <address> | هذا الوسم يُستخدم عندما نريد إضافة معلومات التواصل مع صاحب المقالة او الموقع |
| 4 | <area> | يستخدم هذا الوسم مع وسم <map> ووسم <img > وذلك لتحديد مساحة داخل صورة و عند الضغط على هذه المساحة فكأننا ضغطنا على لينك |
| 5 | <article> | يستخدم هذا الوسم عند عمل مقالة ويكون بداخلة العديد من الوسوم |
| 6 | <aside> | يستخدم هذا الوسم لعمل محتوى جانبي للموقع مثل الإعلانات او فهرس لمقالات |
| 7 | <audio> | يستخدم هذا الوسم عندما نريد اضافة مقطع صوتي الى الصفحة |
| 8 | <b> | يستخدم هذا الوسم عند عمل خط سميك للعنصر bold text |
| 9 | <base> | هذا الوسم يحتوى على لينك أساسي وهذا اللينك الأساسي يكون اللينك الافتراضي للعنصر <a> |
| 10 | <bdi> | هذا الوسم يقوم ب تغيير اتجاه المحتوى الذي بداخله |
| 11 | <bdo> | هذا الوسم يُستخدم عندما نريد تغيير اتجاه المحتوى الذي بداخله |
| 12 | <blockquote> | يستخدم هذا الوسم عندما نريد إضافة اقتباس من مصدر اخر |
| 13 | <body> | يكون بداخلة المحتوى الذي يظهر لزائر الصفحة |
| 14 | <br> | يستخدم عندما نريد الكتابة من سطر جديد |
| 15 | <button> | يستخدم عند عمل زر |
| 16 | <canvas> | يستخدم لعمل الرسومات وغالبا بال JavaScript |
| 17 | <caption> | دائما يستخدم مع وسم <table> لعمل شرح اعلى الجدول |
| 18 | <cite> | يستخدم عند إضافة عمل قام به شخص |
| 19 | <code> | يستخدم عندما نريد اظهار الاكواد البرمجية ك اكواد في صفحة الويب |
| 20 | <col> | يكون دائما داخل عنصر <colgroup> وذلك لتنسيق الاعمدة |
| 21 | <colgroup> | يكون بداخله وسم <col> ويستخدم لتنسيق الاعمدة |
| 22 | <data> | يُستخدم هذا الوسم لإضافة بيانات للعنصر وهذه البيانات تكون غير مرئية للمُستخدم العادي |
| 23 | <datalist> | يستخدم مع وسم <option> وذلك ل وضع قيم مُعينة فقط داخل حقل ادخال <input> |
| 24 | <dd> | تستخدم مع وسم <dl> ووسم <dt> وهذه العناصر الثلاثة تُستخدم معا عندما يكون لدينا قائمة من العناصر نُريد وصفها. |
| 25 | <del> | يستخدم عندما يكون المُحتوى بداخل هذا الوسم تم حذفة مسبقا |
| 26 | <details> | هذا الوسم دائما يكون بداخله وسم <summary> يُستخدم لإظهار او إخفاء المُحتوى |
| 27 | <dfn> | والمُحتوى بداخل هذا الوسم يكون تقريبا كلمة او كلمتين يتم شرحهم بعد ذلك في الجملة القادمة. |
| 28 | <dialog> | يُستخدم هذا الوسم لعمل dialog box وترجمتها نافذة فرعية |
| 29 | <div> | نستخدم هذا الوسم عندما نريد وضع بداخله عناصر سوف نقوم بتنسيقهم بواسطة لغة CSS |
| 30 | <dl> | تستخدم مع وسم <dd> ووسم <dt> وهذه العناصر الثلاثة تُستخدم معا عندما يكون لدينا قائمة من العناصر نُريد وصفها. |
| 31 | <dt> | تستخدم مع وسم <dl> ووسم <dd> وهذه العناصر الثلاثة تُستخدم معا عندما يكون لدينا قائمة من العناصر نُريد وصفها. |
| 32 | <em> | المحتوى بداخل هذا الوسم يكون محتوى مهم عن باقي النص بالإضافة انه يكون ذو خط مائل |
| 33 | <fieldset> | يستخدم هذا الوسم دائما داخل وسم < form> لوضع مجموعة من العناصر ذات الصلة بداخله. |
| 34 | <figcaption> | هذا الوسم دائما يكون داخل وسم <figure> وذلك لوضع جملة توضيحية اسفل الصورة |
| 35 | <figure> | هذا الوسم يكون بداخلة وسم <figcaption> ووسم <img> وذلك لوضع صورة في الموقع وتريد ان تَكتب جُملة توضيحية أسفل هذه الصورة |
| 36 | <footer> | هذا الوسم يستخدم لعمل الجزء السفلى من الصفحة او الموقع |
| 37 | <form> | يستخدم هذا الوسم لعمل نموذج لحقول الادخال |
| 38 | <h1 : h6> | يستخدم هذا الوسم لتحديد عناوين الصفحة |
| 39 | <head> | هذا الوسم يحتوي على معلومات خاصة بالصفحة ولكن لا تظهر بشكل مباشر للمُستخدم العادي |
| 40 | <header> | يستخدم هذا الوسم لعمل عنوان للصفحة او عنوان لمقال |
| 41 | <hr> | هذا الوسم يستخدم للفصل بين فقرتين بخط أفقي |
| 42 | <html> | هذا الوسم يحتوي على جميع وسوم لغة html ماعدا طبعا <!DOCTYPE html> |
| 43 | <i> | المحتوى بداخل هذا الوسم يكون بخط مائل italic |
| 44 | <iframe> | يستخدم لعمل إطار في الصفحة |
| 45 | <img> | يستخدم هذا الوسم عندما نُريد ادراج صورة في الموقع |
| 46 | <input> | يستخدم هذا الوسم داخل عنصر ال <form> لعمل حقل ادخال لبيانات المُستخدم |
| 47 | <ins> | المُحتوى بداخل هذا العنصر تم إضافته وذلك بوضع خط أسفل المُحتوى الذي بداخل هذا العنصر |
| 48 | <kbd> | ونستخدم هذا الوسم عندما نريد كتابة امر من اومر الكيبورد |
| 49 | <label> | يستخدم هذا الوسم مع عنصر <input> لوضع شرح توضيحي لحقل الادخال |
| 50 | <legend> | يستخدم هذا الوسم داخل وسم <fieldset> وذلك لإضافة عنوان توضيحي لهذه المجموعة |
| 51 | <li> | يستخدم هذا الوسم داخل وسم <ol> او <ul> لإضافة قائمة من الاشياء |
| 52 | <link> | يستخدم هذا الوسم لربط ملف اكواد لغة html بملف لغة CSS |
| 53 | <main> | هذا الوسم يكون بداخلة العديد من العناصر التي تُحدد المحتوى الأساسي للصفحة. |
| 54 | <map> | يستخدم هذا الوسم مع وسم <area> ووسم <img> وذلك لتحديد مساحة داخل صورة و عند الضغط على هذه المساحة فكأننا ضغطنا على لينك |
| 55 | <mark> | المحتوى بداخل هذا الوسم يكون ذو خلفية بلون مميز |
| 56 | <meta> | هذا الوسم هو المسئول عن إضافة معلومات للصفحة وهذه المعلومات لا تظهر لزائر الصفحة |
| 57 | <meter> | يستخدم هذا الوسم لعرض بيانات قابلة للقياس في نطاق معين (range) |
| 58 | <nav> | هذا الوسم يحتوي على العديد من الروابط |
| 59 | <noscript> | المحتوى بهذا الوسم يظهر فقط عندما يكون المتصفح لا يدعم اكواد لغة JavaScript |
| 60 | <ol> | تستخدم مع وسم <li> وذلك لعمل قائمة مرقمة او مرتبة |
| 61 | <optgroup> | هذا الوسم يكون بداخله وسم <option> وهو يُعتبر عنوان لمجموعة من الاختيارات |
| 62 | <option> | هذا الوسم غالبا ما يُستخدم داخل عنصر <datalist> وعنصر <select> وذلك لعمل drop-down list |
| 63 | <output> | يستخدم هذا الوسم لإظهار نتائج عملية حسابية. |
| 64 | <p> | يُستخدم هذا الوسم لعمل فقرة داخل مقال. |
| 65 | <picture> | يُستخدم هذا الوسم إذا كان لدينا صورتان او أكثر؛ مثلا إذا كان لدينا صورتان وأردنا ظهور الصورة الأولى في حالة الشاشات الصغيرة مثل الموبايل ولكن في حالة الشاشات الكبيرة لا نريد اظهار الصورة الأولى ولكن اظهار الصورة الثانية بدلا منها |
| 66 | <pre> | المحتوى الذي بداخل هذا الوسم يكون تم تنسيقة مسبقا |
| 67 | <progress> | يستخدم هذا الوسم لعمل ال progress bar |
| 68 | <q> | يستخدم لعمل اقتباس قصير |
| 69 | <s> | المُحتوى بداخل هذا الوسم كان صحيحا ولكن في الماضي |
| 70 | <samp> | تُستخدم هذا الوسم لعرض عينه من مُخرجات برنامج كمبيوتر |
| 71 | <script> | هذا الوسم يكون بداخله اكواد لغة JavaScript |
| 72 | <section> | يستخدم هذا الوسم لتقسيم الصفحة الى اقسام |
| 73 | <select> | هذا الوسم يكون بداخله وسم <option> وذلك لعمل قائمة منسدلة drop-down list |
| 74 | <small> | المُحتوى داخل هذا العنصر يكون بخط أصغر عن بقية النص |
| 75 | <source> | دائما يُستخدم هذا الوسم داخل وسم ال <video> او وسم ال <audio> إذا كان لدينا امتدادين او أكثر مختلفين لنفس الملف الصوتي او الفيديو |
| 76 | <span> | نستخدم هذا الوسم عندما نريد وضع بداخله عناصر سوف نقوم بتنسيقهم بواسطة لغة CSS |
| 77 | <strong> | يستخدم عندما يكون لدينا سطر او جملة مهمه |
| 78 | <style> | يكون بداخلة اكواد لغة CSS وذلك لتنسيق الوسوم |
| 79 | <sub> | المُحتوى داخل هذا العنصر يكون بخط منخفض عن بقية النص |
| 80 | <summary> | هذا الوسم دائما يكون داخل وسم <details> لإظهار واخفاء المحتوى الذي بداخله |
| 81 | <sup> | المُحتوى داخل هذا العنصر يكون مرتفع عن بقية النص |
| 82 | <svg> | هذا الوسم يمكننا من عمل الرسومات داخل الموقع |
| 83 | <table> | هذا الوسم يستخدم لعمل الجدول |
| 84 | <tbody> | هذا الوسم يكون بداخلة الجزء الأساسي من الجدول وبالتالي يكون داخل وسم ال <table> |
| 85 | <td> | هذا الوسم هو المسؤول عن إضافة خلية جديدة داخل الجدول وبالتالي يكون داخل وسم ال <table> |
| 86 | <template> | جميع محتويات هذا الوسم تكون مخفيه ولا تظهر لزائر الموقع مباشرة |
| 87 | <textarea> | يُستخدم هذا الوسم عندما تريد من زائر الموقع ادخال نص طويل متعدد الاسطر. |
| 88 | <tfoot> | هذا الوسم يكون بداخلة الجزء السفلى من الجدول وبالتالي يكون داخل وسم ال <table> |
| 89 | <th> | هذا الوسم هو المسؤول عن إضافة العنوان (الجزء العلوي) داخل الجدول وبالتالي يكون داخل وسم ال <table> |
| 90 | <thead> | هذا الوسم يكون بداخلة الجزء العلوي من الجدول وبالتالي يكون داخل وسم ال <table> |
| 91 | <time> | هذا الوسم يُستخدم عندما نريد اظهار وقت |
| 92 | <title> | هذا الوسم يُستخدم لتحدد عنوان الصفحة |
| 93 | <tr> | هذا الوسم هو المسؤول عن إضافة صف جديد داخل الجدول وبالتالي يكون داخل وسم ال <table> |
| 94 | <track> | يُستخدم هذا الوسم عند عمل ترجمة لمقطع فيديو وتظهر اثناء تشغيل الفيديو مثل فيديوهات اليوتيوب كده. |
| 95 | <u> | نستخدم هذا الوسم لوضع خط تحت المُحتوى الذي بداخله. |
| 96 | <ul> | تستخدم مع وسم <li> وذلك لعمل قائمة غير مرتبة من الاشياء |
| 97 | <var> | نستخدم هذا الوسم عندما يكون لدينا معادلة رياضية |
| 98 | <video> | يُستخدم هذا الوسم عندما نريد إضافة فيديو داخل الموقع. |
| 99 | <wbr> | يُستخدم هذا الوسم عندما تكون الكلمة طويلة جدا ونخشى ان هذه الكلمة تخترق المساحة التي بداخلها |
| 100 | <--...--!> | هذا الوسم يستخدم لكتابة شرح للكود داخل الملف ولكن لا يظهر لزائر الصفحة |
| 101 | <!DOCTYPE html> | هذا ليس وسم html وانما هو معلومة للمتصفح عندما يقوم بقراءة الاكواد لكي يَعلم ان الاكواد التالية هي اكواد خاصة بلغة html |