این آموزش در تاریخ ۱۴۰۲/۰۶/۲۳ آپدیت شده است.
آموزش تگ article در HTML
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش تگ article در HTML با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
تگ article در HTML
تگ article تگی است که ما با استفاده از آن میتوانیم یک محتوای مستقل ( یعنی یه چیزی که معنی مفهومی داره ) را در یک صفحه ی وب ایجاد نماییم.
کلمه Article در لغت به معنای [ مقاله ] می باشد، این یعنی ما با استفاده از این تگ میتوانیم مقاله یا مثلا مطالب و یا بطور کلی پست های سایت مون رو درون این تگ قرار دهیم.
در نسخه های اولیه زبان HTML اصلا چیزی به اسم تگ article نبود و حتی خیلی از تگ ها و صفت ها اصلا وجود نداشتن، اون موقع درک کردن یک صفحه وب برای موتورهای جستجوگر ( مثه گوگل ) خیلی سخت و پیچیده بود، مثلا گوگل اصلا نمیتونست کدهای یک صفحه رو از همدیگه جدا کنه ( که بگه مثلا این تگ article هست برای مطالب سایت و.. )
ولی الان دیگه با وجود تگ هایی مثه article یا footer یا header و.. درک و فهم یک صفحه وب برای موتورهای جستجوگر خیلی خیلی راحته.
الان دیگه وقتی مرورگرها یا موتورهای جستجوگر این تگ رو ببینن متوجه میشن که محتوای درون این تگ یک محتوای مستقل است محتوایی که میتونه معنی و مفهموم داشته باشه، محتوایی که با بقیه قسمت های یک سایت میتونه فرق داشته باشه که در مجموع میشه همون مطلب یا پست سایت، تموم شد رفت
معمولا از این تگ برای ایجاد موارد زیر در یک وبسایت مورد استفاده قرار میگیرد :
- مطالب / پست انجمن
- مطالب / پست سایت
- نظرات یا کامنت های وبسایت
سوال ارسالی از کاربر محترم سایت : آقای یزدان منجزی
فرق بین تگ های Section و Article چیست؟ آیا میتوان از تگ Section درون تگ Article استفاده کرد و یا برعکس؟
پاسخ : بله درکل میشه، هم میشه از تگ Article درون تگ Section استفاده کرد و هم برعکس، فقط بستگی به نحوه استفاده شما داره. مثلا میتوان یک Section ایجاد کرد با نام ( آخرین مطالب سایت ) و درون این سکشِن از تگ Article استفاده کرد و آخرین مطالب سایت رو به نمایش گذاشت.
و یا میتوان یک مطلب با تگ Article ایجاد کرد و سپس محتوای درون مطلب را بخش بندی کرد، مثلا بخش اول تعریف و توضیحات ، بخش دوم تصاویر و.. بخش سوم هم مثلا نتیجه گیری – پس اینجوری هم میشه از تگ Section درون تگ Article استفاده کرد و هم برعکس. ( لطفا به مثال های شماره ۲ و ۳ زیر که در این رابطه هستند توجه نمایید )
Free-Learn
مثال از تگ article در HTML
در ادامه میتوانید یک مثال از این تگ را مشاهده نمایید.
|
1 2 3 4 5 6 7 8 |
<body dir="rtl"> <article> <h1>آموزش زبان HTML</h1> <p>تکه اول و زبان مادر طراحی وب می باشد، با استفاده از اون میتونیم اسکلت سایتمون رو طراحی کنیم</p> </article> </body> |
مثال شماره ۲ : استفاده از تگ Article درون تگ Section
|
1 2 3 4 5 6 7 8 |
<section> <article> <h1>آموزش زبان HTML</h1> <p>تکه اول و زبان مادر طراحی وب می باشد، با استفاده از اون میتونیم اسکلت سایتمون رو طراحی کنیم</p> </article> </section> |
مثال شماره ۳ : استفاده از تگ Section درون تگ Article
|
1 2 3 4 5 6 7 8 |
<article> <section> <h1>آموزش زبان HTML</h1> <p>تکه اول و زبان مادر طراحی وب می باشد، با استفاده از اون میتونیم اسکلت سایتمون رو طراحی کنیم</p> </section> </article> |
مثال شماره ۴ : استایل دادن به تگ Article با استفاده از زبان CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<style> .mypost{ background-color:#f2f2f2; padding:10px; margin:10px 0; border-radius:7px; font-family:tahoma; font-size:14px; } .mypost h1{ color:blue; font-size:18px; } </style> |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از تگ article در HTML پشتیبانی میکنند یا خیر.
| نام مرورگر | Chrome | Firefox | Opera | Safari | Edge |
| پشتیبانی | بله | بله | بله | بله | بله |
Free-Learn
پشتیبانی از صفات و رویدادهای عمومی
تگ article از صفات عمومی و رویدادهای عمومی در HTML پشتیبانی می کند.
Free-Learn
نکات و توضیحات
- از این تگ میتوانید برای ایجاد مطالب یا در واقع پست های اصلی سایتتون، و مطالب انجمن ها، مطالب خبری ( در سایت های خبری ) و یا نظرات یا دیدگاهای کاربران استفاده نمایید.
- تنها کاربرد و هدف این تگ فقط برای درک بهتر موتورهای جستجوگر می باشد
- این تگ بصورت عادی هیچ ظاهر یا استایل خاصی نداره ولی خب زبان CSS برای همین درست شده که بتونیم به هرچی دوس داشتیم تو صفحه استایل بدیم.
Free-Learn
دستورات CSS پیش فرض
معمولا مرورگرها تگ article را بصورت پیش فرض با دستورات CSS زیر نمایش میدهند.
|
1 2 3 |
article { display: block; } |
