تگ html: ریشه‌ی همه‌چیز تو یک صفحه‌ی وب
تو فصل قبل یه اشاره‌ی سریع به تگ <html> داشتیم. حالا تو این فصل قراره کامل بریم سراغ هر بخش از ساختار سند و ببینیم هرکدوم دقیقاً چه نقشی دارن. شروع می‌کنیم از خود تگ html، که همه‌چیز داخلش قرار می‌گیره.
تگ html چیه؟
تگ <html> عنصر ریشه (Root Element) هر سند HTML هست. یعنی هر چیزی که تو صفحه‌ات داری، از head گرفته تا body، باید داخل همین یک تگ قرار بگیره. یه سند HTML فقط باید یک تگ html داشته باشه، نه بیشتر.
<html>
<!-- کل محتوای سند اینجاست -->
</html>چرا بهش می‌گن «ریشه»؟
مرورگرها وقتی یه فایل HTML رو می‌خونن، اون رو به یه ساختار درختی به اسم DOM (Document Object Model) تبدیل می‌کنن. تو این ساختار درختی، تگ html دقیقاً مثل ریشه‌ی یه درخته و همه‌چیز دیگه (head و body) شاخه‌های اون هستن. این مدل درختی بعداً وقتی با CSS یا جاوااسکریپت کار کنی خیلی به کارت میاد، چون خیلی از قوانین بر همین اساس کار می‌کنن.
ویژگی‌های مهم تگ html
تگ html معمولاً با دو ویژگی مهم همراهه که قبلاً هم بهشون اشاره کردیم، ولی این بار دقیق‌تر بررسیشون می‌کنیم:
ویژگی lang
<html lang="fa">این ویژگی زبان اصلی محتوای صفحه رو مشخص می‌کنه. کد fa مخفف فارسیه. این کد از استاندارد بین‌المللی ISO 639-1 میاد؛ مثلاً انگلیسی میشه en، عربی میشه ar. این ویژگی صرفاً یه فرمالیته نیست؛ سه تا کاربرد واقعی داره:
- موتورهای جستجو مثل گوگل از این ویژگی برای تشخیص زبان محتوا و نمایش صفحه به کاربرای هم‌زبان استفاده می‌کنن.
- صفحه‌خوان‌ها (Screen Readers) بر اساس این ویژگی، تلفظ درست کلمات رو انتخاب می‌کنن.
- مرورگر می‌تونه بر همین اساس، ترجمه‌ی خودکار یا پیشنهاد فونت مناسب رو انجام بده.
ویژگی dir
<html dir="rtl">این ویژگی جهت کلی متن سند رو مشخص می‌کنه. برای زبان‌هایی مثل فارسی، عربی و عبری که از راست‌به‌چپ نوشته می‌شن، باید مقدارش rtl باشه (مخفف Right To Left). برای زبان‌های چپ‌به‌راست مثل انگلیسی هم مقدار پیش‌فرض ltr هست (Left To Right) که معمولاً نیازی به نوشتنش نیست.
ترکیب این دو ویژگی
برای یه سایت کاملاً فارسی، همیشه این دو ویژگی رو با هم روی تگ html می‌ذاریم:
<html lang="fa" dir="rtl">
</html>نکته‌ی مهم اینه که وقتی این دو ویژگی رو روی تگ html می‌ذاری، تمام صفحه به‌صورت پیش‌فرض این تنظیمات رو می‌گیره؛ یعنی لازم نیست هر پاراگراف یا هر بخش رو جدا جدا راست‌چین کنی.
چیزهایی که نباید بیرون از html باشن
یه قانون مهم اینه که هیچ محتوایی نباید بیرون از تگ html نوشته بشه، به‌جز خود DOCTYPE که همیشه قبل از html میاد:
<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head></head>
<body></body>
</html>اگه متنی یا تگی رو بیرون از html بنویسی (مثلاً بعد از تگ بسته‌ی </html>)، مرورگرهای مدرن معمولاً سعی می‌کنن اون رو به‌صورت خودکار داخل body ببرن، اما این یه رفتار غیراستاندارد و غیرقابل‌اعتماده و نباید روش حساب کرد.
ساختار کلی و ترتیب فرزندان html
تگ html دقیقاً باید دو فرزند مستقیم داشته باشه، و ترتیبشون هم مهمه:
<html lang="fa" dir="rtl">
<head>
<!-- اطلاعات پشت‌صحنه -->
</head>
<body>
<!-- محتوای قابل‌مشاهده -->
</body>
</html>یعنی همیشه head قبل از body میاد، نه برعکس. این ترتیب یه قانون ثابت تو HTML5 هست.
چند اشتباه رایج
- فراموش‌کردن ویژگی lang، که باعث میشه گوگل و صفحه‌خوان‌ها زبان صفحه رو درست تشخیص ندن.
- گذاشتن dir="rtl" روی تگ‌های دیگه مثل body به‌جای html، در حالی که بهتره از همون سطح ریشه تنظیم بشه.
- نوشتن چند تگ html تو یک فایل، که ساختار سند رو نامعتبر می‌کنه.
- جابه‌جا کردن ترتیب head و body.
بهترین روش‌ها
- همیشه lang و dir رو با هم و روی تگ html تنظیم کن، نه جای دیگه‌ای.
- هیچ محتوایی رو بیرون از تگ html قرار نده.
نکته‌ی سئو
ویژگی lang یکی از فاکتورهایی است که گوگل برای نمایش صحیح صفحه به کاربران هر منطقه زبانی استفاده می‌کند؛ نبود یا اشتباه بودن این ویژگی می‌تواند باعث نمایش نادرست صفحه در نتایج جستجوی محلی شود.
نکته‌ی دسترسی‌پذیری
ویژگی lang برای فناوری‌های کمکی مثل صفحه‌خوان‌ها حیاتی است؛ بدون آن، این ابزارها ممکن است متن فارسی را با تلفظ نادرست (مثلاً به‌سبک انگلیسی) بخوانند که تجربه‌ی کاربری را برای افراد کم‌بینا به‌شدت مختل می‌کند.
جمع‌بندی
تگ html عنصر ریشه‌ی هر سند HTML است که تمام محتوای صفحه، شامل head و body، باید داخل آن قرار بگیرد. ویژگی‌های lang و dir روی این تگ، زبان و جهت کلی صفحه را مشخص می‌کنند و نقش مهمی در سئو و دسترسی‌پذیری دارند.