عناصر معناگرا در HTML5 :

Friday, September 2nd, 2016

معرفی عناصر معنا گرا در HTML5
معرفی عناصر معنا گرا در HTML5

عناصر معنا گرا درHTML5 به این معنی است که هر عنصر بیانگر محتوای درون خود است به عبارت دیگر هر عنصر در HTML5 می بایست به شکل اصولی دارای محتوایی خاص باشد و در واقع "تگ های این عناصر میگوید که در من چه محتوایی است! ".

عنصرheader در HTML5 :

خوب اولین عنصری که به آن می پردازیم عنصر header است. بر اساس مستندات WHATWG محتوای این عنصر را میتوان اینگونه معرفی کرد " گروهی از اطلاعات ابتدایی و یا لینک های پیمایش کمکی ." در واقع به زبان دیگر شما هر آنچه که تا پیش از HTML5 در صفحات خود در تگ < div id="header" > قرار میدادید را میتوانین درون برچسب header قرار دهید . شما میتوانید از عنصر header بیش از یک بار در صفحه خود استفاده نمایید. در واقع میتوانید از این عنصر در داخل بخش های مختلف سایت خود استفاده کرده و از طریق این برچسب محتوای هر کدام ازاین بخش ها را معرفی کنید.عنصر header می تواند حاوی داده های مقدمه و یا لینک های پیمایش کمکی باشد. این header را میتوان برای بخش خاص از صفحه در نظر گرفت و یا به کل یک صفحه اعمال کنید و یا هر دو. عنصر header اغلب در بالای صفحه یا داخل یک section قرار می گیرد ولی تعریف آن از محل قرار گیری آن متمایز است. در طرح سایت شما ممکن است که عنوان یک مقاله یا یک پست وبلاگ در سمت چپ, راست و یا حتی در زیر مطالب نمایش داده شود. با این حال برای شرح محتواییتان میتوانید از برچسب header استفاده کنید.

عنصر section در HTML5 :

عنصر دیگر در HTML5 که باید با آن آشنا شوید عنصر section است. با استناد به تعاریف WHATWG عنصر section را اینگونه می توان معرفی کرد :عنصر section یک بخش عمومی را در سند شما ایجاد می کند. یک section در این تعریف مجموعه ای از محتواهاست که دارای عنوان هستند. در ادامه این تعریف آمده است که نباید از برچسب section برای گروه بندی محتوا تنها به منظور دادن یک سبک خاص به آن ویا اعمال یک قابلیت با اسکریپت نویسی استفاده شود. اگر هدف شما دادن یک سبک خاص به آن و یا اعمال یک قابلیت با استفاده از CSS سبکی خاص را به آن داده ها بدهید استفاده از برچسب section اشتباه است. حال اگر تنها قصد سبک دهی به یک گروه از داده ها را داشته باشیم باید چه کار کنیم ؟ میتوان از بر چسب div استفاده نمود که از نظر معنا گرا بودن هیچ ارزشی ندارد . محتوای برچسب section باید از نظر محتوا با هم مرتبط باشند از این رو استفاده از این برچسب برای قرار دادن داده های غیر مرتبط در یک گروه کار اشتباهی است. نمونه هایی از استفاده صحیح عنصر section را در اینجا خواهیم گفت :هر کدام از بخش ها در یک مجموعه که دارای طراحی سر برگ هستند.قسمت های مختلف از یک صفحه طولانی.بخش های داخل صفحه درباره ما, مثال : صفحه درباره مای شاید ممکن است حاوی بخش های مختلفی باشد که تاریخچه شرکت , اهداف و تیم تشکیل دهنده باشد.بخش های مختلف یک سایت خبری آنلاین برای مثال : مقالات بخش های ورزشی کار و اقتصادی می توانند هر کدام در section مربوط به خودشان قرار گیرند.همچنین یادتان باشد که می توانید بر چسب section را در داخل یک برچسب section دیگر نیز بنویسید و استفاده تو در تو از این برچسب مجاز است البته به شرطی که در شرایط درست از آن استفاده شود.

عنصر article در HTML5 :

عنصر article شبیه به عنصر section است اما یک تفاوت فاحش بین این دو وجود دارد, بر اساس تعریف WHATWG عنصر article اینگونه معرفی شده است : عنصر article در اصل یک تر کیب مستقل در سند , صفحه, برنامه تحت وب و یا سایت است و به طور مستقل می توان آن را نشر داد و یا دوباره استفاده کرد. به عنوان مثال اگر بخواهیم مطالب یک سایت را در سایتی دیگر منتشر کنیم می توانیم از این بر چسب استفاده کنیم. واژه های کلیدی در این تعریف, عبارت های " ترکیب مستقل " و " قابلیت نشر مستقل " است . در حالی که بر چسب section می تواند حاوی هر محتوا باشد و تنها مرتبط بودن محتوای داخل این بر چسب مهم است, برچسب article تنها باید حاوی یک تکه از محتوا باشد که کاملا منحصر به فرد و متمایز از دیگر محتواهاست. درک این تفاوت شاید کمی برایتان سخت باشد. زمانی که در استفاده از این بر چسب شک دارید, این تست را انجام دهید : اگر محتوای شما قرار است در سایتی دیگر , آن هم بدون ایجاد هیچ تغییری , منتشر شود و یا از طریق RSS قرار است مطالب تان در اختیار دیگران جوامع مجازی مانند توییتر و فیسبوک منتشر شود , باید از برچسب article استفاده کنید. در نهایت محتوای عنصر article را شما مشخص میکنید اما مواردی را نیز ما به شما پیشنهاد می کنیم که در آنها بهتر است محتوا را داخل بر چسب article قرار دهید : مقالات مجلات و روزنامه ها ,پست های وبلاگ ,کامنت های ارسال شده توسط کاربران ,در پایان, همانند عنصر section , عنصر article را نیز می توانید در داخل یک بر چسب article دیگر استفاده کنید. همین طور می توانید از برچسب section در داخل بر چسب article وهمچنین بر عکس آن را نیز استفاده کنید.

عنصر nav در HTML5 :

برچسب nav دقیقا بیانگر محتوایی است که در آن قرار خواهد گرفت : گروهی از لینک های مربوط به بخش پیمایش سایت . اگر چه استفاده رایج از این بر چسب این است که یک لیست بدون شماره از لینک ها را در خود جای دهد اما گزینه های دیگری نیز وجود دارد. شما می توانید عنصر nav را در دور یک پاراگراف متن که حاوی لینک های اصلی سایت به یک صفحه و یا یک بخش سایت است نیز قرار دهید. در هر کدام از موارد , عنصر nav باید لینک های مربوط به پیمایش سایت را در خود جای دهد و هدف اصلی از طراحی این برچسب نیز همین بوده است. از این رو برای مثال پیشنهاد شده است که این برچسب برای نمایش چند لینک مختصر در بخش پایینی سایت استفاده نکنید. برچسب nav را می توانید بیش از یک بار در یک صفحه به کار ببرید. اگر در طراحی سایت خود , یک نوار پیمایش اصلی دارید, این بخش باید داخل بر چسب nav قرار گیرد.

عنصر aside در HTML5 :

این عنصر نماینده ی بخشی از صفحه است که " به طور ضمنی , مرتبط با محتوایی است که در اطراف بر چسب aside قرار دارد و می توان آن را از محتوای صفحه , مجزا دانست. " درون برچسب aside می توان بخشی از محتوا را قرار داد که با این موارد مرتبط است : یک بخش خاص از محتوای سایت که کاملا مستقل است.کل یک صفحه یا یک سند که البته در طراحی سنتی بخش مرتبط با صفحه را در یک div با کلاس sidebar قرار می دهند.هیچگاه نباید داخل بر چسب aside را با مطالبی پر کرد که بخشی از محتوای اصلی به حساب می آیند, به عبارت دیگر این برچسب به عنوان بخشی برای توصیف محتوای اصلی به کار گرفته نمی شود. محتوای aside باید مستقل باشد, اما در عین حال می تواند بخشی از یک مجموعه بزرگتر از داده ها باشد.برخی از موارد استفاده از aside بکار گیری در نمایش ستون کناری سایت, فهرستی از پیوند های پیمایش فرعی و یا بلوک تبلیغات است. باید خاطر نشان کنیم که عنصر aside همانند برچسب header با محل قرار گیری اش تعریف نمی شود. این بخش می تواند در کنار متن اصلی صفحه باشد و یا اینکه در هر جای دیگر صفحه قرار گیرد. محتوای این برچسب و ارتباطش با دیگر عناصر صفحه است که مفهوم آن را مشخص می کند نه محل قرار گیری اش.

عنصر footer در HTML5 :

عنصر آخری که در این بخش از آن صحبت میکنیم, عنصر footer است. همانند برچسب header می توانید به دفعات از برچسب footer در یک صفحه استفاده کنید و محتوای بخش footer نیز اغلب همان محتوایی است که داخل < div id="footer" > قرار می گیرند.بر اساس مستندات, برچسب footer محتوایی را به عنوان پاورقی برای برچسب والد خود فراهم میکند. این بخش محتوایی که قرار است دارای پاورقی باشد, می تواند کد سند و یا محتوای داخل هر یک از برچسب های aside, section و یا article باشد. معمولا انتظار میرود در بخش footer اطلاعاتی نظیر حق نشر, لینک های مرتبط و اطلاعات مربوط به پدید آورنده یا نویسنده نمایش داده شود.

برگرد به عقب

آخرین نوشته :
مقالات بیشتر :

اهمیت برند سازی چیست ؟

اهمیت برند سازی چیست ؟

حتما برای شما هم اتفاق افتاده وقتی در خیابان راه می روید, کتاب میخوانید , موسیقی گوش می دهید و یا... بیشتر

مراحل تولید انیمیشن چیست ؟

مراحل تولید انیمیشن چیست ؟

ساخت انیمیشن بدون توجه به روش ساخت دارای پروسه ای چند مرحله ایست که به ترتیب می بایست انجام... بیشتر

طراحی کاتالوگ آنلاین

طراحی کاتالوگ آنلاین

طراحی کاتالوگ آنلاین یکی از ابزار تبلیغاتی بسیار پر کاربرد جهت ارائه کالا و خدمات به مخاطبان با... بیشتر

Motion Grapics - گرافیک حرکتی چیست ؟

Motion Grapics - گرافیک حرکتی چیست ؟

حرکت های گرافیکی یک تکنیک دیجیتال است که ترکیبی از تصاویر, کلمات , صدا و ویدئو است. نمونه های حرکت... بیشتر

موتورهای جستجوگر چگونه کار می کنند ؟

موتورهای جستجوگر چگونه کار می کنند ؟

وقتی جستجویی در یک موتور جستجوگر انجام می شود کاربران در حقیقت نتیجه کار قسمت های گوناگون موتور... بیشتر

زبان برنامه نویسی جاوا اسکریپت چیست ؟

زبان برنامه نویسی جاوا اسکریپت چیست ؟

HTML در واقع یک زبان نشانه گذاری (Markup) است , یعنی حاوی برچسب ها وتگ هایی می باشد که به دور... بیشتر

jQuery چیست ؟

jQuery چیست ؟

در تعریف jQuery باید اینگونه بیان کرد که اگر به نظر شما Prototype یک روش مناسب برای بسط دادن جاوا... بیشتر

باید ها و نبایدهای طراحی وب سایت

باید ها و نبایدهای طراحی وب سایت

وب سایت ها امکانات جالبی در دنیای امروز هستن که در هر ساعت از شبانه روز و بدون تعطیلی در خدمت... بیشتر

شاخص alexa - شاخص الکسا چیست؟

شاخص alexa - شاخص الکسا چیست؟

شاخص های بسیاری برای وب سایت ها وجود دارند که هر یک هدف جداگانه ای را از سنجش وب سایت ها دنبال... بیشتر