120


'

توضیحات جامع درباره تگ head


head_tag '



تگ head چیست؟

اگر تا به حال با زبان های برنامه نویسی کار کرده باشید، حتما می دانید که در بسیاری از برنامه ها نیاز است تا یک یا چند فایل را به فایل اصلی ایمپورت کرد تا بتوان اطلاعات و کدهای مورد نیاز را از آنها گرفت. برای مثال اگر بخواهیم در زبان c از یک کتابخانه استفاده کنیم و یا یک داده را در فایلی دیگر تعریف کرده باشیم و بخواهیم به آن دسترسی پیدا کنیم، باید آن فایل یا کتابخانه را در فایل اصلی پروژه include کنیم.

علاوه بر این در ساخت بسیاری از برنامه ها نیاز است تا اطلاعاتی درباره برنامه مانند سازنده، ورژن، نام برنامه و ... را مشخص کنیم تا در برای انتشار برنامه در اپ استور ها، به مشکلی بر نخوریم؛ پس طبیعی است که یک سایت نیز به اینها نیاز داشته باشد. شاید عجیب باشد اما در بسیاری از مواقع نیاز است تا یک فایل را به فایل اصلی html خود پیوند بزنیم. برای مثال اگر بخواهیم از استایل ها و کدهای cssای که نوشته ایم استفاده کنیم، باید آن را به فایل html سایت خود متصل کنیم. این کاربرد در فایل ها جاوا اسکریپت و فریمورک هایی همچون بوت استرپ نیز صدق می کند.

دیگر نکته ای که باید در هز سایت رعایت کنیم، مشخص کردن اطلاعاتی درباره سایت است. همانطور که می دانید برای اینکه یک سایت پیشرفت کند، به شدت نیاز دارد تا در موتور های جستجو به رتبه خوبی دست پیدا کند، پس طبیعی است که نیاز داشته باشد خواسته ها و اطلاعات مورد نظر آنها را فراهم کند. موتور های جستجو به داده هایی همچون نام سازنده سایت، مالک سایت، کلمات کلیدی متن نوشته شده، مختصر متن نوشته شده و ... اهمیت زیادی می دهند و ما باید این اطلاعات را در سایت نمایان کنیم.

همانطور که در آموزش شروع به کار با html اشاره کردیم، تگ ها به دو دسته تقسیم می شوند، آنهایی که یک محتوا و المان را نمایش می دهند، و آنهایی که اینکار را نمی کنند. درواقع تگ هایی که المان و ظاهر گرافیکی ای ندارند، اطلاعاتی را مشخص می کنند و یا کار هایی را در پشت صحنه انجام می دهند و بدیعی است که این نوع تگ ها به مراتب مهم تر هستند. تگ های نوع 2 (ظاهر گرافیکی ندارند) کارهایی را انجام می دهند که در بند های بالا گفتیم، یعنی اتصال فایل های خارجی و مشخص کردن اطلاعاتی درباره سایت و باید بدانید که این تگ ها همگی در تگ head نوشته می شوند.

head نام تگی دیگر است که همیشه باید آن را بنویسیم. درواقع این تگ وظیفه مهمی را بردوش می کشد و تمام تگ های نوع 2 در این تگ نوشته می شوند. همانطور که از اسم این تگ پیدا است، head مغز متفکر هر سایت است و به نحوی اگر این تگ نوشته نشود و یا درست از آن استفاده نکنیم، سایت ناقص باقی می ماند. این بدان معنا است که یکسری اعمال مانند پردازش و یا آماده سازی سایت، در این تگ انجام می شود. درواقع برخی تگ ها در html، محتوایی را به کاربر نشان نمی دهند، بلکه تنها یکسری اعمال را هنگام لود شدن سایت، انجام می دهند. برای مثال تگ link یک فایل را به فایل اصلی html ما متصل می کند. درواقع تگ link هیچ محتوایی را نشان نمی دهد، تنها یک فایل را متصل می کند. (ممکن است که فایل متصل شده باعث نشان داده شدن یک محتوا شود) دیگر تگی که می توان به عنوان نمونه نام برد، تگ meta است. تگ های meta درواقع وظیفه تعریف یکسری صفات پایه برای سایت ما را بر عهده دارند، برای مثال تعیین خلاصه سایت و یا مشخص کردن کلمات کلیدی سایت. این تگ نیز محتوایی نشان نمی دهد و تنها صفاتی را تعیین می کند.

تگ head در ابتدای تگ html قرار می گیرد و دارای قسمت آغازین و پایانی است. (باید توجه کنید که این تگ با تگ هایی همچون header و تگ های h1 تا h6 تفاوت دارد و شیوه کار انها کاملا متفاوت است)

example_head_tag

کاربرد تگ head

در قدم اول باید توجه داشته باشید که همیشه و همه جا باید تگ head را حتما بنویسید، اما بد نیست که به کاربرد های این تگ نیز اشاره کنیم. تگ head در حالت عادی کاربردی ندارد و کاری نیز انجام نمی دهد و این تگ های دیگر هستند که با نوشته شدن در تگ head به آن معنا می بخشند. تگ head علاوه بر کاربرد هایی که تا به اینجای آموزش گفته ایم، کاربرد های بسیار دیگری نیز دارد و تگ های مهم دیگری نیز هستند که در این تگ نوشته می شوند. از میان این تگ ها می توان به تگ style اشاره کرد. این تگ اجازه می دهد تا بتوانیم کدهای css را در آن بنویسیم و دیگر نیازی نیست تا در فایلی جدا قرار داده شوند. دیگر کاربرد head تگ title است. این تگ عنوان سایت را مشخص می کند، همان نوشته ای که در بالا و در تب مرورگر کنار لوگوی سایت نوشته می شود.

title

علاوه بر این با استفاده از تگ link می توان کتابخانه ها و فریمورک های جاوا اسکریپت و css را به فایل اصلی پروژه اضافه کرد تا بتوانیم کار خود را در نوشتن و دیباگ کدها ساده تر کنیم. به طور کل تگ head برای این ساخته شده تا html فقط یک ظاهر گرافیکی نباشد و چیزی در پشت صحنه در حال انجام باشد. تا html تنها یک پوسته خالی و شاید زیبا نباشد و معنا داشته باشد، تا کدنویس بتواند پای خود را فراتر از ساخت تنها یک ظاهر گرافیکی بگذارد و بتواند از ابزار های دیگر برای بهتر شدن فایل html استفاده کند.

تگ head در چه مرورگر هایی پشتیبانی می شود؟

IE Opera Chrome Safari Firefox
بله بله بله بله بله

اتربیوت های تگ head

تگ head در html 5 هیچ اتربیوتی مخصوص به خودش ندارد و تنها از اتربیوت های عمومی در html پشتیبانی می کند.

چه تگ هایی در head قرار می گیرند؟

تگ هایی مانند style (برای نوشتن کدهای css در html)، script (برای اضافه کردن کدهای جاوا اسکریپت به html)، base (برای مشخص کردن لینک های پایه)، link (برای اتصال فایل خارجی به فایل اصلی html)، meta (ّبرای مشخص کردن صفات پایه سایت) و title (برای مشخص کردن عنوان و نام سایت) در این تگ قرار می گیرند.