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" استفاده می‌کند. نشانه‌ها ساختاری را برای محتوای وب فراهم می‌کنند و اطمینان می‌دهند که بخش‌های مهم محتوا به راحتی قابل پیمایش با صفحه‌کلید برای کاربران صفحه‌خوان هستند.

توجه داشته باشید که <header> و <footer> به ترتیب دارای نقش‌های banner و contentinfo هستند، در صورتی که در نشانه‌های دیگر تودرتو نباشند. AOM کروم این را به صورت زیر نشان می دهد:

اولین قطعه کد

قطعه کد دوم

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

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

role

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

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

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

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

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

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

به اسکرین شات AOM برای بلوک کد غیر معنایی برگردید. توجه داشته باشید که عناصر غیر معنایی نقش ضمنی ندارند. ما می‌توانیم نسخه غیر معنایی را با اختصاص دادن یک نقش به هر عنصر، معنایی کنیم:

<div role="banner">
  <span role="heading" aria-level="1">Three words</span>
  <div role="navigation">
    <a>one word</a>
    <a>one word</a>
    <a>one word</a>
    <a>one word</a>
  </div>
</div>

در حالی که ویژگی role را می توان برای افزودن معنایی به هر عنصر استفاده کرد، در عوض باید از عناصر با نقش ضمنی مورد نیاز خود استفاده کنید.

عناصر معنایی

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

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

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

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

درک خود را بررسی کنید

دانش خود را از HTML معنایی آزمایش کنید.

همیشه باید role="button" به عنصر <button> اضافه کنید.

نادرست

درست! عنصر <button> قبلاً این نقش را دارد.

درست است، واقعی.

دوباره امتحان کنید.