Semantic HTML یعنی چی؟
بیا اول از یه مثال ساده شروع کنیم. فرض کن میخوای یه صفحه وب بسازی که یه هدر داره، یه منو داره، یه بخش محتوا داره و یه فوتر. خیلیها میان همهی اینها رو با تگ div میسازن. یعنی یه عالمه div تو در تو که هیچکدومشون معنی خاصی ندارن، فقط یه جعبهن که باهاش استایل میزنی.
حالا Semantic HTML یعنی بهجای اینکه همهچی رو div کنی، از تگهایی استفاده کنی که خودشون معنی و نقششون رو تو صفحه نشون میدن. مثلاً بهجای <div class="header"> از خود تگ <header> استفاده کنی، یا بهجای <div class="nav"> از <nav>. یعنی اسم تگ داره بهت میگه «من چی هستم» نه اینکه فقط ظاهرم چه شکلیه.
یه مقایسه سریع بین کد معمولی و کد معنایی
این کد رو ببین که خیلی رایجه ولی هیچ معنایی نداره:
<div class="header"> <div class="nav">...</div> </div> <div class="main-content"> <div class="post">...</div> </div> <div class="footer">...</div>
حالا همین ساختار با تگهای معنایی:
<header> <nav>...</nav> </header> <main> <article>...</article> </main> <footer>...</footer>
همون کاری رو انجام میده، همون شکلی رندر میشه (چون ظاهر رو CSS تعیین میکنه نه تگ)، ولی این نسخهی دوم برای مرورگر، گوگل، و آدمای بعدی که کد رو میخونن خیلی خواناتره.
چند تا از تگهای معنایی معروف
<header>— سربرگ صفحه یا یه بخش<nav>— بخش منو و لینکهای ناوبری<main>— محتوای اصلی صفحه<article>— یه محتوای مستقل مثل پست وبلاگ یا خبر<section>— یه بخش مجزا از محتوا<aside>— محتوای جانبی مثل سایدبار<footer>— پاورقی صفحه یا بخش<figure>و<figcaption>— عکس همراه با توضیح زیرش<time>— نمایش تاریخ و زمان
خب چرا باید اهمیت بدیم؟ مگه همون div کار نمیکنه؟
کار میکنه، ولی چند تا مشکل داره که کمکم گریبانت رو میگیره:
۱. سئو (SEO) بهتر میشه
گوگل و موتورهای جستجو وقتی صفحهات رو میخونن، از تگهای معنایی برای فهمیدن ساختار و اهمیت محتوا استفاده میکنن. مثلاً میفهمن کدوم بخش مقالهی اصلیه (article) و کدوم فقط یه سایدبار تبلیغاتیه (aside). این باعث میشه رتبهی صفحهات تو نتایج جستجو بهتر بشه.
۲. دسترسیپذیری (Accessibility) بالا میره
کاربرایی که از صفحهخوان (screen reader) استفاده میکنن، مثلا افراد نابینا، با کمک همین تگها میفهمن کجای صفحه هستن. اگه همهچی div باشه، صفحهخوان هیچ اطلاعاتی دربارهی نقش هر بخش نداره و کاربر گیج میشه. ولی وقتی از nav, main, header استفاده کنی، صفحهخوان میتونه بگه «الان رسیدی به بخش منو» یا «این محتوای اصلیه».
۳. کد خودت هم خواناتر میشه
وقتی بعد از شش ماه برگردی سراغ پروژهات، یا یه همتیمی بخواد کدت رو بخونه، پیدا کردن بخشهای مختلف تو یه عالمه div بینام خیلی سخته. ولی وقتی میبینی <footer>، سریع میفهمی این پاورقیه، لازم نیست کلاسها رو بگردی ببینی این چیه.
۴. به توسعهدهنده هم کمک میکنه بهتر فکر کنه
وقتی مجبوری از تگ معنایی درست استفاده کنی، خودت هم مجبور میشی قبل از کدنویسی فکر کنی که این بخش واقعاً چه نقشی داره. این باعث میشه ساختار صفحهات منطقیتر و تمیزتر دربیاد.
یه نکته مهم: ظاهر ربطی به تگ نداره
شاید فکر کنی اگه از <h1> استفاده نکنی و بهجاش یه <span> رو با CSS بزرگ و بولد کنی، همون تاثیر رو داره. از نظر ظاهری شاید شبیه باشه، ولی از نظر معنایی هیچ فرقی با بقیهی متن نداره و نه گوگل و نه صفحهخوان متوجه نمیشن این یه سربرگ مهمه. پس قانون کلی اینه: انتخاب تگ رو بر اساس معنی و نقش محتوا انجام بده، نه بر اساس اینکه چه شکلی میخوای نشون بدی. شکل و ظاهر، کار CSS ئه.
جمعبندی
Semantic HTML یعنی بهجای پر کردن صفحه از divهای بیهویت، از تگهایی استفاده کنی که واقعاً نشون میدن هر بخش چه نقشی داره. این کار هم به گوگل کمک میکنه بهتر بفهمه محتوات چیه، هم صفحهات رو برای کاربرای دارای معلولیت قابلفهمتر میکنه، هم کد خودت رو تمیزتر و قابلنگهداریتر میکنه. پس دفعهی بعد که داری صفحه میسازی، قبل از اینکه دستت بره سمت div، یه لحظه فکر کن ببین شاید یه تگ معنایی مناسبتر باشه.