10
تشکر

نکته سریع: roleها در HTML5

اچ تی ام ال 5 - HTML5

اچ تی ام ال 5 – HTML5

در HTML5 شما میتوانید قسمت های مختلف سایت را با استفاده از roleها به مرورگر بشناسانید. مهمترین roleهایی که باید از آنها آگاه باشید در زیر لیست شده اند:

  • banner – مخصوص تگ header است و مشخص کننده اسم سایت است
  • search – مخصوص فرم Search
  • main – مخصوص مشخص کردن بخش اصلی صفحه. اطلاعات بیشتر
  • navigation – برای هر کدام از منوها. عموما برای عنصر nav استفاده میشود.
  • contentinfo – شامل اطلاعاتی در مورد صفحه مانند کپی رایت و لینک های حریم خصوصی

این مشخصه ها در سئو تاثیر بسزایی دارند.

برای اضافه کردن role به یک تگ به این صورت عمل میکنیم:

<header role=”banner”> آپارنت </header>

برای اطلاع از تمامی roleها به این صفحه مراجعه کنید: W3 – The Roles Model

  • میشه از تگ های معنا گرا استفاده کرد مثلا برای اینکه به موتورهای جستوجوگر بفهمونیم یه قسمتی بنر هست میشه از تگ figure استفاده کرد و کپشن اون رو نبر گزاشت figurecaption رو بنر میزاریم حالا اگه نخوایم دیده بشه با سی اس اس متن داخلش رو بدون رنگ میکنیم.
    و برای نشان دادن قسمت لینک های سایت میشه از تگ aside استفاده کرد.
    برای متن اصلی سایت از article میشه استفاده کرد.

  • سعید می‌گه:

    تو چند تا سایت خارجی دیده بودم اما نمیدونستم چیه…
    ممنون از مطلب مفیدتون

  • مینا موسوی می‌گه:

    سلام
    وقتی از این تگ ها مثلا در html به این شکل استفاده بشه :
    header id=”header” role=”banner” , یا
    div id=”container” class=”hfeed”
    اونموقع در css قسمتهای دوم رو (role=banner و class=hfeed ) چطور و با چه علامتی (مثل کلاس با علامت نقطه و یا مثل id با علامت شارپ ) باید فراخوانی کرد و اصلا بعد از فراخوانی چه تاثیری روی قالب دارند ؟
    ممنون میشم اگر راهنمایی کنید
    با تشکر وارزوی توفیق

    • محسن شفیعی می‌گه:

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


  • نظرات این مطلب بسته است.