آموزش و یادگیری تگ article در HTML

در اين بخش از دوره آموزش HTML در آموزش دون، با تگ <article> آشنا مي‌شويم. اين تگ براي نمايش بخش‌هاي مستقل از محتوا مانند مقالات، پست‌هاي وبلاگ، نظرات کاربران يا خبرها استفاده مي‌شود. هر بخش Article بايد بتواند به‌تنهايي و مستقل از ديگر بخش‌ها معني‌دار باشد.

تگ article در HTML چيست؟

تگ <article> يکي از تگ‌هاي معنايي (Semantic) در HTML5 است که براي نمايش محتواي مستقل و خودکفا طراحي شده است. محتواي درون <article> معمولاً شامل عنوان، متن، تصوير، نويسنده و زمان انتشار مي‌شود.

به طور معمول از اين تگ در بخش‌هايي مانند:

• پست‌هاي وبلاگ
• اخبار و اطلاعيه‌ها
• نظرات کاربران
• پست‌هاي شبکه‌هاي اجتماعي
• محتواي مجله يا روزنامه آنلاين

مثال ساده از تگ article

<article>
  <h2>آموزش تگ article در HTML</h2>
  <p>تگ article براي نمايش يک بخش مستقل از محتوا به کار مي‌رود.</p>
</article>

در اين مثال، محتواي درون تگ <article> به‌صورت مستقل نمايش داده مي‌شود و مي‌تواند در صفحه يا فيد RSS جداگانه قرار گيرد.

نمونه کاربرد در وبلاگ

<article>
  <header>
    <h2>آموزش HTML از صفر</h2>
    <p>نوشته شده توسط <span>آموزش دون</span> در تاريخ ????/??/??</p>
  </header>
  <p>در اين مقاله با مفاهيم اوليه HTML و ساختار صفحات وب آشنا مي‌شويم...</p>
  <footer>
    <a href="/blog/1">ادامه مطلب</a>
  </footer>
</article>

در اين مثال، تگ‌هاي <header> و <footer> درون مقاله استفاده شده‌اند تا بخش عنوان و لينک ادامه مطلب جداگانه تعريف شوند.

چند article در يک صفحه

<section>
  <article>
    <h2>خبر اول</h2>
    <p>متن خبر شماره ?</p>
  </article>

  <article>
    <h2>خبر دوم</h2>
    <p>متن خبر شماره ?</p>
  </article>
</section>

در اين حالت چند مقاله مجزا در يک بخش (section) نمايش داده مي‌شوند.

صفات مهم تگ article

استايل‌دهي پيشنهادي براي article

article {
  background-color: #fff;
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 20px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  transition: 0.3s;
}

article:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

اين استايل باعث مي‌شود مقالات ظاهري زيبا و مدرن داشته باشند و هنگام هاور شدن از صفحه متمايز شوند.

نکات حرفه‌اي در استفاده از article

• هر مقاله بايد بتواند به‌صورت مستقل (مثلاً در RSS يا صفحه جداگانه) منتشر شود.
• از تگ <article> براي بخش‌هاي تکرارشونده مانند پست‌ها استفاده کنيد.
• در داخل <article> مي‌توانيد از تگ‌هاي معنايي مانند <header>، <footer> و <section> استفاده کنيد.
• براي بهبود سئو، از تگ‌هاي <h1> تا <h3> درون article استفاده کنيد.

نکته: هر مقاله در HTML بايد مفهوم و ارزش مستقل خود را داشته باشد، نه فقط بخشي از يک توضيح کلي.

براي يادگيري بيشتر درباره تگ‌هاي معنايي HTML، پيشنهاد مي‌کنيم در دوره آموزش HTML مقدماتي تا پيشرفته آموزش دون شرکت کنيد.

براي مشاهده تمام آموزش‌هاي HTML، به صفحه اصلي آموزش دون مراجعه کنيد.