ساختار صفحات در طراحی سایت

بروزرسانی: 1398 /12 /21
توضیحات بیشتری از " ساختار صفحات در طراحی سایت "

به یاد داشته باشید که برخی از تگ ها در زبان HTML5 مفهومی شده اند به این معنا که استفاده از آن تگ میتواند مفهوم و دلیل منحصر به فرد خود را داشته باشد. عمده تگ های مفهومی که به نام (Semantic Element) در این زبان شناخته می شوند, برای کاربران نیست. یعنی کاربران با مشاهده صفحات سایت در مرورگرهای خود چندان فرقی برایشان نمی کند که آیا از HTML5 استفاده شده است و یا نسخه های دیگر این زبان.

این مفمومی بودن تنها برای موتورهای جستجو و انجام سئو سایت میتواند تاثیر بسیار شگفت انگیزی را داشته باشد. به تگ های زیر دقت کنید:

  • Article
  • Aside
  • Details
  • Figcaption
  • Figure
  • Header
  • Main
  • Mark
  • Nav
  • Section
  • Summary
  • Time

اینها برخی از تگ هایی هستند که قابلیت مفهومی بودن را به صفحات سایت میدهند. نگران نباشید !!!

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

برای اینکه در گذشته یعنی قبل از نسخه HTML5 زمانی که می خواستند ساختار اصلی و همچنین ساختارهای داخلی صفحات سایت را ایجاد نمایند, از تگی به نام div برای این کار استفاده می کردند.

مشکلی که آن تگ در آن زمان ایجاد میکرد این بود که صفحه پر از تگی به نام div  می شد که چندان مفهومی به صفحات وب سایت نمی داد. از این رو تگ های مفهومی بیشتری در زبان html5 به وجود آمد.

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

آن دسته از طراحانی که حتی از سیستم های مدیریت محتوا (CMS) مانند وردپرس استفاده میکنند و ساخت سایت وردپرس را انجام میدهند هم باید به خوبی با این نوع از تگ ها آشنایی داشته باشند. البته امروزه قالب های بسیار زیادی در دنیا این قانون ها را رعایت میکنند ولی در هر صورت باید طراحان و حتی برنامه نویس ها به این موضوع دقت ویژه ای را داشت باشند.

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

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

سوالات متداول ( 5 ) سوال مطرح شده
  • برای سایتی که با زبان های قدیمی HTML طراحی شده باشد, چه برنامه ای باید پیاده کرد؟

    شما باید در اسرع وقت و فوری نسخه html سایت را به نسخه html5 تغییر دهید و تگها را هم مطابق با این زبان بنویسید. حتما در این زمینه دقت کنید که لود شدن سایت با مشکلی نباشد. در برخی از مواقع طراحی مجدد سایت نیز بهترین گزینه می تواند باشد.

  • تگ section چه کاری انجام میدهد؟

    این تگ بیشتر برای بخش بندی ساختار اصلی صفحه سایت میتواند مورد استفاده قرار بگیرد

  • تگ article چه کاری انجام میدهد؟

    توسط این تگ میتوانیم بخش اصلی محتویات که خودش هویت منحصر به فرد خود را دارد را مشخص کنیم. ماند پستی در یک فروم و یا مقاله ای در سایت

  • تگ header چه کاری انجام میدهد؟

    توسط این تگ می توانیم بخش head سایت را مشخص کنیم. به دلیل اینکه لینک های این بخش مانند Navigation در کل سایت تکرار شده اند بهتر است حتما از تگ header استفاده کنیم تا این لینک ها برای موتورهای جستجو ارزش سئویی نداشته باشند و تنها بتوانند لینک های اصلی سایت شما را پیدا کنند.

  • تگ footer چه کاری انجام میدهد؟

    این تگ در پایین ترین بخش سایت قرار میگیرد و لینک های کم اهمیت تر در این بخش قرار داده میشود. فوتر ارزش خاص سئو برای لینک ها و محتویات این بخش در نظر نمی گیرد به دلیل اینکه در تمامی صفحات سایت تکرار شده است

ثبت نظر ( 0 ) نظر ثبت شده
برای ثبت نظر ابتدا وارد حساب کاربری خود شوید و یا ثبت نام نمایید...