اهمیت و کاربرد Head در اسناد HTML

HTML Head

2 557

عنصر <head> چیست؟

عنصر <head> در یک سند HTML وظیفه ی نگه داری از metadata را دارد و بین <html> و <body> قرار می گیرد. metadata یعنی «داده هایی که در مورد داده های دیگر» هستند! به طور مثال وقتی می گوییم «metadata های سند HTML» یعنی اطلاعاتی درباره ی سند HTML (که خود اطلاعات است).

واضح است که metadata نمایش داده نمی شود و شکل بصری ندارد بلکه مواردی مثل این موارد را شامل می شود:

  • character set (مواردی مثل UTF-8)
  • document title (عنوان سند)
  • styles (استایل های CSS)
  • محل قرار گیری تگ های link و script
  • و دیگر اطلاعاتی که راجع به خودِ سند HTML باشد

بیایید تک تک این موارد را بررسی کنیم!

تگ <title>

عنصر <title> عنوان و تیتر کل سند را انتخاب می کند و باید در تمام اسناد HTML وجود داشته باشد تا HTML شما غیر معتبر تلقی نشود.

به عبارت دیگر 3 کار اصلی <title> از این قرار است:

  • موضوع صفحه ی HTML را در تب مرورگر کاربر نمایش می دهد
  • اگر صفحه ای به favorites اضافه شود، عنوان آن همان محتوای <title> خواهد بود
  • تگ <title> همان چیزی است که در موتورهای جست و جو به عنوان لینک سایت شما می آید

به این مثال ساده نگاه کنید:

مشاهده ی خروجی در JSBin

همانطور که می بینید این موضوع بسیار ساده بود.

تگ <style>

تگ <style> استایل های CSS را مشخص می کند.

ما در دوره ی CSS توضیح دادیم که کدهای CSS به سه روش اصلی نوشته می شوند:

  • به صورت inline (به صورت attribute)
  • به صورت internal (در قسمت <head> از سند HTML)
  • به صورت external (در یک فایل جداگانه)

در واقع تگ <style> مورد دوم یا internal است. به مثال زیر توجه کنید:

مشاهده ی خروجی در JSBin

استفاده از کدهای CSS به این صورت ایده آل ترین حالت ممکن نیست اما ضربه ی جدی نیز به شما نمی زند. معمولا در یک وب سایت واقعی از آن جا که کدهای CSS بسیار حجیم می شوند مجبور می شوید آن ها را در یک فایل جداگانه (external) بنویسید و سپس با استفاده از link آن ها را به سند HTML متصل کنید. این نوع از نوشتن کدهای CSS معمولا برای مباحث یادگیری و تمرین و یا کدهای CSS خاصی است که برنامه نویس می خواهد در آن قسمت قرار بگیرند.

تگ <link>

از تگ <link> برای آدرس دهی به یک فایل خارجی استفاده می شود که معمولا جاوا اسکریپت و یا CSS است. با این کار فایل های خارجی خود را به سند HTML متصل کرده و می توانیم از کدهای داخلشان استفاده کنیم.

مثال:

مشاهده ی خروجی در JSBin

همانطور که میبینید از یک فایل CSS خارجی و متعلق به سایت دیگری استفاده کرده ایم.

عنصر <meta>

تگ <meta> کار مشخص کردن اطلاعات خاصی را دارد. به طور مثال اینکه character set استفاده شده در سند چیست؟ یا چه keyword هایی برای این صفحه تعیین شده است؟ author (نویسنده) ی این صفحه کیست؟ و الی آخر …

مرورگرها به طور عمده از <meta> برای بهتر نمایش دادن محتوا و موتورهای جست و جو برای دریافت keyword ها استفاده می کنند.

– برای تعیین character set از این کد استفاده می کنیم:

پیشنهاد تمام متخصصین حوزه ی وب این است که اگر هر جایی (چه پایگاه داده، چه اسناد HTML و …) مجبور به انتخاب نوع encoding یا همان character set شدید، آن را روی UTF-8 بگذارد چرا که بسیار از زبان ها را پشتیبانی می کند. در غیر این صورت ممکن است برخی از کاراکتر های صفحه ی شما نمایش داده نشود. البته این موضوع اگر در پایگاه داده باشد، خسارات سنگین تری بر جای می گذارد؛ مانند اشتباه ذخیره شدن نام و اطلاعات مشتریان!

– برای تعیین description (توضیحات در مورد صفحه ی وب خود) از این قالب استفاده کنید:

به طور مثال در سایت روکسو این توضیح را ارائه داده ایم:

این توضیح علاوه بر خلاصه و کوتاه بودن، جامع است و محتوای سایت را به خوبی توضیح میدهد. شما نیز باید به همین شکل توضیحاتی در رابطه با سایت خود ارائه کنید.

– برای تعیین کلیدواژه ها (keywords) از این قالب استفاده کنید:

– همچنین شما می توانید نویسنده ی صفحه یا همان author را به این شکل تعیین کنید:

نکته: این نوع اطلاعات بیشتر به درد موتور های جست و جو می خورد نه کاربران شما. وب سایت شما بدون این اطلاعات نیز به شکل صحیح کار می کند اما از نظر سئو ضربه خواهد خورد!

– شما حتی می توانید صفحات خود را طوری تنظیم کنید که هر فلان ثانیه (مثلا اینجا 30 ثانیه) refresh شوند:

بیایید این موارد را در یک مثال استفاده کنیم:

مشاهده ی خروجی در JSBin

مبحث viewport

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

مشخص است که viewport در تلفن های همراه (مانند دستگاه های اندرویدی) کوچکتر است بنابراین باید مراقب این نوع کاربران نیز باشیم.

نکته: کد زیر باید برای تمام صفحات وب شما تعیین شده باشد:

این کد به مرورگر کاربر می گوید که صفحه را چطور نمایش دهد و چطور با مقایس یک صفحه کار کند.

قسمت width=device-width می گوید عرض صفحه (width) باید با عرض صفحه ی دستگاه کاربر (چه کامپیوتر، په تبلت، چه گوشی و …) هماهنگ باشد. از طرفی قسمت initial-scale=1.0 می گوید، مقدار بزرگنمایی اولیه ی یک صفحه چقدر باید باشد؛ وقتی به آن عدد 1.0 داده ایم یعنی 1 برابر بزرگنمایی داشته باشد و همانطور که می دانید 1 برابر بزرگنمایی یعنی همان سایز اصلی و بدون بزرگنمایی. اگر مقادیر بیشتری از 1 به آن بدهید، پس از بارگذاری صفحات برای کاربر، صفحه به همان اندازه بزرگنمایی (zoom) خواهد داشت که اصلا کار قشنگی نیست.

بگذارید تفاوت استفاده از این دستور را در صفحات وب به شما نشان دهم!

ابتدا به کد زیر نگاه کنید:

مشاهده ی خروجی در JSBin

در این کد از width=device-width و … استفاده نکرده ایم. اگر به خروجی این صفحه در JSBin بروید و صفحه ی مرورگرتان یا قسمت راست JSBin (یعنی قسمت مشاهده ی خروجی) را کوچک تر کنید میبینید که تصویر از کادر خارج می شود!

حالا به این کد نگاه کنید:

مشاهده ی خروجی در JSBin

در این صفحه از دستور زیر استفاده کرده ایم:

اگر در JSBin، صفحه سمت راست را کوچک کنید و یا اندازه ی مرورگر خود را بسیار کوچک کنید، متوجه می شوید که اندازه ی تصویر متناسب با اندازه ی صفحه تغییر می کند و دیگر از کادر خارج نمی شود! دلیل استفاده از این دستور همین موضوع ساده اما بسیار کاربردی است!

تگ <script>

تگ <script> برای اضافه کردن کدهای جاوا اسکریپت است (چه خارجی و چه داخلی).

به طور مثال در کد زیر میخواهیم عبارت Hello JavaScript را نمایش دهیم:

مشاهده ی خروجی در JSBin

در دوره ی جاوا اسکریپت ما می توانید بیشتر در رابطه با این مورد مطالعه کنید.

تگ <base>

تگ <base> در عمل URL یا آدرس اینترنتی پایه ی وب سایت شما را مشخص می کند تا تمام آدرس های اینترنتی دیگری که در صفحه ی ما موجود هستند با آن شروع شوند.

به مثال زیر توجه کنید:

مشاهده ی خروجی در JSBin

در کد بالا می بینیم که من به href مربوط به لینک، مقدار react-loops/ را داده ام! این مقدار به خودی خود اشتباه است اما از آنجا که base یا پایه ی URL خود را www.roxo.ir/plus تعریف کرده ام، این Base به مقدار href میچسبد و در نهایت لینک زیر را می سازد:

https://www.roxo.ir/react-loops/

هشدار: در استاندارد HTML5 گفته شده است که شما اجازه دارید تگ های <html> و <body> و <head> را حذف کنید. یعنی کد شما به این شکل باشد:

اما ما به شما پیشنهاد می کنیم تحت هیچ شرایطی چنین کاری را انجام ندهید. پاک کردن تگ های  <html> و <body> می تواند DOM یا نرم افزار XML را به طور کامل از کار بیندازد و در مرورگرهای قدیمی مانند IE9 نیز باعث خطاهای فراوان می شود. این مسئله که شما اجازه به پاک کردن برخی از تگ ها دارید، به شرایط و حالت خاصی مربوط است، نه اینکه چون می توانیم باید تمام این تگ ها را در شرایط عادی حذف کنیم.

امیدوارم از این قسمت لذت برده باشید.

ترتیبی که روکسو برای یادگیری مطالب سری صفر تا صد HTML به شما توصیه می‌کند:
2 نظر
  1. مجتبی

    ببخشید میدونم که جاش اینجا نیست ولی در مورد utf8 تو پایگاه داده سوال دارم. من اونجا utf8 میزنم ولی بازم فارسی ساپورت نمی کنه چیکار کنم؟

    1. امیر زوارمی

      سلام دوست عزیز،
      برای پشتیبانی کامل از unicode و UTF-8 در پایگاه داده باید encoding رو روی utf8mb4 بزارین. در واقع انواع مختلفی از UTF-8 رو داریم و اگر روی چیزی غیر از utf8mb4 بزارین ممکنه کار نکنه.

      اطلاعات بیشتر رو میتونین از اینجا بخونین:
      https://mathiasbynens.be/notes/mysql-utf8mb4

ارسال نظر

توجه:‌ آدرس ایمیل شما منتشر نخواهد شد.

mezitli escort
mezitli escort