close
تبلیغات
مثال هایی از پیاده سازی تگ های معنایی در HTML5
close
تبلیغات
ثبت لینک و بنر در اینجا
کسب درآمد اینترنتی
loading...
YourAds Here YourAds Here

مرجع مقالات رسمی طراحی سایت

بازدید : 2
چهارشنبه 27 شهريور 1398 زمان : 11:06


همان گونه که قابل پیش گویی می باشد، موتورهای کاوش مانند گوگل و بینگ شیفته اینگونه تگ ها می‌باشند!

درین نوشته ی علمی می‌خواهیم تگ های معنایی تصویر فوق را یادگرفتن دهیم (header, nav, main, article, section, aside, footer)

معمولا براحتی می اقتدار تگ های div فعلی قالب وب سایت را با تگ های معنایی فوق جایگزین کرد. صرفا کافیست find و replace فرمایید!

طراحی سایت در مشهد

مثال هایی از پیاده سازی تگ های معنایی در HTML5
یک قالب بسیار معمولی که با تگ های معنایی HTML5 پباده سازی شده‌است:
در‌این نمونه، بطور بسیار بی آلایش، نقش و دسته هر یک از بخشها را به وسیله ۴ تگ header, nav, main, footer معین کردیم:

قالب بسیار بی آلایش که با تگ های معنایی HTML5 پباده سازی شده‌است

در تصویر فوق، المان های مهم و اساسی یک کاغذ اینترنت را با تگ های معنایی html5 تمجید کرده ایم. توجه داشته باشید که یک پباده سازی معمولی البته ۱۰۰% درست بهتر هست از یک پباده سازی پیچیده و خطا!

پیاده سازی قالب وب سایت پیچیده بطور ناصحیح و غیر ظریف، میتواند سیگنال های اشتباهی را به سمت موتورهای کاوش ارسال نماید.

یک پیاده سازی معمولی و درست (simple & correct) یک گام بزرگی در مسیر تعامل بهتر با گوگل می‌باشد.

مثال های پیچیده خیس از تگ های معنایی
استعمال از تگ های section و article:
درین نمونه، بخش اصلی کاغذ (یعنی main) را به تعدادی بخش سلسله مراتبی تقسیم کرده ایم. بخش اصلی و محتوایی برگه را در تگ article تعریف‌و‌تمجید کرده ایم و در‌این تگ، تحت گروه ها را با section مشخص و معلوم میکنیم. بصورت تصویر پایین:

به کار گیری از تگ های section و article

در نمونه فوق، در بخش فوتر نیز مانند هدر از تگ معنایی
به کارگیری کرده ایم.

پیاده سازی سایدبار بوسیله تگ معنایی aside:
پیاده سازی سایدبار بوسیله تگ معنایی aside

در نمونه بالا، ما دو بخش مطالب دارای ربط را به وسیله تگ
پیاده سازی کرده ایم. با تعریف‌و‌تمجید تگ aside به موتورهای کاوش و مرورگر می‌گوییم محتوای این بخش از روی میل هست و از مرتبه اهمیت تحت تری نسبت به قسمت های section برخوردار میباشد.

پیاده سازی سایدبار غیرمستقیم:
پیاده سازی سایدبار غیرمستقیم

نکته: سایدباری که به وسیله تگ aside پباده سازی شده‌است لزوما نباید فورا در کنار محتوای اصلی تعریف و تمجید شود. بلکه همانگونه که در تصویر بالا می‌بینید، تگ aside که با رنگ مشکی معین شده‌است در کنار سایدبار اصلی تعریف و تمجید شده‌است.

نظرات این مطلب

تعداد صفحات : 10

درباره ما
اطلاعات کاربری
نام کاربری :
رمز عبور :
  • فراموشی رمز عبور؟
  • آرشیو
    خبر نامه


    معرفی وبلاگ به یک دوست


    ایمیل شما :

    ایمیل دوست شما :



    چت باکس
    پیوندهای روزانه
    آمار سایت
  • کل مطالب : 101
  • کل نظرات : 0
  • افراد آنلاین : 1
  • تعداد اعضا : 0
  • بازدید امروز : 41
  • بازدید کننده امروز : 1
  • باردید دیروز : 4
  • بازدید کننده دیروز : 0
  • گوگل امروز : 0
  • گوگل دیروز : 0
  • بازدید هفته : 47
  • بازدید ماه : 57
  • بازدید سال : 357
  • بازدید کلی : 357
  • کدهای اختصاصی