همان گونه که قابل پیش گویی می باشد، موتورهای کاوش مانند گوگل و بینگ شیفته اینگونه تگ ها میباشند!
درین نوشته ی علمی میخواهیم تگ های معنایی تصویر فوق را یادگرفتن دهیم (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 که با رنگ مشکی معین شدهاست در کنار سایدبار اصلی تعریف و تمجید شدهاست.