وقتی یک صفحه HTML می‌سازید، همه چیز به متنی که در صفحه دیده می‌شود محدود نیست. عنوان زبانه مرورگر، کدگذاری نویسه‌های فارسی، تنظیم نمایش در موبایل و نشانی فایل CSS هم باید به‌درستی معرفی شوند. بخش head در HTML محل تعریف بسیاری از این اطلاعات و ارتباط‌هاست؛ اما هر تنظیمی که به مشخصات صفحه مربوط می‌شود الزاماً داخل head نوشته نمی‌شود.
در این راهنما، ابتدا با عناصر اصلی بخش head و تفاوت آن‌ها آشنا می‌شوید؛ سپس تنظیم عنوان سند، charset، viewport، توضیحات متا و فایل‌های وابسته را با مثال می‌بینید. در ادامه، جای درست lang و dir را در یک سند فارسی مشخص می‌کنیم، یک نمونه یکپارچه را بررسی می‌کنیم و روش بررسی نتیجه در مرورگر را یاد می‌گیریم. هدف این است که بدانید کدام تنظیمات را برای صفحه خود نیاز دارید و کدام‌ها را نباید صرفاً از نمونه‌های دیگر کپی کنید.
بخش head در HTML چیست و چه کاری انجام می‌دهد؟
بخش head در HTML محلی برای نگهداری اطلاعات مربوط به خود سند است؛ اطلاعاتی که مرورگر، موتورهای جستجو و سایر ابزارهای پردازش‌کننده می‌توانند از آن‌ها برای شناخت یا پردازش صفحه استفاده کنند. به این اطلاعات متادیتا (Metadata) می‌گویند؛ یعنی داده‌هایی که درباره سند توضیح می‌دهند، نه محتوای اصلی آن.
برای مثال، عنوان سند، تنظیمات مربوط به کدگذاری نویسه‌ها و ارتباط صفحه با فایل‌های CSS از جمله اطلاعاتی هستند که می‌توانند در این بخش تعریف شوند. محتوای head معمولاً مانند متن یا تصویر در بدنه صفحه نمایش داده نمی‌شود؛ اما می‌تواند بر نحوه پردازش و نمایش آن تأثیر بگذارد. برای نمونه، عنوان تعریف‌شده با عنصر title معمولاً روی زبانه مرورگر دیده می‌شود.
در ساختار یک سند HTML، عنصر head پیش از body و داخل عنصر اصلی html قرار می‌گیرد. هر سند HTML تنها یک عنصر head دارد. اگر هنوز با جایگاه این بخش‌ها آشنا نیستید، ابتدا راهنمای HTML چیست را مطالعه کنید.
تفاوت head با body و header چیست؟
با اینکه نام‌های head و header شبیه یکدیگر هستند، این دو عنصر کاربرد متفاوتی دارند. برای درک این تفاوت، باید نقش body را نیز در نظر بگیریم.
عنصر head اطلاعات مربوط به سند را نگه می‌دارد، درحالی‌که body محل قرارگیری محتوای صفحه، مانند عنوان‌ها، پاراگراف‌ها، تصاویر و لینک‌هاست. عنصر header نیز درون محتوای صفحه استفاده می‌شود و معمولاً بخش معرفی یا ابزارهای راهبری یک صفحه یا قسمتی از آن را مشخص می‌کند. برای مثال، لوگو، عنوان سایت یا منوی راهبری می‌توانند در یک header قرار بگیرند.
به قطعه کد زیر توجه کنید که بخش‌های head و body یک سند HTML را نشان می‌دهد:
<head>
<title>آموزش HTML</title>
</head>
<body>
<header>
<h1>آموزش HTML</h1>
</header>
<p>از اینجا مطالعه را شروع کنید.</p>
</body>
در این مثال، عبارت «آموزش HTML» داخل title عنوان سند را مشخص می‌کند و معمولاً در زبانه مرورگر دیده می‌شود. در مقابل، همان عبارت داخل h1 بخشی از محتوای صفحه است و به‌صورت یک عنوان اصلی نمایش داده می‌شود. عنصر header نیز این عنوان را به‌عنوان بخشی از ناحیه معرفی صفحه دربر گرفته است.
بنابراین، هر سه عنصر وظیفه مستقلی دارند: head اطلاعات مربوط به سند را نگه می‌دارد، body محتوای صفحه را دربر می‌گیرد و header یک بخش معنایی برای محتوای مقدماتی یا راهبری است. تشخیص این تفاوت کمک می‌کند اطلاعات سند را با عناصری که قرار است در صفحه نمایش داده شوند اشتباه نگیرید.
چه عناصری داخل head قرار می‌گیرند؟
در بخش head می‌توان از عناصر مختلفی استفاده کرد که هرکدام وظیفه مشخصی در تعریف اطلاعات یا تنظیمات سند HTML دارند. بعضی از این عناصر عنوان و مشخصات صفحه را تعیین می‌کنند، بعضی ارتباط آن را با منابع دیگر برقرار می‌کنند و برخی نیز برای تعریف استایل یا بارگذاری اسکریپت به کار می‌روند.
از مهم‌ترین عناصر این بخش می‌توان به title، meta، link، style، script و base اشاره کرد. البته قرار نیست همه این عناصر را در هر صفحه استفاده کنیم؛ انتخاب آن‌ها به اطلاعات و امکانات موردنیاز سند بستگی دارد.
عناصر title، meta و link چه نقشی دارند؟
این سه عنصر هرکدام وظیفه مشخصی دارند:
عنصر title عنوان سند را تعیین می‌کند؛ عنوانی که معمولاً در زبانه مرورگر دیده می‌شود. شیوه تنظیم و انتخاب آن را در بخش بعد بررسی می‌کنیم.
عنصر meta اطلاعاتی مانند کدگذاری نویسه‌ها، توضیح صفحه و تنظیمات viewport را تعریف می‌کند. نوع این اطلاعات به ویژگی‌هایی مانند charset یا name بستگی دارد.
عنصر link رابطه سند را با منابع دیگر، مانند فایل CSS یا آیکون سایت، مشخص می‌کند. برخلاف عنصر a، وظیفه آن ایجاد لینک قابل کلیک در محتوای صفحه نیست.
برای مشاهده تفاوت این سه عنصر، قطعه کد زیر را در نظر بگیرید:
<title>راهنمای شروع HTML</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="styles.css">
در این نمونه، title عنوان سند را تعیین می‌کند، meta کدگذاری نویسه‌ها را مشخص می‌کند و link یک فایل CSS خارجی را معرفی می‌کند. برای اعمال استایل‌های آن فایل، منبع styles.css باید در مسیر تعیین‌شده در دسترس باشد.
عناصر style، script و base چه کاربردی دارند؟
علاوه بر عناصر مربوط به مشخصات سند، بخش head می‌تواند شامل عناصری باشد که بر ظاهر، رفتار یا نحوه تفسیر مسیرهای نسبی صفحه تأثیر می‌گذارند.
عنصر style برای نوشتن کدهای CSS در خود سند HTML استفاده می‌شود. به این ترتیب، می‌توان بدون ارجاع به یک فایل CSS جداگانه، قواعد ظاهری موردنیاز صفحه را تعریف کرد. تفاوت اصلی آن با link این است که style خودِ کدهای CSS را در سند نگه می‌دارد، درحالی‌که link می‌تواند یک فایل CSS خارجی را به سند متصل کند.
عنصر script برای قراردادن یا بارگذاری اسکریپت‌ها، از جمله کدهای JavaScript، استفاده می‌شود. این عنصر می‌تواند داخل head قرار بگیرد، اما استفاده از آن به این بخش محدود نیست و در body نیز مجاز است. نکته مهم این است که نحوه و زمان اجرای اسکریپت به نوع آن و ویژگی‌های استفاده‌شده بستگی دارد. برای مثال، ویژگی defer در اسکریپت‌های کلاسیک خارجی می‌تواند اجرای آن‌ها را تا پس از پایان تجزیه سند HTML به تعویق بیندازد.
عنصر base برای تعیین آدرس مبنای مسیرهای نسبی در سند HTML کاربرد دارد. برای مثال، اگر آدرس مبنا تعریف شده باشد، مرورگر هنگام تفسیر مسیرهای نسبی لینک‌ها یا منابع صفحه آن را در نظر می‌گیرد. ازآنجاکه این تنظیم می‌تواند مقصد مسیرهای نسبی در سراسر سند را تغییر دهد، استفاده از آن باید آگاهانه باشد و برای همه صفحات ضرورتی ندارد. برای بررسی دقیق‌تر عملکرد آن می‌توانید مقاله تگ base در HTML چیست و چه کاربردی دارد؟ را مطالعه کنید.
عنوان و متادیتاهای اصلی صفحه را چگونه تنظیم کنیم؟
برای اینکه مرورگر بتواند یک سند HTML را به‌درستی پردازش کند و ابزارهایی مانند موتورهای جستجو اطلاعات مناسبی درباره آن داشته باشند، باید عنوان و متادیتاهای موردنیاز صفحه را در بخش head تعریف کنیم. این تنظیمات کاربردهای متفاوتی دارند؛ برخی به نمایش و پردازش صفحه مربوط می‌شوند و برخی اطلاعات تکمیلی آن را در اختیار ابزارهای دیگر قرار می‌دهند.
در این بخش، نحوه تنظیم چهار مورد مهم را بررسی می‌کنیم: عنوان سند با title، کدگذاری نویسه‌ها با charset، ناحیه نمایش با viewport و اطلاعات مرتبط با معرفی و نمایه‌سازی صفحه با description و robots.
تعیین عنوان سند با title
عنصر title عنوانی را مشخص می‌کند که معمولاً در زبانه مرورگر و فهرست نشانک‌های ذخیره‌شده نمایش داده می‌شود. موتورهای جستجو نیز می‌توانند از این عنوان برای شناخت موضوع صفحه و ساخت عنوان قابل کلیک در نتایج جستجو استفاده کنند.
برای تعیین عنوان کافی است متن موردنظر را بین تگ آغازین و پایانی title و داخل بخش head بنویسید:
<head>
<title>آموزش مقدماتی HTML</title>
</head>
اگر این کد را در یک سند HTML قرار دهید و فایل را در مرورگر باز کنید، معمولاً عبارت «آموزش مقدماتی HTML» روی زبانه صفحه دیده می‌شود.
هنگام انتخاب عنوان به چند نکته توجه کنید:
- عنوان باید موضوع اصلی و محتوای واقعی صفحه را به‌روشنی توصیف کند.
- بهتر است هر صفحه عنوان مشخص و متمایزی داشته باشد تا تشخیص آن از سایر صفحات آسان باشد.
- از عنوان‌های مبهم مانند «صفحه جدید» یا تکرار بی‌دلیل کلمات کلیدی خودداری کنید.
- داخل عنصر title فقط متن قرار دهید؛ برای ایجاد عنوان قابل مشاهده در محتوای صفحه باید از عناصر عنوان‌بندی مانند h1 استفاده کنید.
همچنین نباید تصور کنید متنی که در title می‌نویسید، حتماً بدون تغییر در نتایج گوگل نمایش داده می‌شود. گوگل ممکن است با توجه به عنوان اصلی صفحه، محتوای آن و سایر نشانه‌ها، عنوان متفاوتی برای نتیجه جستجو انتخاب کند.
مشخص‌کردن کدگذاری نویسه‌ها با charset
مرورگر برای نمایش صحیح متن باید بداند نویسه‌های ذخیره‌شده در فایل HTML چگونه به کاراکترهای قابل خواندن تبدیل می‌شوند. این موضوع برای صفحاتی که از حروف فارسی، عربی یا نویسه‌های زبان‌های مختلف استفاده می‌کنند اهمیت زیادی دارد.
در HTML، روش استاندارد برای اعلام کدگذاری نویسه‌ها استفاده از ویژگی charset در عنصر meta است:
<meta charset="UTF-8">
در این دستور، UTF-8 نام کدگذاری نویسه‌های سند است. این کدگذاری از حروف فارسی، انگلیسی و مجموعه گسترده‌ای از نویسه‌های Unicode پشتیبانی می‌کند و کدگذاری استاندارد اسناد HTML امروزی است.
برای استفاده صحیح از آن، دو نکته را رعایت کنید:
اول: فایل HTML باید واقعاً با کدگذاری UTF-8 ذخیره شده باشد. نوشتن charset=”UTF-8″ به‌تنهایی نمی‌تواند محتوای فایلی را که با کدگذاری ناسازگار ذخیره شده است اصلاح کند.
دوم: بهتر است این دستور را در ابتدای بخش head قرار دهید. طبق استاندارد HTML، اعلان کدگذاری مبتنی بر meta باید به‌طور کامل در ۱۰۲۴ بایت ابتدایی فایل قرار بگیرد. قراردادن آن نزدیک ابتدای سند، رعایت این محدودیت را ساده‌تر می‌کند.
اگر متن فارسی به‌صورت نویسه‌های نامفهوم نمایش داده شود، ناسازگاری میان کدگذاری واقعی فایل و کدگذاری مورد استفاده مرورگر یکی از مواردی است که باید بررسی شود؛ البته هر مشکل نمایش متن الزاماً ناشی از charset نیست.
تنظیم viewport برای نمایش در موبایل
مرورگرهای موبایل برای تعیین ابعاد ناحیه‌ای که صفحه وب در آن چیدمان می‌شود، از مفهومی به نام Viewport استفاده می‌کنند. اگر تنظیمات مناسب وجود نداشته باشد، بعضی مرورگرهای موبایل ممکن است صفحه را ابتدا در یک ناحیه مجازی عریض‌تر چیدمان کنند و سپس آن را کوچک‌تر نشان دهند.
برای هماهنگ‌کردن عرض ناحیه چیدمان با عرض دستگاه، می‌توان از متاتگ زیر استفاده کرد:
<meta name="viewport" content="width=device-width">
در این دستور:
- name=”viewport” مشخص می‌کند که این متادیتا مربوط به تنظیمات ناحیه نمایش است.
- width=device-width به مرورگر اعلام می‌کند که عرض Viewport را بر اساس عرض دستگاه، در واحد پیکسل CSS، تنظیم کند.
ممکن است در نمونه‌های دیگر، عبارت initial-scale=1 را نیز ببینید:
<meta name="viewport" content="width=device-width, initial-scale=1">
این مقدار مقیاس اولیه نمایش را روی ۱ تنظیم می‌کند. استفاده از آن رایج است، اما در همه صفحات ضروری نیست؛ بسیاری از صفحات می‌توانند تنها با width=device-width تنظیم مناسبی داشته باشند.
همچنین بهتر است با تنظیماتی مانند user-scalable=no یا محدودکردن شدید بزرگ‌نمایی، امکان زوم‌کردن صفحه را از کاربران نگیرید؛ زیرا این کار می‌تواند خواندن محتوا را برای افرادی که به بزرگ‌نمایی متن نیاز دارند دشوار کند.
معرفی صفحه با meta description و آشنایی با robots
علاوه بر تنظیمات مربوط به پردازش و نمایش سند، می‌توان با استفاده از عنصر meta اطلاعاتی درباره موضوع صفحه یا نحوه برخورد خزنده‌های موتور جستجو با آن ارائه کرد. دو نمونه مهم از این اطلاعات، description و robots هستند.
متاتگ description توضیحی کوتاه درباره محتوای صفحه ارائه می‌دهد. برای تعریف آن، از ویژگی name با مقدار description و ویژگی content برای متن توضیح استفاده می‌کنیم:
<meta name="description" content="در این راهنما با ساختار اولیه HTML و روش ایجاد یک سند ساده آشنا می‌شوید.">
متن داخل content باید خلاصه‌ای دقیق و قابل فهم از محتوای واقعی صفحه باشد. بهتر است برای صفحات مختلف، توضیح متناسب با همان صفحه نوشته شود و به‌جای انباشتن کلمات کلیدی، به خواننده نشان دهد چه اطلاعاتی در صفحه پیدا می‌کند.
گوگل ممکن است از این توضیح برای ساخت متن خلاصه زیر نتیجه جستجو استفاده کند، اما نمایش آن قطعی نیست. در بسیاری از جستجوها، گوگل بخشی از محتوای خود صفحه را که با عبارت جستجوشده ارتباط بیشتری دارد انتخاب می‌کند.
متاتگ robots برای اعلام برخی دستورالعمل‌های مربوط به نمایه‌سازی و نمایش صفحه به خزنده‌های موتورهای جستجوی پشتیبان آن دستورها استفاده می‌شود.
برای مثال، دستور زیر از خزنده‌های پشتیبان می‌خواهد صفحه را در نتایج جستجو نمایه نکنند:
<meta name="robots" content="noindex">
این دستور برای صفحاتی کاربرد دارد که عمداً نمی‌خواهیم در نتایج جستجو ظاهر شوند. بنابراین نباید آن را بدون دلیل به صفحات عمومی و آموزشی سایت اضافه کنیم.
نکته دیگر این است که موتور جستجو باید امکان دسترسی به صفحه و مشاهده دستور noindex را داشته باشد. اگر دسترسی خزنده به صفحه از طریق robots.txt مسدود شده باشد، ممکن است نتواند دستور موجود در HTML را بخواند.
در شرایط معمول، برای اینکه گوگل اجازه نمایه‌سازی صفحه را داشته باشد، نیازی نیست حتماً متاتگ robots با مقدار index, follow بنویسید؛ نبود محدودیت در این متاتگ به معنای الزام به نمایه‌شدن نیست، بلکه تصمیم نهایی به امکان خزش، دسترسی و سایر شرایط نمایه‌سازی نیز بستگی دارد.
در نتیجه، description و robots دو وظیفه متفاوت دارند: اولی اطلاعات توصیفی درباره صفحه ارائه می‌کند و دومی امکان اعلام دستورالعمل‌هایی درباره نمایه‌سازی یا نحوه نمایش نتیجه را فراهم می‌سازد. شناخت این تفاوت کمک می‌کند هنگام تنظیم متادیتا، توضیحات صفحه را با دستورهای مخصوص موتورهای جستجو اشتباه نگیریم.
چگونه فایل‌های وابسته و اطلاعات تکمیلی را در head معرفی کنیم؟
بخش head فقط برای تعیین عنوان و متادیتای صفحه نیست؛ از طریق آن می‌توان ارتباط سند HTML را با فایل‌های موردنیاز و برخی اطلاعات تکمیلی نیز مشخص کرد. برای مثال، مرورگر می‌تواند از اطلاعات این بخش برای پیدا کردن فایل CSS یا آیکون صفحه استفاده کند و موتورهای جستجو نیز می‌توانند آدرس ترجیحی سند را از آن دریافت کنند.
بیشتر این ارتباطات با عنصر link تعریف می‌شوند. در این عنصر، ویژگی rel نوع رابطه را مشخص می‌کند و ویژگی href آدرس منبع یا صفحه مرتبط را در اختیار ابزار پردازش‌کننده قرار می‌دهد. البته کاربرد هر دستور به مقداری بستگی دارد که برای rel تعیین می‌کنیم.
اتصال فایل CSS با link
یکی از رایج‌ترین کاربردهای عنصر link، اتصال یک فایل CSS خارجی به سند HTML است. با این روش، قواعد مربوط به ظاهر صفحه را در فایلی جداگانه می‌نویسیم و از داخل بخش head به آن ارجاع می‌دهیم.
برای مثال، فرض کنید فایل HTML و فایلی به نام styles.css در یک پوشه قرار دارند. برای متصل‌کردن این فایل CSS، می‌توانیم دستور زیر را داخل head بنویسیم:
<link rel="stylesheet" href="styles.css">
در این دستور، rel=”stylesheet” مشخص می‌کند که منبع معرفی‌شده یک شیوه‌نامه است. ویژگی href نیز مسیر فایل CSS را تعیین می‌کند. چون در این مثال نام فایل بدون مسیر پوشه نوشته شده است، مرورگر آن را نسبت به آدرس مبنای سند پیدا می‌کند؛ اگر آدرس مبنا تغییر نکرده باشد، فایل باید در همان پوشه سند HTML قرار داشته باشد.
حالا فرض کنید فایل styles.css شامل کد زیر باشد:
h1 {
color: darkblue;
}
اگر فایل CSS به‌درستی بارگذاری شود، این قانون رنگ متن عناصر h1 را به آبی تیره تغییر می‌دهد؛ مگر اینکه قواعد دیگری با اولویت بالاتر آن را بازنویسی کنند.
مزیت استفاده از فایل CSS خارجی این است که می‌توان یک شیوه‌نامه را به چند صفحه HTML متصل کرد و تغییرات مشترک ظاهری را از یک محل مدیریت کرد. البته برای هر سند باید ارتباط با فایل موردنظر به‌درستی برقرار شده باشد.
تعریف favicon برای صفحه
فاوآیکون (Favicon) تصویر کوچکی است که برای شناسایی یک صفحه یا وب‌سایت در بخش‌هایی از رابط کاربری مرورگر استفاده می‌شود. برای مثال، بسته به مرورگر ممکن است این تصویر کنار عنوان صفحه در زبانه‌ها یا فهرست نشانک‌ها نمایش داده شود.
برای معرفی فاوآیکون نیز می‌توان از عنصر link استفاده کرد. فرض کنید تصویری با نام favicon.png در پوشه images قرار داده‌ایم. در این صورت، دستور زیر آدرس آن را به مرورگر معرفی می‌کند:
<link rel="icon" href="images/favicon.png" type="image/png">
در این مثال:
- rel=”icon” مشخص می‌کند که منبع معرفی‌شده، آیکون مربوط به سند است.
- href=”images/favicon.png” مسیر فایل تصویر را تعیین می‌کند.
- type=”image/png” نوع فایل معرفی‌شده را مشخص می‌کند.
ویژگی type در این مثال ضروری نیست، اما می‌تواند اطلاعاتی درباره قالب فایل در اختیار مرورگر قرار دهد. همچنین فاوآیکون می‌تواند با قالب‌های پشتیبانی‌شده دیگری مانند ICO یا SVG تعریف شود؛ انتخاب قالب مناسب به نیاز پروژه و محیط‌هایی بستگی دارد که قرار است آیکون در آن‌ها نمایش داده شود.
اگر فایل آیکون در مسیر مشخص‌شده موجود نباشد یا مرورگر نتواند از آن استفاده کند، ممکن است تصویر موردنظر نمایش داده نشود. بنابراین باید آدرس فایل و قالب آن با منبع واقعی مطابقت داشته باشد.
همه صفحات نیز الزاماً به تعریف دستی فاوآیکون نیاز ندارند. بعضی مرورگرها به‌صورت خودکار به دنبال فایلی با نام favicon.ico در مسیر اصلی سایت می‌گردند. بااین‌حال، استفاده از link روشی صریح برای معرفی آیکون انتخابی صفحه است.
معرفی مختصر canonical و ارتباط آن با URL صفحه
گاهی یک محتوای یکسان یا بسیار مشابه از طریق چند آدرس اینترنتی در دسترس قرار می‌گیرد. در چنین شرایطی، ممکن است بخواهیم به موتور جستجو اعلام کنیم کدام آدرس را نسخه اصلی یا ترجیحی آن محتوا در نظر گرفته‌ایم.
برای این کار می‌توان از لینک canonical در بخش head استفاده کرد. این رابطه نیز با عنصر link تعریف می‌شود، اما مقدار rel در آن برابر canonical است.
برای مثال، دستور زیر را در نظر بگیرید:
<link rel="canonical" href="https://example.com/html-guide/">
در این مثال، آدرس https://example.com/html-guide/ صرفاً یک نشانی آموزشی است و باید در پروژه واقعی با URL ترجیحی و معتبر همان محتوا جایگزین شود.
مقدار canonical به موتورهای جستجوی پشتیبان این رابطه اعلام می‌کند که آدرس درج‌شده در href، نسخه ترجیحی سند است. برای گوگل، این دستور یک سیگنال قوی در انتخاب URL اصلی محسوب می‌شود، اما دستور قطعی نیست؛ گوگل ممکن است با بررسی سایر نشانه‌ها، آدرس دیگری را به‌عنوان نسخه اصلی انتخاب کند.
هنگام تعریف canonical بهتر است از آدرس کامل، شامل پروتکل و نام دامنه، استفاده کنید. همچنین آدرس معرفی‌شده باید با نسخه‌ای که واقعاً قصد دارید به‌عنوان مرجع محتوا شناخته شود هماهنگ باشد.
دقت کنید که canonical با تغییر مسیر (Redirect) تفاوت دارد. این عنصر کاربر را از یک آدرس به آدرس دیگر منتقل نمی‌کند و مانع بازشدن صفحه فعلی نمی‌شود؛ بلکه رابطه‌ای درباره URL ترجیحی محتوا اعلام می‌کند.
برای یک فایل HTML ساده که صرفاً به‌صورت محلی ساخته‌اید، معمولاً نیازی به تنظیم canonical ندارید. این موضوع زمانی اهمیت پیدا می‌کند که صفحه در وب منتشر شده باشد و لازم باشد درباره آدرس اصلی آن تصمیم بگیرید. به همین دلیل، بررسی دقیق‌تر مدیریت URLهای تکراری به مباحث تخصصی سئو مربوط می‌شود و ضرورتی ندارد هنگام یادگیری اولیه بخش head وارد تمام جزئیات آن شویم.
زبان و جهت نوشتار صفحه فارسی را کجا مشخص کنیم؟
برای اینکه مرورگر و ابزارهای کمکی بتوانند محتوای یک صفحه فارسی را درست تفسیر کنند، باید دو ویژگی مهم سند را مشخص کنیم: زبان محتوا و جهت نوشتار آن. این دو ویژگی به یکدیگر مرتبط‌اند، اما وظیفه یکسانی ندارند. زبان مشخص می‌کند متن به چه زبانی نوشته شده است، درحالی‌که جهت نوشتار تعیین می‌کند متن از کدام سمت آغاز و چیدمان شود.
نکته مهم این است که برخلاف عنوان سند و بسیاری از متادیتاها، زبان و جهت اصلی صفحه معمولاً با دستورهایی داخل head تعریف نمی‌شوند. در HTML، برای این منظور از ویژگی‌های lang و dir روی عنصر اصلی html استفاده می‌کنیم تا تنظیمات آن‌ها به‌صورت پیش‌فرض در بخش‌های مختلف سند اعمال شوند.
تعیین زبان اصلی سند با lang
ویژگی lang زبان محتوای یک عنصر HTML را مشخص می‌کند. وقتی این ویژگی را روی عنصر اصلی html قرار می‌دهیم، زبان پیش‌فرض محتوای سند را تعیین کرده‌ایم.
برای مثال، اگر محتوای اصلی صفحه به زبان فارسی نوشته شده باشد، می‌توانیم از دستور زیر استفاده کنیم:
<html lang="fa">
در این دستور، lang نام ویژگی و fa کد زبان فارسی است. مقدار این ویژگی باید مطابق قالب برچسب‌های زبان BCP 47 انتخاب شود. برای زبان انگلیسی نیز معمولاً از مقدار en استفاده می‌کنیم.
تعیین زبان سند فقط یک اطلاعات توصیفی نیست و کاربرد عملی دارد. برای مثال، فناوری‌های کمکی مانند صفحه‌خوان‌ها می‌توانند از این اطلاعات برای انتخاب قواعد تلفظ مناسب استفاده کنند. همچنین مشخص‌بودن زبان محتوا به ابزارهایی که متن را پردازش می‌کنند کمک می‌کند آن را با آگاهی بیشتری تفسیر کنند.
البته ممکن است در یک صفحه فارسی، بخش‌هایی به زبان دیگری نوشته شده باشند. در این شرایط، لازم نیست زبان اصلی کل سند را تغییر دهیم؛ کافی است زبان همان بخش را جداگانه مشخص کنیم.
برای مثال:
<p lang="en">Learn HTML step by step.</p>
در این نمونه، زبان پاراگراف انگلیسی مشخص شده است، درحالی‌که سایر قسمت‌های صفحه همچنان می‌توانند زبان فارسی را از عنصر اصلی html به ارث ببرند.
تنظیم جهت نوشتار با dir
زبان فارسی از راست به چپ نوشته می‌شود، اما مرورگر صرفاً با دیدن مقدار lang=”fa” موظف نیست جهت پایه نوشتار سند را راست‌به‌چپ کند. برای مشخص‌کردن این جهت، از ویژگی dir استفاده می‌کنیم.
در یک صفحه فارسی می‌توانیم زبان و جهت نوشتار را به‌صورت زیر روی عنصر اصلی html تعریف کنیم:
<html lang="fa" dir="rtl">
در این مثال، lang=”fa” زبان اصلی سند را فارسی معرفی می‌کند و dir=”rtl” جهت پایه نوشتار را راست‌به‌چپ قرار می‌دهد.
ویژگی dir سه مقدار اصلی دارد:
- rtl: جهت پایه نوشتار را از راست به چپ تعیین می‌کند و برای متن‌هایی مانند فارسی کاربرد دارد.
- ltr: جهت پایه نوشتار را از چپ به راست تعیین می‌کند و برای متن‌هایی مانند انگلیسی مناسب است.
- auto: به مرورگر اجازه می‌دهد جهت پایه را بر اساس محتوای متن تشخیص دهد. این مقدار بیشتر زمانی کاربرد دارد که جهت متن از قبل مشخص نیست؛ مانند بعضی پیام‌های ثبت‌شده توسط کاربران.
وقتی dir=”rtl” را روی عنصر html قرار می‌دهیم، بخش‌های داخلی سند معمولاً جهت پایه را از آن به ارث می‌برند؛ مگر اینکه برای یک بخش جهت دیگری تعریف شده باشد.
برای مثال، اگر در صفحه فارسی یک پاراگراف مستقل انگلیسی داشته باشیم، می‌توانیم جهت آن را جداگانه تعیین کنیم:
<p lang="en" dir="ltr">
Read the HTML documentation.
</p>
در این نمونه، هم زبان پاراگراف انگلیسی است و هم جهت پایه آن از چپ به راست تعیین شده است. بااین‌حال، لازم نیست برای هر واژه انگلیسی که در میان متن فارسی قرار می‌گیرد، ویژگی dir جداگانه بنویسیم؛ مرورگر با استفاده از الگوریتم متن دوسویه Unicode بسیاری از این ترکیب‌ها را مدیریت می‌کند.
تفاوت مهم دیگر این است که dir جایگزین تنظیمات ظاهری CSS نیست. این ویژگی جهت پایه متن را در سطح HTML مشخص می‌کند، درحالی‌که ویژگی‌های CSS مانند text-align برای کنترل تراز ظاهری متن استفاده می‌شوند. راست‌چین‌کردن یک پاراگراف به‌تنهایی معادل تعیین جهت راست‌به‌چپ آن نیست.
بنابراین، برای یک سند فارسی بهتر است از همان ابتدای عنصر html، زبان را با lang=”fa” و جهت پایه را با dir=”rtl” مشخص کنیم. با این کار، اطلاعات مربوط به زبان و جهت نوشتار در ساختار سند ثبت می‌شوند و می‌توانیم در بخش‌هایی که زبان یا جهت متفاوتی دارند، تنظیمات مناسب همان بخش را اعمال کنیم.
یک نمونه کامل از head برای صفحه فارسی چگونه بنویسیم؟
تا اینجا با عناصر و تنظیمات مختلف بخش head آشنا شدیم. حالا وقت آن است که این موارد را در یک سند HTML کنار هم قرار دهیم تا ببینیم ساختار یک صفحه فارسی با اطلاعات و تنظیمات مناسب چگونه نوشته می‌شود.
نکته مهم این است که همه تنظیمات head برای تمام صفحات ضروری نیستند. برخی عناصر مانند title در یک سند HTML معمولی لازم‌اند، درحالی‌که مواردی مثل معرفی فایل CSS، فاوآیکون یا توضیحات متا بر اساس نیاز پروژه اضافه می‌شوند.
نمونه یکپارچه کد HTML
فرض کنید می‌خواهیم یک صفحه فارسی ساده بسازیم که عنوان مشخصی داشته باشد، متن آن از راست به چپ نمایش داده شود و اطلاعات پایه سند نیز در آن تعریف شده باشد. اگر هنوز فایل HTML نساخته‌اید، ابتدا راهنمای «ساخت اولین فایل HTML» را مطالعه کنید.
کد زیر نمونه‌ای از ساختار کامل چنین صفحه‌ای است:
<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>صفحه آزمایشی HTML فارسی</title>
<meta name="description" content="صفحه‌ای آزمایشی برای آشنایی با تنظیمات پایه یک سند HTML فارسی.">
<link rel="stylesheet" href="styles.css">
<link rel="icon" href="images/favicon.png" type="image/png">
</head>
<body>
<h1>صفحه آزمایشی HTML فارسی</h1>
<p>این صفحه برای تمرین تنظیم اطلاعات سند HTML ساخته شده است.</p>
</body>
</html>
در این نمونه، lang و dir روی عنصر html نوشته شده‌اند؛ داخل head اطلاعات مربوط به کدگذاری، viewport، عنوان، توضیحات و منابع خارجی آمده است و متن قابل مشاهده در body قرار دارد.
کدام تنظیمات را برای پروژه خود تغییر دهیم؟
کد بالا یک الگوی آموزشی است، نه مجموعه‌ای ثابت از دستورها که باید بدون تغییر در تمام صفحات تکرار شود. هنگام استفاده از آن در پروژه واقعی، لازم است اطلاعات اختصاصی صفحه را جایگزین کنید و تنها تنظیماتی را نگه دارید که واقعاً به آن‌ها نیاز دارید.
عنوان و توضیحات صفحه: متن داخل title و مقدار content در متاتگ description باید با موضوع واقعی همان صفحه هماهنگ باشند. برای مثال، اگر صفحه درباره آموزش فرم‌های HTML است، عنوان و توضیحات آن نیز باید همین موضوع را معرفی کنند. از تکرار یک عنوان و توضیح یکسان برای صفحات با محتوای متفاوت خودداری کنید.
زبان و جهت نوشتار: اگر محتوای اصلی پروژه فارسی است، می‌توانید lang=”fa” و dir=”rtl” را حفظ کنید. اما اگر صفحه عمدتاً انگلیسی باشد، معمولاً مقادیر lang=”en” و dir=”ltr” مناسب‌تر هستند. این تنظیمات باید بر اساس زبان و جهت واقعی محتوا انتخاب شوند.
کدگذاری و viewport: برای یک سند HTML امروزی که با UTF-8 ذخیره شده است، تنظیم charset=”UTF-8″ را حفظ کنید. مقدار width=device-width نیز برای صفحات معمولی که باید در دستگاه‌های مختلف نمایش داده شوند انتخاب مناسبی است و غالباً نیازی به تغییر ندارد.
مسیر فایل‌های خارجی: اگر نام یا محل فایل CSS و فاوآیکون در پروژه شما متفاوت است، باید مقدار href را متناسب با مسیر واقعی آن‌ها تغییر دهید. همچنین اگر از فایل CSS خارجی یا فاوآیکون استفاده نمی‌کنید، نیازی نیست عناصر مربوط به آن‌ها را صرفاً برای کامل‌تر به‌نظررسیدن بخش head نگه دارید.
متادیتاهای وابسته به شرایط انتشار: تنظیماتی مانند canonical یا robots را نباید به‌صورت خودکار به هر سند اضافه کرد. برای مثال، canonical زمانی معنا دارد که آدرس ترجیحی واقعی یک صفحه منتشرشده مشخص باشد. همچنین استفاده نادرست از noindex می‌تواند مانع نمایه‌شدن صفحه در موتورهای جستجوی پشتیبان شود. بنابراین این موارد باید بر اساس وضعیت و هدف انتشار صفحه تعیین شوند.
در نهایت، یک بخش head مناسب لزوماً بخشی نیست که تعداد زیادی عنصر داشته باشد؛ بلکه بخشی است که اطلاعات درست و موردنیاز همان سند را ارائه کند. پس از تنظیم این اطلاعات نیز باید مطمئن شویم مرورگر آن‌ها را مطابق انتظار تشخیص می‌دهد؛ موضوعی که در بخش بعد به روش بررسی و اشکال‌زدایی آن می‌پردازیم.
چگونه تنظیمات head را بررسی و خطاهای آن را برطرف کنیم؟
نوشتن اطلاعات در بخش head به‌تنهایی کافی نیست؛ باید مطمئن شویم مرورگر آن‌ها را مطابق انتظار پردازش می‌کند و مسیر منابع معرفی‌شده نیز درست است. برای مثال، ممکن است عنوان صفحه به‌درستی نمایش داده شود، اما فایل CSS بارگذاری نشود یا آدرس فاوآیکون اشتباه باشد.
برای بررسی این موارد، می‌توانیم از امکانات خود مرورگر و ابزارهای توسعه‌دهندگان (DevTools) استفاده کنیم. مهم این است که ابتدا نشانه مشکل را شناسایی کنیم و سپس با بررسی کد HTML یا درخواست‌های مرورگر، علت احتمالی آن را پیدا کنیم.
بررسی عنوان، متادیتا و منابع در مرورگر
برای شروع، فایل HTML را ذخیره کنید و آن را در مرورگر باز کنید. اگر از نمونه بخش قبل استفاده کرده‌اید، می‌توانید همان فایل را مبنای بررسی قرار دهید.
۱. عنوان صفحه را بررسی کنید
ابتدا به عنوان نمایش‌داده‌شده روی زبانه مرورگر توجه کنید. این عنوان معمولاً باید با متنی که داخل عنصر title نوشته‌اید مطابقت داشته باشد.
اگر عنوان موردانتظار را نمی‌بینید، محتوای عنصر title را در فایل HTML بررسی کنید. همچنین مطمئن شوید همان فایلی را باز کرده‌اید که تغییرات را در آن ذخیره کرده‌اید.
۲. بخش head را با DevTools مشاهده کنید
در مرورگرهایی مانند Chrome، می‌توانید کلید F12 را فشار دهید یا روی صفحه راست‌کلیک کرده و گزینه Inspect را انتخاب کنید تا ابزارهای توسعه‌دهندگان باز شوند.
سپس در پنل Elements، عنصر html و بعد از آن head را باز کنید. در این قسمت می‌توانید عناصر موجود در ساختار فعلی صفحه را مشاهده کنید و مواردی مانند title، meta و link را بررسی کنید.
در این کد، هر بخش از صفحه وظیفه مشخصی دارد. ابتدا با picture و source امکان انتخاب تصویر مناسب برای عرض‌های مختلف را فراهم کرده‌ایم و با figure و figcaption تصویر را همراه با توضیح آن در یک گروه معنایی قرار داده‌ایم.
در بخش بعدی، عنصر audio یک پخش‌کننده صوتی با کنترل‌های پیش‌فرض مرورگر ایجاد می‌کند. سپس عنصر video فایل ویدئویی را با استفاده از source معرفی می‌کند و از طریق track، فایل زیرنویس فارسی را به آن متصل می‌سازد.
برای مرتب‌کردن محتوای صفحه نیز از یک عنصر main و چند عنصر section استفاده کرده‌ایم تا هر قسمت موضوع مشخصی داشته باشد. این عناصر فقط به سازمان‌دهی معنایی محتوا کمک می‌کنند و به‌تنهایی طراحی ظاهری خاصی ایجاد نمی‌کنند.
مشاهده نتیجه در مرورگر
پس از ذخیره فایل‌ها، پروژه را از طریق یک سرور توسعه محلی با آدرس HTTP باز کنید. این روش به‌ویژه برای بررسی زیرنویس مناسب است؛ زیرا بارگذاری فایل WebVTT هنگام بازکردن مستقیم سند با آدرس file:// ممکن است در برخی مرورگرها محدود شود.
اگر فایل‌های رسانه‌ای در مسیر درست قرار گرفته باشند و مرورگر از فرمت و کدک آن‌ها پشتیبانی کند، صفحه باید شامل قسمت‌های زیر باشد:
- بخش تصویر: تصویر کوهستان همراه با توضیح زیر آن نمایش داده می‌شود. اگر عرض محیط نمایش حداکثر ۶۰۰ پیکسل باشد، مرورگر منبع تصویری مخصوص صفحه کوچک را انتخاب می‌کند.
- بخش فایل صوتی: یک پخش‌کننده با کنترل‌های مدیریت صدا ظاهر می‌شود و کاربر می‌تواند فایل intro.mp3 را پخش کند.
- بخش ویدئو: تصویر پیش‌نمایش ویدئو، کنترل‌های پخش و امکان انتخاب زیرنویس فارسی در پخش‌کننده در دسترس قرار می‌گیرند؛ البته نمایش و فعال‌سازی زیرنویس به پشتیبانی، تنظیمات و ترجیحات مرورگر نیز بستگی دارد.
این موارد نتیجه مورد انتظار تمرین هستند، نه خروجی آزمایش‌شده روی فایل‌های پروژه شما.
ظاهر کنترل‌های صوت و ویدئو ممکن است در مرورگرهای مختلف متفاوت باشد. همچنین چون در این تمرین از CSS استفاده نکرده‌ایم، فاصله‌ها، اندازه‌ها و چیدمان ظاهری عناصر تا حد زیادی به سبک پیش‌فرض مرورگر وابسته است. برای نمونه، عرض ثابت ویدئو ممکن است در نمایشگرهای باریک مناسب نباشد؛ تنظیم نمایش واکنش‌گرا را می‌توان در مرحله طراحی با CSS انجام داد.
بررسی تکمیل تمرین
برای اطمینان از اینکه پروژه را درست ساخته‌اید، فقط به نمایش عنوان‌ها و کنترل‌های پخش اکتفا نکنید. لازم است عملکرد هر بخش را نیز بررسی کنید.
- تصویر را بررسی کنید: مطمئن شوید فایل تصویری نمایش داده می‌شود. سپس عرض پنجره مرورگر را به کمتر از ۶۰۰ پیکسل برسانید و بررسی کنید آیا نسخه مخصوص صفحه کوچک انتخاب می‌شود.
- پخش صوت را آزمایش کنید: دکمه پخش را بزنید و بررسی کنید فایل صوتی واقعاً اجرا می‌شود و می‌توانید آن را متوقف کنید.
- پخش ویدئو را بررسی کنید: ابتدا تصویر پیش‌نمایش را مشاهده کنید، سپس ویدئو را پخش کنید و از نمایش تصویر و صدای مورد انتظار مطمئن شوید.
- زیرنویس را فعال کنید: در صورت نیاز از تنظیمات پخش‌کننده، زیرنویس فارسی را انتخاب کنید و بررسی کنید متن‌ها در زمان درست نمایش داده می‌شوند.
- مسیر فایل‌ها را کنترل کنید: اگر رسانه‌ای بارگذاری نشد، نام فایل، پسوند و آدرس نوشته‌شده در کد HTML را با ساختار واقعی پروژه مقایسه کنید.
اگر تمام این بررسی‌ها موفق باشند، بخش عملی این تمرین را انجام داده‌اید و می‌توانید تصویر، صوت و ویدئو را در یک صفحه HTML به کار ببرید.
برای تمرین بیشتر، می‌توانید تصویر دیگری به صفحه اضافه کنید، متن جایگزین آن را متناسب با محتوایش بنویسید یا یک فایل صوتی جدید را جایگزین فایل فعلی کنید. هدف این است که بتوانید بدون وابستگی به نام فایل‌های مثال، مسیر رسانه‌های خودتان را مشخص کنید.
برای مثال، مطمئن شوید مقدار charset مطابق انتظار است، متاتگ viewport وجود دارد و متن description همان توضیحی است که برای صفحه انتخاب کرده‌اید.
توجه داشته باشید که پنل Elements ساختار فعلی DOM را نشان می‌دهد، نه الزاماً کد اولیه فایل HTML را. مرورگر ممکن است هنگام پردازش کد، بعضی ساختارهای نادرست را اصلاح کند و JavaScript نیز می‌تواند DOM را تغییر دهد. بنابراین اگر ساختاری غیرمنتظره مشاهده کردید، آن را با کد ذخیره‌شده در فایل اصلی مقایسه کنید.
۳. بارگذاری فایل CSS و فاوآیکون را بررسی کنید
برای بررسی منابع خارجی، پنل Network را در DevTools باز کنید و درحالی‌که این پنل فعال است، صفحه را دوباره بارگذاری کنید.
در فهرست درخواست‌ها، به دنبال فایل CSS یا تصویر فاوآیکونی بگردید که در بخش head معرفی کرده‌اید. اگر صفحه از طریق وب‌سرور ارائه شده باشد، کد وضعیت 404 معمولاً نشان می‌دهد منبع در آدرس درخواست‌شده پیدا نشده است.
در چنین شرایطی، مقدار href را با آدرس واقعی فایل مقایسه کنید. نام فایل، پوشه، حروف بزرگ و کوچک و آدرس مبنای مسیرهای نسبی را نیز در نظر بگیرید.
البته مشاهده‌نشدن یک فایل در فهرست درخواست‌ها به‌تنهایی ثابت نمی‌کند مسیر آن اشتباه است؛ نحوه بارگذاری، حافظه کش و شرایط مرورگر نیز می‌توانند در بررسی مؤثر باشند.
۴. تنظیمات مخصوص موتورهای جستجو را در کد بررسی کنید
اگر برای صفحه متاتگ robots یا لینک canonical تعریف کرده‌اید، وجود و مقدار آن‌ها را در بخش head بررسی کنید.
برای مثال، مطمئن شوید مقدار noindex را ناخواسته برای صفحه‌ای که قصد انتشار عمومی آن را دارید قرار نداده‌اید. همچنین آدرس معرفی‌شده در canonical باید با URL ترجیحی واقعی همان محتوا مطابقت داشته باشد.
این بررسی فقط نشان می‌دهد چه دستورها و نشانه‌هایی در HTML وجود دارند. مشاهده صحیح آن‌ها در DevTools به معنای تأیید نمایه‌شدن صفحه یا انتخاب قطعی URL اصلی توسط گوگل نیست.
اشتباهات رایج و نشانه‌های آن‌ها
هنگام تنظیم بخش head ممکن است با مشکلاتی مواجه شوید که نشانه آن‌ها در مرورگر دیده می‌شود. شناخت این نشانه‌ها به محدودکردن علت‌های احتمالی کمک می‌کند، اما نباید بدون بررسی، هر نشانه را به یک علت قطعی نسبت داد.
نمایش‌ندادن عنوان موردانتظار: اگر عنوان زبانه مرورگر با عنوانی که نوشته‌اید متفاوت است، ابتدا محتوای title و فایل بازشده را بررسی کنید. وجود چند عنصر title یا ساختار نادرست HTML نیز ممکن است نتیجه غیرمنتظره‌ای ایجاد کند.
نمایش حروف فارسی به‌صورت نویسه‌های نامفهوم: یکی از علت‌های احتمالی، ناسازگاری میان کدگذاری واقعی فایل و کدگذاری مورد استفاده مرورگر است. بررسی کنید فایل با UTF-8 ذخیره شده و اعلان charset نیز صحیح است. اگر صفحه از وب‌سرور بارگذاری می‌شود، اطلاعات کدگذاری اعلام‌شده در سرآیند HTTP را هم در نظر بگیرید.
اعمال‌نشدن استایل‌های CSS: ابتدا بررسی کنید فایل CSS در مسیر مشخص‌شده وجود دارد و درخواست آن با موفقیت انجام می‌شود. اگر فایل بارگذاری شده ولی ظاهر صفحه تغییری نکرده است، مشکل لزوماً به head مربوط نیست و ممکن است از قواعد CSS یا اولویت آن‌ها ناشی شود.
نمایش‌ندادن فاوآیکون: آدرس فایل، قالب تصویر و نحوه معرفی آن با rel=”icon” را بررسی کنید. حافظه کش مرورگر نیز ممکن است باعث شود تغییر آیکون بلافاصله قابل مشاهده نباشد.
نمایش نامناسب صفحه در موبایل: وجود و مقدار متاتگ viewport را بررسی کنید. بااین‌حال، اگر این متاتگ به‌درستی تعریف شده باشد و همچنان چیدمان مشکل داشته باشد، لازم است قواعد CSS و اندازه عناصر صفحه نیز بررسی شوند.
قرارگیری غیرمنتظره عناصر در DOM: اگر عنصری که تصور می‌کردید داخل head قرار دارد در پنل Elements جای دیگری دیده می‌شود، کد اولیه سند را بررسی کنید. ساختار نامعتبر یا قرارگیری عناصر نامناسب در head می‌تواند باعث شود مرورگر هنگام تجزیه HTML، ساختار متفاوتی ایجاد کند. برای تشخیص خطاهای ساختاری می‌توانید از ابزار Nu HTML Checker نیز کمک بگیرید.
در پایان، برای اطمینان از تنظیم صحیح بخش head، باید بتوانید عنوان سند را در مرورگر تشخیص دهید، متادیتاهای موردنیاز را در ساختار صفحه پیدا کنید و وضعیت بارگذاری منابع خارجی را بررسی کنید. اگر نتیجه با انتظار شما متفاوت بود، مقایسه کد اولیه، DOM و درخواست‌های شبکه کمک می‌کند مشکل را دقیق‌تر محدود کنید.
این روش بررسی، نقطه شروع مناسبی برای اشکال‌زدایی تنظیمات head است؛ اعتبارسنجی کامل ساختار HTML و عیب‌یابی گسترده‌تر کدها موضوع جداگانه‌ای است که در آموزش‌های تخصصی اعتبارسنجی HTML بررسی می‌شود.
جمع‌بندی
بخش head زمانی درست تنظیم شده است که اطلاعات آن با نیاز همان صفحه هماهنگ باشند؛ نه زمانی که تعداد زیادی متاتگ در آن قرار داده باشیم. عنوان و کدگذاری سند را مشخص کنید، تنظیماتی مانند viewport و معرفی منابع خارجی را بر اساس نیاز صفحه اضافه کنید و از robots یا canonical فقط با هدفی روشن استفاده کنید. در صفحه فارسی نیز زبان و جهت نوشتار را با lang و dir روی عنصر html تعیین کنید.
برای تمرین نهایی، نمونه کامل این مقاله را با عنوان و مسیر فایل‌های پروژه خودتان شخصی‌سازی کنید. سپس صفحه را در مرورگر باز کنید و عنوان زبانه، متادیتا و بارگذاری منابع را بررسی کنید. معیار موفقیت این است که بدانید هر تنظیم چرا در سند قرار گرفته و چگونه می‌توانید درست‌بودن آن را ارزیابی کنید.
اگر می‌خواهید پس از این تمرین، ساختار سند و دیگر مباحث HTML را در یک مسیر آموزشی منظم دنبال کنید، دوره مستر HTML گزینه‌ای برای ادامه یادگیری است.
سوالات متداول
خیر. گوگل از متاتگ keywords برای رتبه‌بندی یا نمایه‌سازی صفحات استفاده نمی‌کند؛ بنابراین افزودن آن برای سئوی گوگل ضرورتی ندارد. این متاتگ را نباید با meta description اشتباه گرفت؛ زیرا گوگل ممکن است از توضیحات متا برای ساخت متن خلاصه نتایج جستجو استفاده کند.
وجود عنصر head در ساختار سند HTML ضروری است، اما طبق استاندارد HTML، در شرایط مشخص می‌توان تگ آغازین یا پایانی آن را از کد منبع حذف کرد؛ مرورگر همچنان عنصر head را در ساختار DOM ایجاد می‌کند. بااین‌حال، برای خوانایی کد و جلوگیری از اشتباه، بهتر است هنگام یادگیری HTML هر دو تگ <head> و </head> را صریح بنویسید.
هنوز دیدگاهی ثبت نشده است.