علامة <article> HTML

التعريف والاستخدام

<article> يحدد العنصر العناصر المستقلة والمدمجة.

يجب أن يكون المقال قادرًا على الفهم المستقل، ويمكن توزيعه بشكل مستقل عن الموقع بأكمله.

<articel> المصادر المحتملة للعنصر تشمل:

  • مواضيع المنتدى
  • مقالات المدونة
  • تقارير الأخبار
  • تعليقات المستخدمين

ملاحظة:في المتصفح،<article> العنصر نفسه لا يظهر أي أنماط خاصة. ولكن يمكنك استخدام أنماط CSS لتعديلها <article> عنصر (انظر المثال أدناه).

انظر أيضًا:

دليل DOM HTML:مفهوم المقال

مثال

مثال 1

ثلاثة مقالات مستقلة ومستقلة بشكل كامل:

<article>
<h2>جوجل كروم</h2>
<p>جوجل كروم هو متصفح إنترنت تم تطويره من قبل جوجل، تم إطلاقه في عام 2008. كروم هو أكثر المتصفحات شعبية في العالم اليوم!</p>
</article>
<article>
<h2>موزيلا فايرفوكس</h2>
<p>موزيلا فايرفوكس هو متصفح إنترنت مفتوح المصدر تم تطويره من قبل موزيلا. منذ يناير 2018، كان فايرفوكس ثاني أكثر المتصفحات شعبية.</p>
</article>
<article>
<h2>Microsoft Edge</h2>
<p>Microsoft Edge یک مرورگر اینترنتی است که توسط مایکروسافت توسعه داده شده و در سال ۲۰۱۵ منتشر شده است. Microsoft Edge جایگزین Internet Explorer شده است.</p>
</article>

آزمایش کنید

مثال 2

استخدام CSS لضبط أنماط عناصر <article>:

<html>
<head>
<style>
.all-browsers {
  margin: 0;
  padding: 5px;
  background-color: lightgray;
}
.all-browsers > h1, .browser {
  margin: 10px;
  padding: 5px;
}
.browser {
  background: white;
}
.browser > h2, p {
  margin: 4px;
  font-size: 90%;
}
</style>
</head>
<body>
<article class="all-browsers">
  <h1>أكثر المتصفحات شعبية</h1>
  <article class="browser">
    <h2>جوجل كروم</h2>
    <p>جوجل كروم هو متصفح إنترنت تم تطويره من قبل جوجل، تم إطلاقه في عام 2008. كروم هو أكثر المتصفحات شعبية في العالم اليوم!</p>
  </article>
  <article class="browser">
    <h2>موزيلا فايرفوكس</h2>
    <p>موزيلا فايرفوكس هو متصفح إنترنت مفتوح المصدر تم تطويره من قبل موزيلا. منذ يناير 2018، كان فايرفوكس ثاني أكثر المتصفحات شعبية.</p>
  </article>
  <article class="browser">
    <h2>Microsoft Edge</h2>
    <p>Microsoft Edge یک مرورگر اینترنتی است که توسط مایکروسافت توسعه داده شده و در سال ۲۰۱۵ منتشر شده است. Microsoft Edge جایگزین Internet Explorer شده است.</p>
  </article>
</article>
</body>
</html>

آزمایش کنید

خصوصیات جهانی

<article> این تگ همچنین از خصوصیات رویداد پشتیبانی می‌کند خصوصیات جهانی در HTML.

خصوصیات رویداد

<article> این تگ همچنین از خصوصیات رویداد پشتیبانی می‌کند خصوصیات رویداد در HTML.

تنظیمات CSS پیش‌فرض

بیشتر مرورگرها از مقادیر پیش‌فرض زیر برای نمایش استفاده می‌کنند <article> عنصر:

article {
  display: block;
}

پشتیبانی مرورگر

اعداد در جدول نشان‌دهنده نسخه‌ای اولیه از مرورگرها است که این عنصر را پشتیبانی می‌کنند.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
6.0 9.0 4.0 5.0 11.1