جلسه سی و ششم: آموزش کامل تگ article در HTML
به دوره حرفهای آموزشHTML در آوای وب خوش اومدی! اینجا قراره تگ article رو مثل یه حرفهای یاد بگیری! اگه یه روز بخوای توی وبسایتی مقاله بنویسی، پست بزاری یا حتی اخبار منتشر کنی، احتمالاً اولین تگی که باید باهاش آشنا بشی، همین <article> هست. این تگ یکی از ستونهای اصلی طراحی وب معناییه و وقتی درست استفاده شه، هم تجربه کاربری رو بهتر میکنه، هم به سئو کمک میکنه، هم کدت تمیزتر میشه! تو این مقاله، از صفر تا صد تگ <article> رو با مثالای باحال، نکات خفن، و ترفندهای سئو یاد میگیری! آمادهای ؟ بزن بریم!
آنچه در این مقاله میخوانید:
🏷️ تگ article چیه و چرا مهمه؟
تگ <article><article> برای بخشهایی از محتوا استفاده میشه که بهصورت مستقل و کامل قابل خوندن باشن. یعنی چی؟ یعنی اگه اون تکه رو از کل سایت جدا کنی و بهتنهایی بزاری یه جا، هنوز هم معنی بده و بشه فهمید چی میخواد بگه.
مثالهایی از چیزهایی که معمولاً تو <article> قرار میگیرن:
- پستهای وبلاگ
- اخبار
- نظرات کاربران
- توضیحات محصول
- کارتهای مقالات یا محتوای تکرارپذیر
🧱 ساختار تگ article: ساده اما خفن!
تگ article یه تگ جفتیه! یعنی باید باز و بسته بشه! کافیه محتوات رو با یه تیتر (مثل <h1>) داخلش بذاری! نگاه کن:
<article>
<h1>سلام دنیا</h1>
<p>این یه مقالهست</p>
</article>🔍 تفاوت article با section و div چیه؟
| تگ | کاربرد | مستقل بودن محتوا | مناسب برای سئو |
|---|---|---|---|
<article> | محتوای مستقل مثل پست | ✅ بله | ✅ خیلی خوب |
<section> | تقسیمبندی معنایی صفحه | ❌ نه همیشه | ✅ مناسب |
<div> | گروهبندی صرفاً بصری | ❌ نه | ❌ فقط برای استایلدهی |
✅ نتیجه: وقتی محتوای مستقل داری که میخوای گوگل و کاربران بهتر بفهمنش، از <article> استفاده کن.
💡 کاربردهای تگ article
- پستهای وبلاگ: هر پست یه <article> باحال!
- اخبار: هر خبر یه محتوای مستقل!
- نقد و بررسی: بررسی محصولات یا خدمات!
- نظرات و پاسخها: تو انجمنها یا کامنتها!
🎯 مثالهای عملی: تگ article رو تو عمل ببین!
بیا چند نمونه باحال ببینیم!
✅ مثال 1: مقاله ساده وبلاگ
<body>
<article>
<header>
<h1>آموزش HTML</h1>
<p>18 دی 1403</p>
</header>
<p>محتوای مقاله...</p>
<footer>
<p>نویسنده: علی</p>
</footer>
</article>
</body>✅ مثال 2: لیست اخبار
<article>
<h2>خبر جدید</h2>
<p>امروز یه اتفاق خفن افتاد...</p>
</article>✅ مثال 3: لیست اخبار
<article>
<h1>بررسی گوشی</h1><img src="phone.jpg" alt="گوشی">
<p>مزایا...</p>
</article>✅ مثال 4: بخش نظرات
<article>
<header>
<h3>نظر علی</h3>
</header>
<p>این محصول عالیه!</p>
</article>💡 نکات پیشرفته: حرفهایتر شو!
چندتا نکته خفن برای تگ article!
- استفاده صحیح از تگهای هدینگ (تیتر): داخل هر بخش حتماً از یک تگ هدینگ (تیتر) باید استفاده بشه.
- محتوای کامل: از چیزای اضافی یا تکراری تو
articleپرهیز کن! - ترکیب با تگ
headerو تگfooter: هرarticleمیتونه تیتر و اطلاعات اضافی داشته باشه!
🎯 مثال حرفهای و کاربردی از تگ article
<article>
<header>
<h1>بهترین روشهای سئو برای وبسایتها</h1>
<p>تاریخ انتشار: <time>18 ژانویه 2025</time></p>
</header>
<section>
<h2>مقدمه</h2>
<p>در این مقاله، بهترین روشها و تکنیکهای سئو را برای بهبود رتبهبندی وبسایت شما بررسی خواهیم کرد...</p>
</section>
<footer>
<p>نویسنده: آوای وب</p>
</footer>
</article>⚠️ اشتباهات رایج
- استفاده از article برای محتوای جزئی (مثلاً یه پاراگراف ساده)
- استفاده از article بدون heading
- گذاشتن چندتا مقاله داخل article بدون ساختار درست
- استفاده فقط برای استایلدهی (اون divه، نه article!)
❓ پرسشهای متداول
تگ article کِی استفاده میشه؟
هر وقت محتوا مستقله و خودش یه بخش مجزاست (مثل پست، خبر، مقاله).
تفاوت article با section چیه؟
section فقط دستهبندی منطقیه، ولی article یه بخش مستقل قابلخوندنه.
توی همه مرورگرها پشتیبانی میشه؟
بله، از HTML5 به بعد همه مرورگرهای مدرن ساپورتش میکنن.
📝 پروژه عملی: یه مقاله واقعی بساز!
خب، حالا نوبت توئه!
✅ وظایف:
- یه
<article>بساز که توش یه پست وبلاگ نوشته شده - از تگهایی مثل
<header>,<h2>,<p>,<footer>استفاده کن
تمرین عملی بهترین راه یادگیریه. بترکون! در ضمن، یادت نره اگه مبتدی هستی، کدات رو تو W3C Validator چک کنی و مطمئن شی درست نوشتی.
🏁 نتیجهگیری
- تگ
<article>یکی از مهمترین تگهای معنایی HTML برای محتوای مستقل مثل پستها و مقالاته - باعث ساختاردهی بهتر، دسترسیپذیری بیشتر و سئوی قویتر میشه
- با استفاده درست از article، میتونی صفحات حرفهایتر و بهینهتری بسازی
💬 ایدههات رو فریاد بزن!
نظرت راجب تگ article چیه؟ دلت میخواد چه چیزی به این آموزش اضافه کنیم؟ سوالی تو ذهنت مونده؟ تو نظرات برامون بگو! تیم حرفهای پشتیبانی با جون و دل جوابت رو میده!
شهرام نجفی
شهرام نجفی — بیش از ۱۵ سال طراحی و توسعهٔ وب بهصورت فریلنس. قالب اختصاصی آوای وب را از صفر نوشتهام. مطالب این سایت را بر پایهٔ مستندات رسمی MDN و WHATWG مینویسم و قبل از انتشار در مرورگرهای واقعی تست میکنم. نمونهکارهایم در shahramnajafi.com است.