جلسه ی چهل و چهارم: تگ Article در HTML

تگ Article در HTML

در جلسه ی پیش در مورد تگ Section و کاربرد آن صحبت نموده ایم (برای دیدن آموزش تگ Section در HTML کلیک کنید) در این جلسه میخواهیم در مورد تگ Article و کاربرد آن صحبت کنیم. (برای دیدن آموزش Html به زبان ساده کلیک کنید)

 

توضیح تگ Article در HTML

 

تگ Article یک تگ مستقل می باشد که به تازگی در نسخه HTML5 وارد این زبان شده است. یکی از ویژگی های این تگ این است که به طور مستقل ارائه شده و می تواند معنا و مفهوم خاص خود را برساند و الزاما نیازی نیست که با تگ های دیگر ارتباط معنایی داشته باشد و در هر قسمتی از سایت که نیاز بود می توان آن را ارائه نمود.

تگ Article نیز مانند تگ Section می تواند تگ های عمومی مثل تگ p یا هدینگ ها و … را درون خود جای دهد. همانطور که می دانید درون تگ Section می توان Section های دیگر قرار داد اما درون تگ Article نمی توان از تگ Article دیگری استفاده نمود. عموما تگ Section و تگ Article شبیه یکدیگر هستند اما تگ Article معنای دقیق تری را نسبت به تگ Section دارد و مفهوم را بهتر می رساند و در کل تگ Section مادر تگ Article می باشد. به طور کلی تگ Article محتویات موجود در تگ Section را به بخش های مختلف تقسیم می کند.

 

کاربرد تگ Article در HTML

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

عموما از تگ Article می توانیم در مکان های زیر استفاده کنیم:

  1. در قسمت ساخت پست در فروم ها
  2. در قسمت ساخت پست در وبلاگ ها
  3. در صفحه ی اصلی سایت
  4. در قسمت مطالب برای سایت های خبری
  5. در قسمت نظرات کاربران

 

نکاتی درباره ی تگ Article در HTML

نکته۱: این تگ توسط تمامی مرورگر ها پشتیبانی می شود.

نکته۲: یادتان باشد زمانی که می خواهید از تگ Article استفاده کنید حتما درون آن از تگ های Header برای ساخت سربرگ و Footer برای ساخت قسمت پایینی عنصر خود استفاده کنیم.

نکته۳: یادتان باشد برای ایجاد سر فصل ها در تگ Article باید از Headeing ها استفاده کنیم.

نکته۴: یادتان باشد از تگ Article می توانید درون تگ Section استفاده کنید.

نکته۵: سعی کنید از این تگ در جای درست استفاده کنید زیر اگر از این تگ در مکان درست استفاده نشود برای وب سایت ما مضر می باشد.

نکته۶: در صورتی که نمی توانید تشخیص دهید که آیا نیاز است از این تگ استفاده کنید یا خیر به جای آن از تگ Div استفاده کنید.

برای فهم بهتر تگ Article در HTML به مثال زیر توجه کنید:

کد HTML:

<body>

<div class="container">

<div class="row">

<section>

<div class="col-lg-4">

<article>

<h3>عنوان مطلب</h3>

<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ</p>

</article>

</div>

<div class="col-lg-4">

<article>

<h3>عنوان مطلب</h3>

<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ</p>

</article>

</div>

<div class="col-lg-4">

<article>

<h3>عنوان مطلب</h3>

<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ</p>

</article>

</div>

</section>

</div>

</div>

</body>

کد CSS:

body {

background-color: #fff;

}

article {

width: 200px;

float: right;

margin: 20px;

padding: 20px;

box-shadow: 1px 1px 10px rgba(0,0,0,.5);

border-radius: 5px

}

خروجی کد بالا:

تگ Article در HTML

خلاصه مطلب:

  1. تگ Article یک تگ مستقل می باشد که به تازگی در نسخه HTML5 وارد این زبان شده است.
  2. به طور کلی تگ Article معنای دقیق تری را نسبت به تگ Section دارد و مفهموم بهتری را می رساند.
  3. در کل تگ Section مادر تگ Article می باشد.
  4. تگ Article در HTML در لغت به معنای تگ مقاله می باشد.
ابوالفضل کلهری

فعال در زمینه های ui و ux و طراحی وب سایت مسلط به زبان های نشانه گذاری HTML و CSS و همچنین در زمینه ی آموزش زبان های HTML و CSS نیز فعالیت دارم . امیدوارم با آموزش هایی که در این سایت قرار می دهم موجب پیشرفت شما عزیزان باشم.

دیدگاه ها
  • قبل از ارسال دیدگاه خود قوانین بخش دیدگاه ها را مطالعه کنید. ارسال دیدگاه به معنی پذیرش این قوانین است. قوانین بخش دیدگاه ها