HTML معنایی و ارتباط آن با افزایش رتبه

استفاده از عناصر HTML صحیح برای توصیف محتوای سند شما ، با بیش از 100 عنصر HTML، و توانایی ایجاد عناصر سفارشی، راه های بی نهایتی برای علامت گذاری محتوای شما وجود دارد. اما برخی از راه ها – به ویژه از نظر معنایی – بهتر از بقیه هستند.

معنایی به معنای «مربوط به معنا» است. نوشتن HTML معنایی به معنای استفاده از عناصر HTML برای ساختار محتوای خود بر اساس معنای هر عنصر است نه ظاهر آن.

این مجموعه هنوز بسیاری از عناصر HTML را پوشش نداده است، اما حتی بدون دانستن HTML، دو قطعه کد زیر نشان می دهد که چگونه نشانه گذاری معنایی می تواند زمینه محتوا را ارائه دهد. هر دو از تعداد کلمات به جای ipsum lorem برای صرفه جویی در پیمایش استفاده می کنند – از تخیل خود برای گسترش “سی کلمه” به 30 کلمه استفاده کنید:

اولین قطعه کد از <div> و <span> استفاده می کند، دو عنصر بدون ارزش معنایی.

<div>
  <span>Three words</span>
  <div>
    <a>one word</a>
    <a>one word</a>
    <a>one word</a>
    <a>one word</a>
  </div>
</div>
<div>
  <div>
    <div>five words</div>
  </div>
  <div>
    <div>three words</div>
    <div>forty-six words</div>
    <div>forty-four words</div>
  </div>
  <div>
    <div>seven words</h2>
    <div>sixty-eight words</div>
    <div>forty-four words</div>
  </div>
</div>
<div>
  <span>five words</span>
</div>

آیا درک می کنید که این کلمات به چه چیزی گسترش می یابند؟ نه واقعا.

بیایید این کد را با عناصر معنایی بازنویسی کنیم:

<header>
  <h1>Three words</h1>
  <nav>
    <a>one word</a>
    <a>one word</a>
    <a>one word</a>
    <a>one word</a>
  </nav>
</header>
<main>
  <header>
    <h1>five words</h1>
  </header>
  <section>
    <h2>three words</h2>
    <p>forty-six words</p>
    <p>forty-four words</p>
  </section>
  <section>
    <h2>seven words</h2>
    <p>sixty-eight words</p>
    <p>forty-four words</p>
  </section>
</main>
<footer>
  <p>five words</p>
</footer>

کدام بلوک کد معنی را منتقل کرد؟ فقط با استفاده از عناصر غیر معنایی <div> و <span>، واقعاً نمی‌توانید بگویید محتوای اولین بلوک کد چه چیزی را نشان می‌دهد. مثال کد دوم، با عناصر معنایی، زمینه کافی را برای یک غیر کدگذار فراهم می‌کند تا هدف و معنی را بدون مواجهه با برچسب HTML رمزگشایی کند. قطعاً زمینه کافی را برای توسعه‌دهنده فراهم می‌کند تا طرح کلی صفحه را درک کند، حتی اگر محتوا را درک نکند، مانند محتوای یک زبان خارجی.

در بلوک کد دوم، می‌توانیم معماری را حتی بدون درک محتوا درک کنیم، زیرا عناصر معنایی معنا و ساختار را ارائه می‌دهند. می توانید بگویید که هدر اول، بنر سایت است و احتمالاً <h1> نام سایت است. پاورقی پاورقی سایت است: پنج کلمه ممکن است بیانیه حق چاپ یا آدرس تجاری باشد.

نشانه‌گذاری معنایی فقط به معنای آسان‌تر کردن نشانه‌گذاری برای توسعه‌دهندگان نیست. این بیشتر در مورد آسان کردن نشانه گذاری برای ابزارهای خودکار برای رمزگشایی است. ابزارهای توسعه‌دهنده نشان می‌دهند که چگونه عناصر معنایی ساختار قابل خواندن ماشین را نیز ارائه می‌کنند.

 مدل شیء دسترس‌پذیری (AOM) #

همانطور که مرورگر محتوای دریافتی را تجزیه می کند، مدل شی سند (DOM) و مدل شی CSS (CSSOM) را می سازد. سپس یک درخت دسترسی نیز ایجاد می کند. دستگاه های کمکی، مانند صفحه خوان ها، از AOM برای تجزیه و تفسیر محتوا استفاده می کنند. DOM درختی از تمام گره های سند است. AOM مانند یک نسخه معنایی از DOM است.

 در اسکرین شات دوم، چهار نقش برجسته در بلوک کد دوم وجود دارد. از نشانه های معنایی با نام های <header>، <main>، <footer> و <nav> برای “navigation” استفاده می کند. نشانه‌ها ساختاری را برای محتوای وب فراهم می‌کنند و اطمینان می‌دهند که بخش‌های مهم محتوا به راحتی قابل پیمایش با صفحه‌کلید برای کاربران صفحه‌خوان هستند.

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

کاملاً واضح است که استفاده از عناصر معنایی به دسترسی کمک می کند و استفاده از عناصر غیر معنایی دسترسی را کاهش می دهد. HTML به طور کلی، به طور پیش فرض، قابل دسترسی است. وظیفه ما به عنوان توسعه دهندگان این است که هم از ماهیت قابل دسترس پیش فرض HTML محافظت کنیم و هم اطمینان حاصل کنیم که دسترسی را به حداکثر می رسانیم. می توانید AOM را در ابزارهای توسعه دهنده بررسی کنید.

ویژگی نقش #

ویژگی role نقشی را که یک عنصر در متن سند دارد را توصیف می کند. ویژگی نقش یک ویژگی جهانی است – به این معنی که روی همه عناصر معتبر است – به جای مشخصات HTML WHATWG که تقریباً همه چیزهای دیگر در این سری تعریف شده است، با مشخصات ARIA تعریف شده است.

عناصر معنایی هر کدام نقشی ضمنی دارند، برخی بسته به زمینه. همانطور که در تصویر ابزار توسعه دسترسی فایرفاکس دیدیم، سطح بالای <header>، <main>، <footer> و <nav> همه نشانه‌ها بودند، در حالی که <header> تو در تو در <main> یک بخش بود. عکس صفحه کروم نقش‌های ARIA این عناصر را فهرست می‌کند: <main> اصلی است، <nav> ناوبری است، و <footer>، همانطور که پاورقی سند بود، contentinfo است. وقتی <header> سرصفحه سند باشد، نقش پیش فرض بنر است که بخش را به عنوان سرصفحه جهانی سایت تعریف می کند. هنگامی که یک <header> یا <footer> درون یک عنصر برش‌دهنده تودرتو است، یک نقش برجسته نیست. اسکرین شات های هر دو ابزار توسعه دهنده این را نشان می دهد.

نام نقش عناصر در ساختن AOM مهم است. معنای یک عنصر یا “نقش” برای فناوری های کمکی و در برخی موارد موتورهای جستجو مهم است. کاربران فناوری کمکی برای پیمایش و درک معنای محتوا به معناشناسی تکیه می کنند. نقش عنصر کاربر را قادر می سازد تا به محتوای مورد نظر خود به سرعت دسترسی پیدا کند و احتمالاً مهمتر از آن، این نقش به کاربر صفحه خوان اطلاع می دهد که چگونه با یک عنصر تعاملی پس از تمرکز، تعامل برقرار کند.

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

با استفاده از ویژگی role، می‌توانید به هر عنصری یک نقش بدهید، از جمله نقشی متفاوت از تگ. برای مثال، <button> نقش ضمنی دکمه را دارد. با role=”button”، می توانید هر عنصر را از نظر معنایی به یک دکمه تبدیل کنید: <p role=”button”>روی من کلیک کنید</p>.

در حالی که اضافه کردن role=”button” به یک عنصر به خوانندگان صفحه اطلاع می دهد که عنصر یک دکمه است، اما ظاهر یا عملکرد عنصر را تغییر نمی دهد. عنصر دکمه بدون اینکه شما هیچ کاری انجام دهید ویژگی های بسیاری را ارائه می دهد. عنصر دکمه به طور خودکار به ترتیب ترتیب برگه سند اضافه می شود، به این معنی که به طور پیش فرض قابل فوکوس روی صفحه کلید است. کلیدهای Enter و Space هر دو دکمه را فعال می کنند. دکمه ها همچنین دارای تمام روش ها و ویژگی های ارائه شده توسط رابط HTMLButtonElement هستند. اگر از دکمه معنایی برای دکمه خود استفاده نمی کنید، باید همه آن ویژگی ها را دوباره برنامه ریزی کنید. رفتن با <button> بسیار ساده تر است.

عناصر معنایی #

از خود بپرسید، “کدام عنصر عملکرد این بخش از نشانه گذاری را به بهترین شکل نشان می دهد؟” به طور کلی منجر به انتخاب بهترین عنصر برای کار می شود. عنصری که انتخاب می‌کنید و در نتیجه تگ‌هایی که استفاده می‌کنید باید برای محتوایی که نمایش می‌دهید مناسب باشند، زیرا برچسب‌ها دارای معنای معنایی هستند.

HTML باید برای ساختار محتوا استفاده شود، نه برای تعریف ظاهر محتوا. ظاهر قلمرو CSS است. در حالی که برخی از عناصر به گونه‌ای مشخص شده‌اند، از عنصری بر اساس نحوه ظاهر شدن آن عنصر به‌صورت پیش‌فرض توسط کاربر، استفاده نکنید. در عوض، هر عنصر را بر اساس معنای معنایی و عملکرد عنصر انتخاب کنید. کدنویسی HTML به روشی منطقی، معنایی و معنادار کمک می کند تا اطمینان حاصل شود که CSS همانطور که در نظر گرفته شده است اعمال می شود.

انتخاب عناصر مناسب برای کار هنگام کدنویسی به این معنی است که مجبور نخواهید بود HTML خود را تغییر دهید یا نظر دهید. اگر به استفاده از عنصر مناسب برای کار فکر می کنید، اغلب عنصر مناسب را برای کار انتخاب می کنید. اگر این کار را نکنید، احتمالا این کار را نخواهید کرد. هنگامی که معنای هر عنصر را درک کنید و از اهمیت انتخاب عنصر مناسب آگاه باشید، به طور کلی قادر خواهید بود بدون تلاش اضافی، انتخاب درستی داشته باشید.