تفاوت atricle با section

تفاوت <section> و <article> در HTML5

در این مقاله ی کوتاه درباره دو المنت یا تگ جدید در html5 صحبت می کنیم. section و article. در html قبل از ورژن ۵ برای تفکیک کردن و بخش بندی سندمون فقط از تگ div استفاده می کردیم. اما دو تگ جدید section و article در html5 معرفی شدند. که به جای اینکه همه جا از div استفاده کنیم بتونیم به شکل بهتری مارک آپ (کد زنی) انجام دهیم. اما خیلی از افراد تفاوت این دو تگ را نمی دونند و دقیقا نمی دونند که چه موقع از آنها استفاده کنند. در ادامه به بررسی آنها می پردازیم. با تفاوت بین آنها آشنا می شویم. یاد می گیریم که کی و کجا از آنها استفاده کنیم. همچنین دو تگ aside و time را هم به طور خلاصه بررسی می کنیم.

تگ <article>

اساسا محتوا مستقل باشد. وقتی از این تگ استفاه می کنیم که محتوا کاملا مستقل است. یعنی اگر محتوای بخش article را جدا کنیم و به طور مستقل بخوانیم کاملا قابل فهم باشد و خودش معرف خودش باشد. فرض کنید در حال تنظیم یک سند html هستید. قراره که یک بخش جدید به سند اضافه کنید. خوب حالا بین تگ section و article مردد شدید، که خوب الان باید از کدام از این تگ ها استفاده کنم؟ برای اینکه تشخیص بدین کدام تگ مناسب تره یک نگاه به قسمت مورد نظر بندازید. فرض کنید اگر این قسمت را از کل سایت جدا کنید و کاملا مستقل شود آیا باز هم قابل فهم است؟ اگر اینگونه بود تگ article مناسب است.

تگ <section>

دقیقا همون معنی بخش بندی رو می ده. این بخش باید گروهی از محتواهای با معنی در کنار هم باشند. مثلا قسمت یا بخش نظرات. بخش نظرات یا همان کامنت ها را می تونند یک section باشند.

تگ <section> می تواند زیر مجموعه تگ <article> باشد و تگ <article> هم می تواند زیر مجموعه تگ <section> باشد.

 
تگ article و section

تگ <aside>

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

تگ <time>

این تگ برای نمایش تاریخ و زمان به کار می رود. برای اینکه تاریخ و زمان را قابل فهم برای ماشین کنیم می تونیم از صفت datatime استفاده کنیم. البته استفاده از این صفت یا attribute اختیاری است. اگر از datatime استفاده نکنیم موتورهای جستجو نمی توانند آن را به عنوان یک تاریخ شناسایی کنند.

  
      /*دقیقا تاریخ را در دیت تایم مشخص می کنیم*/

    <time datetime="1397-09-05">پنجم آذر ۹۷</time>

    <time datetime="1397-07-03T10:31:00">97/7/3 - 10:31 </time>
  

نویسنده: سعید پناهی

طراح و توسعه دهنده وب، رابط کاربری. فرانت اند. علاقه مند به یادگیری و آموزش

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

احتمالا از اینها هم خوشتون بیاد

بررسی واحدهای REM -EM – VH- VW و تفاوت بین آنها

برای مدت های طولانی طراحان و توسعه دهندگان وب سایت ها برای اندازه گذاری فونت، حاشیه و یا هر عنصر دیگری از واحد px که نشان دهنده پیکسل بود استفاده می کردند. اما امروزه با توجه به گسترش استفاده از دستگاه های مختلف مانند موبایل و تبلت برای نمایش وب سایت ها لزوم استفاده از واحدهایی که کنترل بیشتری به توسعه دهنده و طراح بدهد بیشتر شد. از این رو واحدهای rem و em تقریبا جای واحد px را گرفت.

css-custom-property

تعریف و استفاده از متغیرها در CSS

مانند سایر زبان های برنامه نویسی که از متغیر ها برای نگهداری مقداری استفاده می شود که بتوان بعدا در هر زمان به آن مراجعه کرد، در سی اس اس هم برای نگهداری و یا ذخیره سازی مواردی مانند رنگ ها، نام فونت، اندازه فونت و … استفاده می شود و می توان در جاهای مختلف فایل سی اس اس آن را صدا کرد و از مقدار آن استفاده کرد. اسم رسمی و صحیح این متغیرها custom properties می باشد که معمولا در بین توسعه دهندگان و برنامه نویسان به نام متغیر جا افتاده است.

نصب و استفاده از npm

نصب و استفاده از NPM

NPM مخفف Node Package Manager است. یک پکیج منیجر یا مدیریت پکیجی است که برای NodeJs نوشته شده است. (npm قسمتی از پلتفرم NodeJs است) البته این به معنای آن نیست که حتما باید در پروژه هایی که با NodeJs نوشته می شوند از NPM استفاده کرد بلکه در خیلی از موارد دیگر هم می شود از آن استفاده کرد. اجرای دستورات NPM از طریق خط فرمان (Command line) صورت می گیرد. دانستن ان پی ام به تنهایی کاربردی ندارد اما پیش نیاز خیلی از تکنولوژی های دیگر وب است.