أهم وسوم HTML5 الأكثر استخداماً في 2026
📦 وسم <div>
يعتبر وسم <div> من أكثر الوسوم استخدامًا في HTML، وهو عبارة عن حاوية (Container) تستخدم لتجميع العناصر معًا داخل الصفحة.
يمكنك وضع أي عنصر تقريبًا داخل وسم <div> مثل العناوين والفقرات والصور والأزرار والقوائم وغيرها.
<div>
<h1>عنوان الصفحة</h1>
<p>
هذه فقرة داخل الديف.
</p>
<button>
اضغط هنا
</button>
</div>💡 ما فائدة وسم div؟
يستخدم وسم <div> لتجميع مجموعة من العناصر داخل صندوق واحد، حتى تستطيع تنسيقها معًا باستخدام CSS أو التحكم بها بواسطة JavaScript.
📌 مثال من الواقع
تخيل أن صفحة الويب عبارة عن غرفة، ووسم <div> هو صندوق تضع بداخله مجموعة من الأشياء حتى تبقى مرتبة. ويمكنك لاحقًا تغيير لون الصندوق أو حجمه أو مكانه بسهولة.
🏷️ وسم <span>
يستخدم وسم <span> لتحديد أو تنسيق جزء صغير من النص فقط، دون إنشاء سطر جديد. وغالبًا يُستخدم مع CSS لتغيير لون كلمة أو حجمها أو شكلها.
على عكس وسم <div> الذي ينشئ قسمًا جديدًا، فإن <span> يبقى داخل نفس السطر مع بقية النص.
<p>
أهلاً بك في
<span style="color:red;">منصة أبرمج</span>
</p>
💡 ما فائدة وسم span؟
يستخدم عندما تريد تنسيق كلمة أو جزء صغير من النص دون التأثير على بقية الفقرة.
📌 مثال من الواقع
إذا أردت أن تجعل كلمة "أبرمج" باللون الأحمر داخل فقرة، فإن أفضل خيار هو استخدام وسم <span>.
📑 وسم <section>
يستخدم وسم <section> لتقسيم الصفحة إلى أقسام رئيسية، بحيث يحتوي كل قسم على موضوع معين أو محتوى مرتبط ببعضه.
يساعد هذا الوسم المتصفح ومحركات البحث على فهم بنية الصفحة بشكل أفضل، كما يجعل الكود أكثر تنظيمًا وسهولة في القراءة.
<section>
<h2>الدورات البرمجية</h2>
<p>
هنا تظهر جميع الدورات.
</p>
</section>
💡 ما فائدة وسم section؟
يقسم الصفحة إلى أجزاء واضحة، بحيث يحتوي كل قسم على محتوى يخص موضوعًا معينًا.
📌 مثال من الواقع
في صفحة منصة أبرمج يمكن أن يكون هناك قسم للدورات، وقسم للمقالات، وقسم للأسئلة الشائعة، وكل واحد منها يُكتب داخل وسم <section> مستقل.
🏠 وسم <header>
يستخدم وسم <header> لتمثيل رأس الصفحة أو رأس أحد الأقسام. وعادةً يحتوي على شعار الموقع، أو اسم الموقع، أو عنوان الصفحة، أو قائمة التنقل.
ليس من الضروري أن يحتوي <header> على جميع هذه العناصر، بل يمكن أن يحتوي على أي محتوى يمثل بداية الصفحة أو بداية قسم معين.
<header>
<h1>منصة أبرمج</h1>
<p>
تعلم البرمجة من الصفر.
</p>
</header>
💡 ما فائدة وسم header؟
يستخدم لتجميع العناصر الموجودة في أعلى الصفحة أو أعلى القسم، مما يجعل الكود أكثر تنظيمًا ويساعد المتصفح ومحركات البحث على فهم بنية الصفحة.
📌 مثال من الواقع
عند زيارة أي موقع ستجد في الأعلى شعار الموقع واسمه وربما وصفًا مختصرًا، وغالبًا تُكتب هذه العناصر داخل وسم <header>.
🧭 وسم <nav>
يستخدم وسم <nav> لوضع روابط التنقل الرئيسية داخل الموقع، حتى يتمكن المستخدم من الانتقال بسهولة بين الصفحات المختلفة.
غالبًا ما يكون وسم <nav> داخل وسم <header>، لكنه يمكن أن يوجد في أي مكان داخل الصفحة إذا احتجت إلى قائمة تنقل.
<nav>
<a href="#">الرئيسية</a>
<a href="#">الدورات</a>
<a href="#">اتصل بنا</a>
</nav>
💡 ما فائدة وسم nav؟
يجمع روابط التنقل في مكان واحد، ويساعد المستخدم على الوصول إلى صفحات الموقع بسهولة، كما يساعد محركات البحث على التعرف على القائمة الرئيسية للموقع.
📌 مثال من الواقع
في منصة أبرمج قد تحتوي قائمة التنقل على روابط مثل: الرئيسية، الدورات، المقالات، تواصل معنا. وغالبًا تُكتب هذه الروابط داخل وسم <nav>.
📄 وسم <main>
يستخدم وسم <main> لاحتواء المحتوى الرئيسي للصفحة، أي المحتوى الذي جاء الزائر من أجله. ويجب أن يكون داخل الصفحة وسم <main> واحد فقط.
لا نضع داخله عناصر متكررة مثل رأس الصفحة <header> أو قائمة التنقل <nav> أو تذييل الصفحة <footer>، بل نضع المحتوى الأساسي فقط.
<main>
<h2>دورات البرمجة</h2>
<p>
هنا يظهر المحتوى الرئيسي للموقع.
</p>
</main>
💡 ما فائدة وسم main؟
يساعد المتصفح ومحركات البحث على معرفة المحتوى الأساسي للصفحة، كما يجعل هيكل الصفحة أكثر تنظيمًا ووضوحًا.
📌 مثال من الواقع
في صفحة دورة HTML بمنصة أبرمج، يكون شرح الدرس والأمثلة والصور داخل وسم <main>، أما الشعار والقائمة في الأعلى والتذييل في الأسفل فتكون خارج هذا الوسم.
📰 وسم <article>
يستخدم وسم <article> لكتابة محتوى مستقل يمكن فهمه وقراءته بمفرده، مثل مقال، أو خبر، أو منشور، أو درس، أو تعليق.
وإذا نقلت محتوى وسم <article> إلى صفحة أخرى، فسيظل له معنى كامل دون الحاجة إلى باقي محتويات الصفحة.
<article>
<h2>تعلم HTML</h2>
<p>
HTML هي لغة تستخدم لبناء صفحات الويب.
</p>
</article>
💡 ما فائدة وسم article؟
يستخدم لتنظيم المحتوى المستقل داخل الصفحة، ويساعد محركات البحث على التعرف على المقالات والأخبار والمنشورات بشكل أفضل.
📌 مثال من الواقع
إذا كان لديك موقع أخبار، فإن كل خبر يمكن وضعه داخل وسم <article>. وإذا كان لديك مدونة، فإن كل مقال يُكتب داخل <article>. وفي منصة أبرمج يمكن اعتبار كل درس برمجي بمثابة <article> مستقل.
📌 وسم <aside>
يستخدم وسم <aside> لعرض محتوى جانبي له علاقة بالمحتوى الرئيسي، لكنه ليس جزءًا أساسيًا منه. وغالبًا يظهر في أحد جانبي الصفحة.
يمكن استخدامه لعرض الإعلانات، أو المقالات المقترحة، أو آخر الأخبار، أو روابط ذات صلة، أو أي معلومات إضافية تفيد الزائر.
<aside>
<h3>دورات مقترحة</h3>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</aside>
💡 ما فائدة وسم aside؟
يستخدم لإضافة معلومات أو عناصر جانبية مرتبطة بالمحتوى الرئيسي، دون أن تكون جزءًا أساسيًا منه.
📌 مثال من الواقع
في منصة أبرمج يمكن استخدام وسم <aside> لعرض الدروس المقترحة، أو أحدث المقالات، أو إعلان عن دورة جديدة بجانب محتوى الدرس.
👣 وسم <footer>
يستخدم وسم <footer> لتمثيل تذييل الصفحة، وهو الجزء الذي يظهر عادةً في أسفل الموقع.
يحتوي غالبًا على معلومات مثل حقوق النشر، وروابط الصفحات المهمة، ووسائل التواصل، وسياسة الخصوصية، أو أي معلومات تُعرض في نهاية الصفحة.
<footer>
<p>
© 2026 جميع الحقوق محفوظة لمنصة أبرمج.
</p>
</footer>
💡 ما فائدة وسم footer؟
يستخدم لتنظيم المعلومات التي تظهر في نهاية الصفحة، ويساعد المتصفح ومحركات البحث على التعرف على تذييل الموقع بشكل صحيح.
📌 مثال من الواقع
عند النزول إلى أسفل معظم المواقع ستجد معلومات مثل حقوق النشر، وروابط سياسة الخصوصية، واتفاقية الاستخدام، وطرق التواصل. وغالبًا تُكتب جميعها داخل وسم <footer>.
🎯 تذكّر
الوسوم الدلالية التي تعلمتها الآن وهي: <header>، <nav>، <main>، <section>، <article>، <aside>، <footer> لا تغيّر شكل الصفحة بمفردها، وإنما تساعد على تنظيم الكود وجعله أكثر وضوحًا للمطورين، كما تساعد المتصفحات ومحركات البحث مثل Google على فهم بنية الصفحة ومحتواها بشكل أفضل.
🔘 وسم <button>
يستخدم وسم <button> لإنشاء زر يمكن للمستخدم الضغط عليه. ويمكن استخدامه لتنفيذ العديد من العمليات مثل إرسال نموذج، أو فتح نافذة، أو تشغيل كود JavaScript.
النص الذي تكتبه بين وسم الفتح ووسم الإغلاق هو النص الذي سيظهر داخل الزر.
<button>
اضغط هنا
</button>
💡 ما فائدة وسم button؟
يستخدم لإنشاء الأزرار التي يتفاعل معها المستخدم، مثل أزرار تسجيل الدخول، أو إرسال البيانات، أو تنفيذ أوامر معينة.
📌 مثال من الواقع
زر تسجيل الدخول أو شراء الآن أو إرسال الذي تشاهده في معظم المواقع هو عبارة عن وسم <button>.
📝 وسم <form>
يستخدم وسم <form> لإنشاء النماذج (Forms) التي تسمح للمستخدم بإدخال البيانات وإرسالها إلى الخادم (Server).
وغالبًا يحتوي وسم <form> على عناصر مثل حقول الإدخال والأزرار والقوائم المنسدلة وغيرها.
<form>
<input type="text">
<button>
إرسال
</button>
</form>
💡 ما فائدة وسم form؟
يجمع جميع عناصر النموذج داخل مكان واحد حتى يتمكن المستخدم من إدخال البيانات وإرسالها.
📌 مثال من الواقع
صفحات تسجيل الدخول، وإنشاء حساب، واتصل بنا، جميعها تعتمد على وسم <form>.
⌨️ وسم <input>
يستخدم وسم <input> لإنشاء حقول إدخال البيانات التي يكتب فيها المستخدم معلوماته، مثل الاسم أو البريد الإلكتروني أو كلمة المرور.
ويعتبر من أكثر وسوم HTML استخدامًا، ويمكن تغيير نوعه باستخدام الخاصية type مثل: text، password، email، number وغيرها.
<input type="text" placeholder="اكتب اسمك">
💡 ما فائدة وسم input؟
يستخدم لاستقبال البيانات من المستخدم، سواء كانت نصًا، أو بريدًا إلكترونيًا، أو كلمة مرور، أو أرقامًا، أو غير ذلك حسب نوع الحقل.
📌 مثال من الواقع
عندما تدخل إلى صفحة تسجيل الدخول وتكتب اسم المستخدم أو البريد الإلكتروني وكلمة المرور، فأنت تكتب داخل حقول أنشئت باستخدام وسم <input>.
🎯 معلومة مهمة
في أغلب الأحيان ستجد أن الوسوم الثلاثة <form>، <input>، و<button> تستخدم معًا. حيث يحتوي <form> على حقول الإدخال <input>، ويكون زر <button> مسؤولًا عن إرسال البيانات بعد أن يملأها المستخدم.
أهم الخصائص (Attributes) الأكثر استخداماً في 2026
⭐ أشهر خصائص HTML التي ستستخدمها باستمرار
تعلمنا في الدروس السابقة أن الخصائص (Attributes) تُكتب داخل وسم الفتح، وتستخدم لإضافة معلومات أو إعطاء العنصر وظيفة معينة.
توجد في HTML عشرات الخصائص، لكن في هذا الدرس سنتعرف على أشهرها وأكثرها استخدامًا، وهي الخصائص التي ستشاهدها في معظم صفحات الويب التي ستقوم بإنشائها.
🎨 الخاصية class
تعتبر الخاصية class من أكثر خصائص HTML استخدامًا. وتستخدم لإعطاء العنصر اسمًا معينًا حتى نستطيع تنسيقه باستخدام CSS أو التعامل معه باستخدام JavaScript.
ويمكنك كتابة أكثر من اسم داخل الخاصية class، وذلك بوضع مسافة بين كل اسم وآخر.
<div class="container card shadow">
مرحبًا بك
</div>
💡 ما فائدة class؟
تسمح لك بإعطاء العنصر اسمًا يمكن استخدامه لاحقًا لتطبيق التنسيقات عليه أو التحكم به بواسطة JavaScript.
📌 مثال من الواقع
في منصة أبرمج قد نعطي جميع الأزرار نفس اسم الفئة button حتى تحصل جميعها على نفس اللون والحجم والشكل.
🆔 الخاصية id
تستخدم الخاصية id لإعطاء العنصر معرفًا فريدًا داخل الصفحة. ويجب ألا يتكرر نفس المعرف أكثر من مرة في الصفحة نفسها.
وغالبًا تستخدم عند إنشاء روابط داخل الصفحة أو عند التعامل مع عنصر محدد بواسطة JavaScript أو CSS.
<section id="about">
معلومات عنا
</section>
💡 ما فائدة id؟
يمنح العنصر اسمًا فريدًا لا يتكرر داخل الصفحة، مما يسهل الوصول إليه أو التعامل معه.
📌 مثال من الواقع
قد يحتوي موقعك على قسم اسمه اتصل بنا. يمكن إعطاؤه المعرف contact حتى يستطيع الزائر الانتقال إليه مباشرة عند الضغط على رابط معين.
🎨 الخاصية style
تستخدم الخاصية style لإضافة تنسيقات CSS مباشرة داخل العنصر، مثل تغيير اللون أو حجم الخط أو الخلفية.
ورغم أنها تعمل بشكل صحيح، إلا أنه يفضل استخدام ملفات CSS الخارجية أو الأصناف class في المشاريع الكبيرة، حتى يبقى الكود مرتبًا وسهل التعديل.
<p style="color:red; font-size:22px;">
مرحبًا بك
</p>
💡 ما فائدة style؟
تستخدم لتطبيق تنسيق سريع على عنصر واحد دون الحاجة إلى ملف CSS.
⚠️ ملاحظة مهمة
في الدورات القادمة سنتعلم CSS، وعندها ستستخدم class بدل style في معظم الحالات، لأنه يجعل الكود أكثر ترتيبًا وأسهل في الصيانة.
💬 الخاصية title
تستخدم الخاصية title لإظهار رسالة صغيرة عندما يضع المستخدم مؤشر الفأرة فوق العنصر.
تسمى هذه الرسالة Tooltip وتستخدم لإعطاء المستخدم معلومات إضافية عن العنصر.
<a href="#" title="الانتقال إلى الصفحة الرئيسية">
الرئيسية
</a>
💡 ما فائدة title؟
تعرض رسالة توضيحية للمستخدم عند تمرير مؤشر الفأرة فوق العنصر.
📌 مثال من الواقع
عند وضع مؤشر الفأرة فوق زر أو رابط، قد تظهر رسالة توضح وظيفة هذا الزر قبل الضغط عليه.
🙈 الخاصية hidden
تستخدم الخاصية hidden لإخفاء العنصر بالكامل عن المستخدم عند تحميل الصفحة.
ويبقى العنصر موجودًا داخل الصفحة، لكن المتصفح لا يعرضه إلا إذا تمت إزالته بواسطة JavaScript أو تم تعديل الكود.
<div hidden>
هذا المحتوى مخفي.
</div>
💡 ما فائدة hidden؟
تستخدم لإخفاء عنصر معين حتى يتم إظهاره لاحقًا عند الحاجة.
📌 مثال من الواقع
قد يكون لديك نموذج أو رسالة نجاح لا تريد عرضها مباشرة عند فتح الصفحة، لذلك تجعلها مخفية باستخدام hidden ثم تظهرها بعد تنفيذ عملية معينة بواسطة JavaScript.
🔗 الخاصية href
تستخدم الخاصية href لتحديد عنوان الصفحة أو الموقع الذي سيتم الانتقال إليه عند الضغط على الرابط.
وغالبًا تُستخدم مع وسم <a>، وتعتبر من أهم خصائص HTML لأنها تربط صفحات الويب ببعضها.
<a href="https://abrmj.com">
منصة أبرمج
</a>
💡 ما فائدة href؟
تحدد الصفحة أو الملف الذي سيتم فتحه عند الضغط على الرابط.
📌 مثال من الواقع
عندما تضغط على زر اتصل بنا أو الدورات في أي موقع، فإن المتصفح يقرأ قيمة href وينتقل إلى الصفحة المطلوبة.
🪟 الخاصية target
تستخدم الخاصية target لتحديد طريقة فتح الرابط بعد الضغط عليه.
أشهر قيمة لها هي _blank والتي تجعل الرابط يفتح داخل تبويب جديد بدلًا من مغادرة الصفحة الحالية.
<a href="https://abrmj.com" target="_blank">
افتح الموقع
</a>
💡 ما فائدة target؟
تحدد أين سيتم فتح الرابط، سواء في نفس الصفحة أو في تبويب جديد.
📌 مثال من الواقع
غالبًا تفتح المواقع روابط الشبكات الاجتماعية أو المواقع الخارجية في تبويب جديد حتى لا يفقد الزائر الصفحة الحالية.
🔒 الخاصية rel
تستخدم الخاصية rel لتوضيح العلاقة بين الصفحة الحالية والرابط الذي سيتم فتحه.
وتستخدم كثيرًا مع target="_blank" لزيادة الأمان، كما يمكن استخدامها مع nofollow لإخبار محركات البحث بعدم نقل قيمة SEO إلى الرابط.
<a href="https://example.com"
target="_blank"
rel="noopener noreferrer">
رابط خارجي
</a>
💡 ما فائدة rel؟
تضيف معلومات إضافية عن الرابط، كما تساعد في تحسين الأمان وبعض الجوانب المتعلقة بمحركات البحث.
🖼️ الخاصية src
تستخدم الخاصية src لتحديد مسار الملف الذي سيتم عرضه، مثل صورة أو فيديو أو ملف صوتي.
إذا كان المسار غير صحيح فلن يستطيع المتصفح العثور على الملف ولن يظهر للمستخدم.
<img src="images/logo.png">
💡 ما فائدة src؟
تخبر المتصفح بالمكان الذي يوجد فيه الملف ليقوم بعرضه داخل الصفحة.
📌 مثال من الواقع
كل صورة أو شعار أو فيديو تشاهده في مواقع الإنترنت يعتمد على الخاصية src.
📝 الخاصية alt
تستخدم الخاصية alt لكتابة وصف للصورة.
إذا تعذر تحميل الصورة لأي سبب، سيظهر هذا النص بدلًا منها، كما تستفيد منه محركات البحث وقارئات الشاشة لفهم محتوى الصورة.
<img src="logo.png"
alt="شعار منصة أبرمج">
💡 ما فائدة alt؟
توفر وصفًا للصورة يفيد المستخدمين ومحركات البحث في حال لم تظهر الصورة.
📏 الخاصيتان width و height
تستخدم الخاصيتان width وheight لتحديد عرض العنصر وارتفاعه، وخاصة الصور ومقاطع الفيديو.
تحديد أبعاد الصورة يساعد المتصفح على ترتيب الصفحة بشكل أفضل أثناء التحميل.
<img src="logo.png"
width="300"
height="150">
💡 ما فائدتهما؟
تحددان أبعاد العنصر وتساعدان على عرض الصفحة بشكل أكثر استقرارًا أثناء تحميل الصور.
⚡ الخاصية loading
تستخدم الخاصية loading للتحكم في وقت تحميل الصور.
وأشهر قيمة لها هي lazy والتي تعني أن الصورة لن تُحمّل إلا عندما يقترب المستخدم منها أثناء التمرير داخل الصفحة.
<img
src="photo.jpg"
loading="lazy"
alt="صورة">
💡 ما فائدة loading؟
تساعد على تسريع تحميل الصفحة وتقليل استهلاك الإنترنت، خاصة في الصفحات التي تحتوي على عدد كبير من الصور.
📌 مثال من الواقع
في صفحات المتاجر الإلكترونية أو المقالات الطويلة، لا يتم تحميل جميع الصور مرة واحدة، بل تُحمّل تدريجيًا أثناء نزول المستخدم داخل الصفحة، وذلك باستخدام loading="lazy".
⌨️ الخاصية type
تستخدم الخاصية type لتحديد نوع العنصر أو طريقة عمله. وأكثر مكان ستستخدمها فيه هو مع وسم <input> لتحديد نوع حقل الإدخال.
يوجد عشرات الأنواع مثل text، password، email، number، date وغيرها.
<input type="email">
💡 ما فائدة type؟
تخبر المتصفح بنوع البيانات التي سيستقبلها العنصر، مما يساعد في عرض الحقل بالطريقة المناسبة والتحقق من صحة البيانات.
📌 مثال من الواقع
في صفحة تسجيل الدخول يكون البريد الإلكتروني داخل type="email" وكلمة المرور داخل type="password".
💬 الخاصية placeholder
تستخدم الخاصية placeholder لإظهار نص إرشادي داخل حقل الإدخال قبل أن يبدأ المستخدم بالكتابة.
ويختفي هذا النص تلقائيًا بمجرد أن يكتب المستخدم أول حرف داخل الحقل.
<input
type="text"
placeholder="اكتب اسمك الكامل">
💡 ما فائدة placeholder؟
تساعد المستخدم على معرفة نوع البيانات المطلوب إدخالها داخل الحقل.
📝 الخاصية value
تستخدم الخاصية value لتحديد القيمة الافتراضية للعنصر.
وفي حقول الإدخال تظهر هذه القيمة داخل الحقل بمجرد تحميل الصفحة، ويمكن للمستخدم تعديلها إذا لم يكن الحقل للقراءة فقط.
<input
type="text"
value="أبرمج">
💡 ما فائدة value؟
تحدد القيمة التي سيعرضها العنصر عند فتح الصفحة لأول مرة.
⭐ الخاصية required
تستخدم الخاصية required لجعل الحقل إلزاميًا.
إذا حاول المستخدم إرسال النموذج وترك هذا الحقل فارغًا، فسيمنعه المتصفح من الإرسال حتى يقوم بملئه.
<input
type="email"
required>
💡 ما فائدة required؟
تمنع إرسال النموذج حتى يتم إدخال البيانات المطلوبة.
📌 مثال من الواقع
حقول البريد الإلكتروني وكلمة المرور في صفحات تسجيل الدخول غالبًا تكون حقولًا إلزامية.
🚫 الخاصية disabled
تستخدم الخاصية disabled لتعطيل العنصر ومنع المستخدم من التفاعل معه.
العناصر المعطلة لا يمكن الكتابة فيها أو الضغط عليها حتى يتم إزالة هذه الخاصية.
<button disabled>
حفظ
</button>
💡 ما فائدة disabled؟
تمنع المستخدم من استخدام العنصر حتى يصبح متاحًا.
🔒 الخاصية readonly
تجعل الخاصية readonly الحقل قابلًا للقراءة فقط.
يستطيع المستخدم رؤية البيانات الموجودة داخل الحقل، لكنه لا يستطيع تعديلها.
<input
type="text"
value="مبرمج"
readonly>
💡 ما فائدة readonly؟
تسمح للمستخدم بقراءة البيانات دون إمكانية تعديلها.
✅ الخاصية checked
تستخدم الخاصية checked لجعل مربع الاختيار أو زر الاختيار محددًا تلقائيًا عند فتح الصفحة.
<input
type="checkbox"
checked>
💡 ما فائدة checked؟
تجعل خيارًا معينًا محددًا بشكل افتراضي قبل أن يتفاعل المستخدم معه.
📋 الخاصية selected
تستخدم الخاصية selected لتحديد الخيار الافتراضي داخل القائمة المنسدلة <select>.
<option selected>
السعودية
</option>
💡 ما فائدة selected؟
تجعل أحد الخيارات ظاهرًا ومحددًا تلقائيًا عند فتح القائمة.
☑️ الخاصية multiple
تستخدم الخاصية multiple للسماح للمستخدم باختيار أكثر من عنصر في نفس الوقت.
وتستخدم غالبًا مع القوائم المنسدلة أو مع حقول رفع الملفات.
<select multiple>
...
</select>
💡 ما فائدة multiple؟
تسمح للمستخدم بتحديد أكثر من خيار بدلًا من اختيار خيار واحد فقط.
📌 مثال من الواقع
قد تجد في بعض مواقع التوظيف أو الاستبيانات إمكانية اختيار عدة مهارات أو عدة لغات في نفس الوقت، ويتم ذلك باستخدام الخاصية multiple.
📚 مرجع سريع لأشهر خصائص HTML
بعد أن تعرفنا على أشهر الخصائص بالتفصيل، إليك هذا الجدول الذي يمكنك الرجوع إليه في أي وقت. يحتوي على اسم الخاصية وأهم فائدتها باختصار.
| الخاصية | الفائدة |
|---|---|
| class | إعطاء العنصر اسم فئة لتطبيق التنسيقات أو التعامل معه. |
| id | إعطاء العنصر معرفًا فريدًا داخل الصفحة. |
| style | تطبيق تنسيقات CSS مباشرة على العنصر. |
| title | عرض رسالة توضيحية عند مرور مؤشر الفأرة. |
| hidden | إخفاء العنصر عن المستخدم. |
| href | تحديد عنوان الرابط الذي سيتم فتحه. |
| target | تحديد مكان فتح الرابط. |
| rel | تحديد العلاقة بين الصفحة والرابط وتحسين الأمان. |
| src | تحديد مسار الصورة أو الفيديو أو الملف. |
| alt | كتابة وصف بديل للصورة. |
| width | تحديد عرض العنصر. |
| height | تحديد ارتفاع العنصر. |
| loading | تحديد طريقة تحميل الصور مثل التحميل الكسول. |
| type | تحديد نوع العنصر أو حقل الإدخال. |
| placeholder | إظهار نص إرشادي داخل الحقل. |
| value | تحديد القيمة الافتراضية للعنصر. |
| required | جعل الحقل إلزاميًا قبل إرسال النموذج. |
| disabled | تعطيل العنصر ومنع استخدامه. |
| readonly | السماح بقراءة الحقل دون تعديله. |
| checked | تحديد مربع الاختيار أو زر الاختيار افتراضيًا. |
| selected | تحديد خيار افتراضي داخل القائمة المنسدلة. |
| multiple | السماح باختيار أكثر من عنصر. |
🎉 خاتمة الدرس
في هذا الدرس تعلمت أن الخصائص (Attributes) تضيف إمكانيات ووظائف جديدة إلى وسوم HTML، وتجعلها أكثر ذكاءً ومرونة. فبعض الخصائص تحدد مكان فتح الرابط، وبعضها يتحكم في الصور، وأخرى تساعد في إنشاء النماذج والتعامل مع بيانات المستخدم.
قد يبدو عدد الخصائص كبيرًا في البداية، لكن لا تقلق. مع كثرة كتابة الأكواد ستجد أنك تستخدم نفس الخصائص بشكل متكرر، وستحفظها مع الوقت دون الحاجة إلى الرجوع إليها.
ولا يشترط أن تحفظ جميع الخصائص الموجودة في HTML، فحتى المبرمجون المحترفون يرجعون إلى المراجع الرسمية عند الحاجة. المهم أن تعرف وظيفة كل خاصية ومتى تستخدمها.
والآن أصبحت تمتلك أساسًا قويًا في HTML، وتعرف أهم الوسوم وأشهر الخصائص التي ستستخدمها في معظم صفحات الويب. في الدروس القادمة سنبدأ بتعلم CSS، وهي اللغة المسؤولة عن تصميم الصفحات وإضافة الألوان والخطوط والتنسيقات التي تجعل مواقع الويب جميلة واحترافية.
تمرين اليوم : تدريب عملي كامل HTML5 + CSS
لاحظ أن التمرين اليوم يشمل ايضا css الذي لم نتطرق اليه بعد لكن سيكون بداية قوية للدورة القادمة عن CSS
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>تدريب عملي كامل HTML5 + CSS عادي 2026</title>
<style>
/* ==== إعدادات عامة ==== */
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: #f4f6f9;
color: #2d3748;
line-height: 1.8;
padding: 20px;
}
.container { max-width: 1200px; margin: 0 auto; }
header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
text-align: center;
padding: 60px 20px;
border-radius: 20px;
margin-bottom: 30px;
box-shadow: 0 15px 35px rgba(0,0,0,0.2);
}
h1 { font-size: 48px; margin-bottom: 20px; }
h2 { font-size: 36px; color: #4c51bf; margin: 40px 0 20px; text-align: center; }
h3 { font-size: 28px; color: #2d3748; }
nav {
background: #1a202c;
padding: 20px;
text-align: center;
border-radius: 15px;
margin-bottom: 30px;
}
nav a {
color: white;
margin: 0 25px;
text-decoration: none;
font-size: 20px;
font-weight: bold;
}
nav a:hover { color: #a0aec0; }
form {
background: white;
padding: 40px;
border-radius: 20px;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
margin-bottom: 50px;
}
label {
display: block;
font-size: 20px;
font-weight: bold;
margin: 20px 0 8px;
color: #2d3748;
}
input, textarea, select {
width: 100%;
padding: 14px;
border: 2px solid #e2e8f0;
border-radius: 12px;
font-size: 16px;
transition: all 0.3s;
}
input:focus, textarea:focus, select:focus {
outline: none;
border-color: #667eea;
box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.2);
}
button {
background: linear-gradient(135deg, #48bb78, #38a169);
color: white;
padding: 16px 40px;
border: none;
border-radius: 50px;
font-size: 20px;
font-weight: bold;
cursor: pointer;
margin: 20px 10px 0 0;
box-shadow: 0 10px 20px rgba(72, 187, 120, 0.3);
transition: all 0.3s;
}
button:hover { transform: translateY(-4px); box-shadow: 0 15px 30px rgba(72, 187, 120, 0.4); }
button[type="reset"] { background: #718096; }
img, video, iframe {
max-width: 100%;
height: auto;
border-radius: 20px;
box-shadow: 0 10px 30px rgba(0,0,0,0.15);
margin: 30px 0;
}
figure { text-align: center; margin: 40px 0; }
figcaption { font-size: 20px; color: #718096; margin-top: 15px; }
details {
background: white;
padding: 30px;
border-radius: 20px;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
margin: 30px 0;
}
summary {
font-size: 26px;
font-weight: bold;
cursor: pointer;
color: #4c51bf;
}
progress, meter {
width: 100%;
height: 30px;
margin: 30px 0;
border-radius: 15px;
}
dialog {
padding: 40px;
border: none;
border-radius: 20px;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
max-width: 500px;
}
dialog::backdrop { background: rgba(0,0,0,0.7); }
aside {
background: #e6fffa;
padding: 40px;
border-radius: 20px;
text-align: center;
margin: 50px 0;
border: 3px dashed #38b2ac;
}
footer {
background: #1a202c;
color: white;
text-align: center;
padding: 50px 20px;
margin-top: 80px;
border-radius: 20px;
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>تدريب عملي كامل على HTML5 + CSS عادي</h1>
<p style="font-size:22px;">صفحة واحدة تغطي كل الـ 60 وسم + 50 خاصية بدون Tailwind!</p>
</header>
<nav>
<a href="#forms">النماذج</a>
<a href="#media">الوسائط</a>
<a href="#interactive">التفاعل</a>
</nav>
<main>
<section id="forms">
<h2>نموذج تسجيل شامل (يستخدم أكثر من 30 خاصية)</h2>
<form action="#" method="POST">
<label for="name">الاسم الكامل:</label>
<input type="text" id="name" name="name" placeholder="أدخل اسمك" required autofocus maxlength="50">
<label for="email">البريد الإلكتروني:</label>
<input type="email" id="email" name="email" placeholder="email@domain.com" required pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}">
<label for="phone">رقم الجوال:</label>
<input type="tel" id="phone" name="phone" placeholder="9665xxxxxxxx" pattern="[0-9]{12}" required>
<label for="age">العمر:</label>
<input type="number" id="age" name="age" min="18" max="120" value="25">
<label for="date">تاريخ الميلاد:</label>
<input type="date" id="date" name="birthdate">
<label>الجنس:</label>
<input type="radio" name="gender" value="male" id="male" checked> <label for="male">ذكر</label>
<input type="radio" name="gender" value="female" id="female"> <label for="female">أنثى</label>
<label>الهوايات:</label>
<input type="checkbox" name="hobby" value="code" checked> برمجة
<input type="checkbox" name="hobby" value="game"> ألعاب
<input type="checkbox" name="hobby" value="read"> قراءة
<label for="country">الدولة:</label>
<select id="country" name="country" multiple size="4">
<option value="sa" selected>السعودية</option>
<option value="ae">الإمارات</option>
<option value="eg">مصر</option>
</select>
<label for="cv">رفع السيرة الذاتية:</label>
<input type="file" id="cv" name="cv" accept=".pdf,.docx">
<label for="msg">رسالتك:</label>
<textarea id="msg" name="message" rows="6" placeholder="اكتب رسالتك..." required></textarea>
<button type="submit">إرسال الطلب</button>
<button type="reset">مسح الحقول</button>
</form>
</section>
<section id="media">
<h2>الوسائط: صور، فيديو، صوت، iframe</h2>
<figure>
<img src="https://via.placeholder.com/1000x500/4c51bf/ffffff?text=تدريب+HTML5+كامل+2026" alt="شعار التدريب العملي الكامل" loading="lazy">
<figcaption>صفحة تدريب عملي تغطي كل وسوم وخصائص HTML5</figcaption>
</figure>
<video controls autoplay loop muted poster="https://via.placeholder.com/1000x500/000000/ffffff?text=فيديو+تدريبي">
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
المتصفح لا يدعم الفيديو.
</video>
<audio controls>
<source src="https://www.w3schools.com/html/horse.mp3" type="audio/mpeg">
</audio>
<iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" title="فيديو توضيحي" loading="lazy" allowfullscreen></iframe>
</section>
<section id="interactive">
<h2>عناصر تفاعلية متقدمة</h2>
<details>
<summary>اضغط لعرض الأسئلة الشائعة</summary>
<p style="margin-top:20px; font-size:18px;">نعم، هذه الصفحة تستخدم فعلياً كل وسم وكل خاصية من المرجع!</p>
</details>
<p>نسبة الإنجاز: <progress value="95" max="100">95%</progress></p>
<p>مستوى البطارية: <meter value="0.85" low="0.3" high="0.7" optimum="0.9">85%</meter></p>
<button onclick="document.getElementById('mymodal').showModal()" style="font-size:22px; padding:15px 30px;">
افتح النافذة المنبثقة
</button>
<dialog id="mymodal">
<h3>مرحباً بك في نافذة dialog!</h3>
<p>هذه تعمل بدون أي جافاسكربت خارجي!</p>
<button onclick="document.getElementById('mymodal').close()" style="background:#e53e3e;">إغلاق</button>
</dialog>
</section>
<aside>
<h3>نصيحة اليوم</h3>
<p style="font-size:20px; margin-top:20px;">
استخدم <code style="background:#2d3748; color:#68d391;">loading="lazy"</code> دائماً على الصور والـ iframe → يوفر 70% من البيانات!
</p>
</aside>
</main>
<footer>
<p style="font-size:24px;">© 2026 مرجع البرمجة العربي – جميع الحقوق محفوظة</p>
<p style="margin-top:20px; font-size:20px;">
تم بناء هذه الصفحة بـ <strong>HTML5 + CSS عادي فقط</strong> وتستخدم كل الوسوم والخصائص بشكل عملي
</p>
</footer>
</div>
</body>
</html>مهمتك الآن (ممنوع التأجيل!)
- انسخ الكود أعلاه
- احفظه باسم
mywebsite.html أو اي اسم - أو الصق الكود في محرر أكواد منصة ابرمج هنا
- غير المعلومات زي ماتحب
- افتح الملف… وشاهد أول صفحة في حياتك على الإنترنت!
وبما أنك الآن قد أنهيت هذه الدورة الخاصة بأساسيات HTML فأنصحك بصفتي مبرمج لديه خبرة برمجية أكثر من عشرين سنة أن لا تكتفي فقط بقراءة الدورة. بل يجب عليك التطبيق ثم التطبيق ثم التطبيق. حاول قدر المستطاع أن تنشئ العديد و العديد من صفحات المواقع الإلكترونية باستخدام المهارات التي تعلمتها في هذه الدورة حتى تترسخ لديك هذه المهارات. فالطريقة الوحيدة لتكون مبرمجا محترفا هي كثرة الممارسة وكثرة كتابة الأكواد حتى لو واجهت صعوبة بالبداية فمع التكرار ستنجح. استخدم محرر الأكواد الموجود بالمنصة لدينا لكتابة الأكواد ومن ثم انتقل لكتابة الأكواد أو نسخ الأكواد التي كتبتها في ملف نصي على جهازك الكمبيوتر ومن ثم تحويل الملف النصي ليكون بامتداد html حتى مكن فتحه بالمتصفحة كصفحة الكترونية. وأيضا اوصيك بعد ذلك باستكمال رحلتك التعليمية والبرمجية والذهاب إلى دورة أساسيات CSS لتجعل موقعك منسق وجميل من هنا .