آموزش تگ article در HTML
تگ article در HTML
فهرست موضوعات در این آموزش
یکی از تگ های جدید در اسناد html که در نسخه ۵ این زبان اضافه شد، تگ article می باشد.
تگ article یا تگ مقالات به عنوان یکی از تگ های مستقل در سند html کاربرد دارد.
یعنی محتوا و مجموعه عناصری که در داخل یک تگ article باز و بسته می آید، دارای ماهیتی مستقل از دیگر المان های به کار رفته در صفحه می باشد.
هر تگ article می تواند دارای مجموعه تگ هایی درون خود باشد.
تگ article می تواند دارای تصویر (تصویر بند انگشتی) ، بخشی از محتوای پست ، عنوان پست و… باشد.
ویژگی های تگ article در html
تگ article یا تگ مقالات از انواع attributes یا ویژگی ها پشتیبانی می کند.یه موارد زیر دقت کنید:
- شما می توانید درون تگ article یا مقالات از تگ سربرگ header استفاده کنید.
- همچنین می توانید در قسمت پایین این تگ از تگ پابرگ footer استفاده کنید.
- داخل تگ article حتما از تگ heading (h1 , h2, h3,h4,h5 ,h6 …) استفاده کنید.
- تگ article دارای یک تگ باز ( Opening Tag ) و یک تگ بسته ( Closing Tag ) است.
برسی تگ article
کلمه Article در لغت به معنای [ مقاله ] می باشد، این یعنی ما با استفاده از این تگ میتوانیم مقاله یا مثلا مطالب و یا بطور کلی پست های سایت مون رو درون این تگ قرار دهیم.
در نسخه های اولیه زبان HTML اصلا چیزی به اسم تگ article نبود و حتی خیلی از تگ ها و صفت ها اصلا وجود نداشتن، اون موقع درک کردن یک صفحه وب برای موتورهای جستجوگر ( مثه گوگل ) خیلی سخت و پیچیده بود، مثلا گوگل اصلا نمیتونست کدهای یک صفحه رو از همدیگه جدا کنه ( که بگه مثلا این تگ article هست برای مطالب سایت و.. )
ولی الان دیگه با وجود تگ هایی مثه article یا footer یا header و.. درک و فهم یک صفحه وب برای موتورهای جستجوگر خیلی خیلی راحته.
الان دیگه وقتی مرورگرها یا موتورهای جستجوگر این تگ رو ببینن متوجه میشن که محتوای درون این تگ یک محتوای مستقل است محتوایی که میتونه معنی و مفهموم داشته باشه، محتوایی که با بقیه قسمت های یک سایت میتونه فرق داشته باشه که در مجموع میشه همون مطلب یا پست سایت، تموم شد رفت
آموزش تگ header در html فیلم آموزشی
مثال از تگ article
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!DOCTYPE html> <html> <head> <title>آموزش تگ article </title> </head> <body> <article> <h1>Title of the article</h1> <p>Text of the article</p> <a href="https://replywp.com">پاسخ وردپرس</a> </article> </body> </html> |
مثال شماره ۲ : استفاده از تگ Article درون تگ Section
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<!DOCTYPE html> <html> <head> <title>آموزش تگ article </title> </head> <body> <section> <h1>Articles about flowers</h1> <article> <h2>Roses</h2> <p>Rose – the queen of flowers - is the object of worship and ardent love. Since time immemorial, the rose has been the object of worship and admiration.</p> <a href="https://replywp.com">پاسخ وردپرس</a> </article> <article> <h2>Lilies</h2> <p> Lily - an amazing beauty flower, one of the most ancient among a variety of bulbous plants. </p> <a href="https://replywp.com">پاسخ وردپرس</a> </article> </section> </body> </html> |
توضیحات در مورد تگ article
- از این تگ میتوانید برای ایجاد مطالب یا در واقع پست های اصلی سایتتون، و مطالب انجمن ها، مطالب خبری ( در سایت های خبری ) و یا نظرات یا دیدگاهای کاربران استفاده نمایید.
- تنها کاربرد و هدف این تگ فقط برای درک بهتر موتورهای جستجوگر می باشد
- این تگ بصورت عادی هیچ ظاهر یا استایل خاصی نداره ولی خب زبان CSS برای همین درست شده که بتونیم به هرچی دوس داشتیم تو صفحه استایل بدیم.
آموزش تگ section در HTML5 فیلم آموزشی
سوالات متداول
فرق بین تگ های Section و Article چیست؟ آیا میتوان از تگ Section درون تگ Article استفاده کرد و یا برعکس؟
پاسخ : بله درکل میشه، هم میشه از تگ Article درون تگ Section استفاده کرد و هم برعکس، فقط بستگی به نحوه استفاده شما داره. مثلا میتوان یک Section ایجاد کرد با نام ( آخرین مطالب سایت ) و درون این سکشِن از تگ Article استفاده کرد و آخرین مطالب سایت رو به نمایش گذاشت.
و یا میتوان یک مطلب با تگ Article ایجاد کرد و سپس محتوای درون مطلب را بخش بندی کرد، مثلا بخش اول تعریف و توضیحات ، بخش دوم تصاویر و.. بخش سوم هم مثلا نتیجه گیری – پس اینجوری هم میشه از تگ Section درون تگ Article استفاده کرد و هم برعکس. ( لطفا به مثال های شماره ۲ و ۳ زیر که در این رابطه هستند توجه نمایید )
برای نصب نرم افزار برای کد نویسی html از لینک زیر استفاده فرمایید.
آموزش نرم افزار های مورد نیاز طراحی وب سایت
در صورت که به طراحی وب آشنایی ندارید میتوانید از آموزش زیر استفاده فرمایید .
در صورت که میخواهید به صورت حرفه ای طراحی وب را فرا بگیرید از لینک زیر استفاده فرمایید .
آموزش css html آموزش HTML5 CSS3
در یافت تمام جلسات آموزش مرحله به مرحله html از لینک زیر استفاده فرمایید.
هنوز بررسی‌ای ثبت نشده است.