جميع وسوم وخصائص HTML5

غير محدد مجاني

مرجع HTML5 عربي كامل ومكتمل 2026
أهم 60 وسم + 50 خاصية مع أمثلة كود في صف منفصل

الآن كل الخصائص 50 مكتملة 100% – انسخ واستخدم!

1. أهم 60 وسم HTML5 الأكثر استخداماً في 2026

الوسم الوصف والاستخدام
<div> حاوية عامة للتجميع والتنسيق – الأكثر استخداماً
<div class="container mx-auto p-10 bg-white shadow-2xl rounded-3xl">محتوى الديف هنا</div>
<span> تنسيق جزء من النص داخل الفقرة
مرحبا <span class="text-red-600 font-bold">يا بطل</span> في مرجع 2026!
<header> ترويسة الصفحة أو القسم
<header class="bg-gradient-to-r from-indigo-600 to-purple-700 text-black py-20 text-center"><h1>مرحباً بك</h1></header>
<nav> قائمة التنقل الرئيسية
<nav class="flex justify-center gap-10 py-6 bg-black text-black"><a href="/">الرئيسية</a><a href="/about">عننا</a></nav>
<main> المحتوى الرئيسي للصفحة (واحد فقط)
<main class="container mx-auto py-20">المحتوى الأساسي هنا</main>
<section> قسم مستقل داخل الصفحة
<section id="services" class="py-20 bg-gray-50"><h2 class="text-3xl font-bold text-center">خدماتنا</h2></section>
<article> محتوى مستقل مثل مقال أو خبر
<article class="bg-white p-8 rounded-2xl shadow-xl mb-10"><h2 class="text-2xl font-bold">عنوان المقال</h2><p>المحتوى...</p></article>
<aside> محتوى جانبي مثل السايدبار
<aside class="w-80 bg-gray-100 p-6 rounded-xl shadow-md">روابط ذات صلة</aside>
<footer> تذييل الصفحة
<footer class="bg-black text-black py-12 text-center">© 2026 مرجع البرمجة العربي – جميع الحقوق محفوظة</footer>
<h1> - <h6> العناوين الهرمية للـ SEO
<h1 class="text-4xl font-extrabold text-indigo-600 mb-6">عنوان رئيسي</h1><h2 class="text-3xl font-bold">عنوان فرعي</h2>
<p> فقرة نصية
<p class="text-lg leading-relaxed text-gray-700 dark:text-gray-300 mb-6">هذا نص طويل ومفيد للمحتوى...</p>
<a> رابط تشعبي
<a href="https://grok.com" target="_blank" rel="noopener noreferrer" class="text-indigo-600 hover:underline font-bold">زور موقع جروك</a>
<img> إدراج صورة
<img src="image.jpg" alt="وصف الصورة للـ SEO" loading="lazy" class="w-full h-auto rounded-3xl shadow-2xl">
<ul>، <ol>، <li> قوائم غير مرتبة أو مرتبة
<ul class="list-disc pr-10 space-y-4"><li>عنصر 1</li><li>عنصر 2</li></ul>
<button> زر تفاعلي
<button class="bg-gradient-to-r from-indigo-600 to-purple-700 text-black px-10 py-4 rounded-full font-bold shadow-2xl hover:scale-105 transition">اضغط هنا</button>
<form> نموذج إدخال
<form action="/submit" method="POST" class="space-y-6"><input type="text"><button type="submit">إرسال</button></form>
<input> حقل إدخال
<input type="email" name="email" placeholder="بريدك" required class="w-full p-4 border rounded-lg focus:ring-2 focus:ring-indigo-500">
<textarea> مربع نص كبير
<textarea name="message" rows="5" placeholder="رسالتك" class="w-full p-4 border rounded-lg focus:ring-2 focus:ring-indigo-500"></textarea>
<label> وصف للحقل
<label for="email" class="block text-gray-700 font-bold mb-2">البريد الإلكتروني:</label>
<select> + <option> قائمة منسدلة
<select name="country" class="w-full p-4 border rounded-lg"><option value="sa">السعودية</option><option value="ae">الإمارات</option></select>
<table> + <tr> + <td> + <th> جدول بيانات
<table class="w-full border-collapse"><thead><tr><th class="border p-4 bg-gray-200">الاسم</th></tr></thead><tbody><tr><td class="border p-4">أحمد</td></tr></tbody></table>
<figure> + <figcaption> صورة مع وصف
<figure class="text-center"><img src="photo.jpg" alt="" class="w-full"><figcaption class="mt-2 text-gray-600">وصف الصورة</figcaption></figure>
<video> تشغيل فيديو
<video src="video.mp4" controls autoplay loop muted class="w-full h-64 rounded-3xl"></video>
<audio> تشغيل صوت
<audio src="music.mp3" controls class="w-full"></audio>
<iframe> تضمين محتوى خارجي
<iframe src="https://www.youtube.com/embed/video_id" loading="lazy" class="w-full h-96 rounded-3xl"></iframe>
<canvas> رسومات ديناميكية
<canvas id="myCanvas" width="400" height="200" class="border rounded">Your browser does not support the canvas element.</canvas>
<svg> رسومات متجهة
<svg width="100" height="100"><circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" /></svg>
<strong> أو <b> نص غامق مهم
<strong class="text-red-600">تحذير: هذا مهم!</strong>
<em> أو <i> نص مائل للتأكيد
<em class="text-italic text-gray-600">ملاحظة: هذا للتأكيد.</em>
<mark> تمييز نص بخلفية صفراء
<mark class="bg-yellow-300 text-black">نص مهم جداً</mark>
<del> نص مشطوب (محذوف)
<del class="text-gray-500">نص قديم محذوف</del>
<code> كود برمجي
<code class="bg-gray-800 text-black p-1 rounded">console.log('Hello World');</code>
<pre> نص محافظ على الفراغات
<pre class="bg-gray-800 p-4 rounded text-black">if (true) { console.log('true'); }</pre>
<hr> خط فاصل أفقي
<hr class="border-t-2 border-gray-300 my-10">
<br> سطر جديد
سطر أول<br>سطر ثاني
<details> + <summary> قسم قابل للطي
<details class="cursor-pointer"><summary class="font-bold">المزيد</summary><p class="p-4">التفاصيل هنا</p></details>
<dialog> نافذة منبثقة
<dialog open class="p-10 bg-white rounded-2xl shadow-2xl">محتوى النافذة<button onclick="this.parentElement.close()">إغلاق</button></dialog>
<progress> شريط تقدم
<progress value="70" max="100" class="w-full h-4">70%</progress>
<meter> مقياس مثل البطارية
<meter value="0.6" class="w-full h-4">60%</meter>

2. أهم 50 خاصية (Attributes) الأكثر استخداماً في 2025

الخاصية الوصف والنصيحة 2026
class اسم فئة للتنسيق (يمكن عدة فئات)
<div class="container mx-auto p-10 bg-white shadow-2xl rounded-3xl">
id معرف فريد (لا يتكرر في الصفحة)
<section id="contact-form" class="py-20">
style CSS مباشر داخل الوسم (غير مفضل)
<p style="color: red; font-size: 20px;">نص بالستايل</p>
title نص يظهر عند التمرير (Tooltip)
<a href="#" title="اضغط للذهاب إلى الرئيسية">الرئيسية</a>
hidden إخفاء العنصر
<div hidden>محتوى مخفي يمكن إظهاره بـ JS</div>
dir اتجاه النص (rtl أو ltr)
<p dir="rtl">نص من اليمين إلى اليسار</p>
lang لغة المحتوى (للـ SEO وقارئات الشاشة)
<p lang="ar">نص بالعربية</p>
data-* تخزين بيانات مخصصة
<button data-id="123" data-name="product">شراء</button>
tabindex ترتيب التنقل بالكيبورد
<div tabindex="1">اضغط Tab هنا</div>
accesskey مفتاح اختصار (Alt + حرف)
<button accesskey="s">حفظ (Alt + S)</button>
src مسار الصورة أو الفيديو
<img src="logo.png" alt="">
alt نص بديل للصورة
<img src="photo.jpg" alt="وصف الصورة للـ SEO">
loading="lazy" تحميل متأخر للصور
<img src="image.jpg" loading="lazy">
width / height أبعاد الصورة
<img src="logo.jpg" width="200" height="100">
href عنوان الرابط
<a href="https://x.ai">زور الموقع</a>
target="_blank" فتح في تبويب جديد
<a href="..." target="_blank" rel="noopener noreferrer">رابط خارجي</a>
rel="nofollow" لا تعطي قيمة SEO للرابط
<a href="ad.com" rel="nofollow">إعلان</a>
required الحقل إجباري
<input type="text" required>
placeholder نص تلميح داخل الحقل
<input type="search" placeholder="ابحث هنا...">
autofocus التركيز التلقائي عند التحميل
<input type="text" autofocus>
autocomplete تشغيل/إيقاف التعبئة التلقائية
<input type="text" autocomplete="off">
pattern نمط Regex للتحقق
<input type="text" pattern="[0-9]{3}-[0-9]{3}" title="نمط XXX-XXX">
min / max الحد الأدنى والأقصى
<input type="number" min="1" max="10">
maxlength أقصى عدد أحرف
<input type="text" maxlength="10">
disabled تعطيل العنصر
<button disabled>معطل</button>
readonly قراءة فقط
<input type="text" value="قيمة" readonly>
checked مُحدد افتراضياً (checkbox)
<input type="checkbox" checked>
selected مُحدد في القائمة
<option selected>الخيار الافتراضي</option>
multiple اختيار أكثر من واحد
<select multiple><option>خيار 1</option></select>
type نوع الحقل (text, email, ...)
<input type="password">
value القيمة الافتراضية
<input type="text" value="الافتراضي">
controls أزرار تحكم في الفيديو
<video src="..." controls></video>
autoplay تشغيل تلقائي
<video src="..." autoplay></video>
loop إعادة التشغيل
<video src="..." loop></video>
muted كتم الصوت افتراضياً
<video src="..." muted></video>
rel علاقة الرابط (nofollow, noopener)
<a href="..." rel="nofollow noopener">رابط</a>
download إجبار التحميل
<a href="file.pdf" download>تحميل الملف</a>

تمرين اليوم : تدريب عملي كامل HTML5 + CSS عادي 2026

لاحظ أن التمرين اليوم يشمل ايضا 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>

مهمتك الآن (ممنوع التأجيل!)

  1. انسخ الكود أعلاه
  2. احفظه باسم mywebsite.html أو اي اسم
  3. أو الصق الكود في محرر أكواد منصة ابرمج هنا
  4. غير المعلومات زي ماتحب
  5. افتح الملف… وشاهد أول صفحة في حياتك على الإنترنت!
تم الانتهاء من الدورة! → رجوع