چرا Semantic HTML

Semantic HTML یا همون semantic markup یعنی استفاده از تگ‌های HTML که معنی و نقش محتوای داخل خودشون رو مشخص می‌کنن.
به طور مثال <header> ، <nav>،<main>،<article>،<section>،<footer> و ...

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

یک نکته فرعی و غیر ضروری بگم :
ARIA یا Accessible Rich Internet Applications استانداردیه برای دسترس‌پذیر کردن اپلیکیشن‌های تحت وب.

اگر می‌خوای توی پروژه‌ات WAI-ARIA رو رعایت کنی، پیشنهاد میشه از کتابخونه‌های headless UI استفاده کنی که از قبل الگوهای WAI-ARIA رو پیاده‌سازی کردن.

مراقب باش ARIA رو دستی اضافه نکنی، چون خیلی وقت‌ها اشتباه استفاده میشه و نتیجه برعکس میده و اپلیکیشن رو کمتر قابل استفاده می‌کنه.

چرا Semantic HTML مهمه؟

• کمک به (Accessibility)

• بهبود در SEO

• کد تمیزتر و قابل نگهداری‌ترگ

سخن پایانی

دسترسی (Accessibility) چیزی نیست که آخر کار و قبل از لانچ به برنامه "اضافه" کنی. اینطوری احتمال زیادی هست که یا بخشی رو کامل فراموش کنی یا راه‌حل‌هایی بسازی که خودشون دردسر درست کنن.

بهتره از همون اول و در فرآیند کدنویسی، دسترسی رو به‌عنوان یک اصل در نظر بگیری. می‌تونی به تیم‌ت cheatsheet بدی، توی PR Review به semantic بودن HTML markup توجه کنی، و کاری کنی که این موضوع جزئی از فرهنگ توسعه باشه.

اینطوری خیلی کمتر پیش میاد که مشکلات بزرگ Accessibility توی پروژه‌هات جا بمونه.