تگ article در HTML

به نام خداوند علم و دانش. سلام به دوستان گرامی و مخاطبین وب سایت آموزشی کدیونی، وقت همگی بخیر، در این صفحه با مطلب تگ article در HTML از سری آموزش های HTML در خدمت شما عزیزان هستیم.

در جهان امروز که اینترنت در دسترس عموم قرار گرفته به عنوان منبعی برای کسب اطلاعات شناخته می شود. محتوا، بخش مهمی از فضای مجازی به حساب می آید و موتور های جستجوگر به دنبال سایت هایی هستند که مطالب آن ها کیفیت بالاتری داشته باشد. در نسخه های قبلی HTML تگی منحصر به فرد برای نمایش محتوای سایت وجود نداشت اما در HTML5 تگ معناداری به نام article معرفی شده که این تگ به تشخیص محتوا توسط موتورهای جستجو کمک می کند.

تگ article چیست؟

تگ article که ترجمه آن به زبان فارسی مقاله می شود برای نمایش محتوای مقالات در سایت استفاده می شود.

این تگ با <article> شروع شده و با </article> پایان می یابد.

<article>متن</article>

درون این تگ می توان از تگ های هدینگ (h1, h2, h3, h4, h5, h6)، تگ p و ... استفاده کرد.

تگ article در موارد زیر کاربرد دارد:

• مطالب درون وبسایت یا وبلاگ
• مطالب انجمن ها
• نظرات کاربران

کد:

<article>
  <h1>عنوان</h1>
  <p>متن</p>
</article>

اجرا

مثال های تگ article

مثال 1:

<article>
  <h1>سیستم عامل ها</h1>
  <article>
    <h2>اندروید</h2>
    <p>سیستم عامل اندروید</p>
  </article>
  <article>
    <h2>لینوکس</h2>
    <p>سیستم عامل لینوکس</p>
  </article>
</article>

مثال 2:

می توان درون این تگ، از تگ هایی مانند article، section و ... استفاده کرد.

<article>
  <h2>سیستم عامل اندروید</h2>
  <section>
    <h3>تاریخچه</h3>
    <p>تاریخچه سیستم عامل اندروید</p>
  </section>
  <section>
    <h3>کاربران</h3>
    <p>کاربران سیستم عامل اندروید</p>
  </section>
</article>

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

تنظیمات پیش فرض CSS تگ article در اکثر مرورگرها به صورت زیر است:

article {
  display: block;
}

در صورت اختیار می توانید مانند مثال زیر با استفاده از css استایل مد نظر خود را پیاده سازی کنید.

کد:

article {
  margin: 5px;
  padding: 3px;
  background: #f1f1f1;
  font-family: tahoma;
  font-size: 12px;
}

تگ article از صفات global مانند id و class پشتیبانی می کند.

سازگاری با مرورگرها

تگ article با مرورگرهای زیر سازگار است:

• گوگل کروم
• فایرفاکس
• اج
• اپرا
• سافاری
• گوگل کروم اندروید
• فایرفاکس اندروید
• اپرا اندروید
• سافاری iOS