شرح العنصر (article) في لغة HTML

شرح شامل عن عنصر <article> في HTML

HTML

مقدمة

عنصر <article> هو أحد عناصر HTML5 الدلالية (Semantic Elements) التي تُستخدم لتحديد المحتوى المستقل القابل لإعادة الاستخدام أو التوزيع بشكل منفصل عن بقية المحتوى في الصفحة.

الغرض الأساسي

يُستخدم <article> لتجميع:

• منشورات المدونات
• مقالات الأخبار
• مواضيع المنتديات
• تعليقات المستخدمين
• أي محتوى مستقل يمكن توزيعه بشكل منفصل

البنية الأساسية

<article>
  <h5>عنوان المقال</h5>
  <p>محتوى المقال هنا...</p>
</article>

السمات الرئيسية

يدعم <article> جميع السمات العامة في HTML مثل:

• class
• id
• dir
• lang
• style
• title

الفروق بين <article> والعناصر المشابهة

<article> vs <section>

• <article>: محتوى مستقل وقائم بذاته
• <section>: تجميع للمحتوى ذو الموضوع الواحد

<article> vs <div>

• <article>: له دلالة معنوية (محتويات مستقلة)
• <div>: حاوية عامة بدون دلالة

أفضل الممارسات

• استخدم عناوين داخل <article> (عادة <h1>- <h6>)
• يمكن أن يحتوي <article> على عناصر <section>
• يمكن تضمين <article> داخل <section> والعكس
• استخدم <article> للمحتوى الذي يمكن إعادة نشره بشكل مستقل

أمثلة تطبيقية

(1) مقالة مدونة

<article class="blog-post">
  <header>
    <h1>عنوان المقالة</h1>
    <p>نشر في <time datetime="2023-05-15">15 مايو 2023</time></p>
  </header>
  
  <div class="post-content">
    <p>محتوى المقالة هنا...</p>
    <img src="image.jpg" alt="وصف الصورة">
  </div>
  
  <footer>
    <p>كاتب المقال: أحمد محمد</p>
  </footer>
</article>

(2) تعليقات المنتدى

<div class="comments">
  <h5>التعليقات</h5>
  
  <article class="comment" id="comment-123">
    <header>
      <h6>بواسطة: محمد علي</h6>
      <p><time datetime="2023-05-10T14:30">10 مايو، 2:30 مساءً</time></p>
    </header>
    <p>هذا تعليقي على الموضوع...</p>
  </article>
  
  <article class="comment" id="comment-124">
    <header>
      <h6>بواسطة: سارة أحمد</h6>
      <p><time datetime="2023-05-11T09:15">11 مايو، 9:15 صباحاً</time></p>
    </header>
    <p>تعليق آخر على الموضوع...</p>
  </article>
</div>

(3) أخبار متعددة

<main>
  <h1>أحدث الأخبار</h1>
  
  <article class="news-item">
    <h5>عنوان الخبر الأول</h5>
    <p>ملخص الخبر الأول...</p>
    <a href="news1.html">اقرأ المزيد</a>
  </article>
  
  <article class="news-item">
    <h5>عنوان الخبر الثاني</h5>
    <p>ملخص الخبر الثاني...</p>
    <a href="news2.html">اقرأ المزيد</a>
  </article>
</main>

فوائد استخدام <article>

• تحسين SEO: يساعد محركات البحث على فهم بنية المحتوى
• إمكانية الوصول: يساعد قارئات الشاشة على التنقل في المحتوى
• تنظيم الكود: يجعل HTML أكثر قابلية للقراءة والصيانة
• إعادة الاستخدام: يسهل إعادة استخدام المحتوى في سياقات مختلفة

التوافق مع المتصفحات

عنصر <article> مدعوم في جميع المتصفحات الحديثة بما في ذلك:

Chrome

مدعوم بالكامل

Firefox

مدعوم بالكامل

Safari

مدعوم بالكامل

Edge

مدعوم بالكامل

Internet Explorer

منذ الإصدارات القديمة

Opera

مدعوم بالكامل

النصائح الفنية

• يمكن أن يحتوي <article> على:
  • عناوين (<h1>- <h6>)
  • فقرات (<p>)
  • صور (<img>)
  • روابط (<a>)
  • قوائم (<ul>, <ol>)
  • وعناصر HTML أخرى
• يمكن أن يحتوي <article> على عناصر <article> أخرى (مثل التعليقات داخل مقال)
• يمكن استخدام <article> مع العناصر الدلالية الأخرى مثل:
  • <header> لعنوان المقال وتواريخ النشر
  • <footer> لمعلومات الكاتب أو التذييل
  • <time> للتواريخ والأوقات
• يمكن تنسيق <article> باستخدام CSS مثل أي عنصر آخر:

  article {
    background: #fff;
    border: 1px solid #ddd;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  }
  
  article header {
    border-bottom: 1px solid #eee;
    margin-bottom: 15px;
    padding-bottom: 10px;
  }

الخلاصــــة

عنصر <article> هو أداة قوية في HTML5 لتنظيم المحتوى المستقل، وهو يحسن من:

• البنية الدلالية للصفحة
• تجربة المستخدم
• تحسين محركات البحث
• إمكانية الوصول

استخدمه كلما كان لديك محتوى يمكن توزيعه أو إعادة استخدامه بشكل مستقل.

كيف كان المقال؟