اگر نمی دانید تگ head چیست، در این مقاله از سری مقالات آموزش html css پروژه محور رایگان بصورت کامل به این موضوع پرداخته شده. شما در این مقاله خواهید فهمید تگ هد چیست؟ و با کاربرد تگ HEAD نیز آشنا خواهید گشت. همچنین به کاربرد تگ HEAD در HTML نیز پرداخته خواهد شد. با ما در سری مقالات […]
اگر نمی دانید تگ head چیست، در این مقاله از سری مقالات آموزش html css پروژه محور رایگان بصورت کامل به این موضوع پرداخته شده. شما در این مقاله خواهید فهمید تگ هد چیست؟ و با کاربرد تگ HEAD نیز آشنا خواهید گشت. همچنین به کاربرد تگ HEAD در HTML نیز پرداخته خواهد شد.
با ما در سری مقالات رایگان HTML همراه باشید، تا به تمام سوالات شما در این مورد پاسخ دهیم. پیشنهاد می کنیم قبل از خواندن این پست، حتما مقاله html چیست و چه کاربردی دارد را مطالعه کنید.
تگ Head چیست
هد یا head در زبان انگلیسی به معنی سر و قسمت بالایی وب سایت است. با توجه به همین معنی می توان به اهمیت تگ هد پی برد.
تگ head، یکی از مهمترین تگ های html است که می توان به آن، مغز اصلی صفحه وب نیز گفت. اما چرا؟
چون بین دو تگ باز و بسته head تگ های مهمی مثل تگ title و تگ meta قرارگرفته و علاوه برآن، فراخونی فایل CSS و یا استفاده از تگ Style نیز توسط همین تگ انجام می شود.
خوب است بدانید که در HTML4.01 استفاده و وجود تگ head در یک صفحه وب ضروری است. ولی در HTML5 این امکان وجود دارد که می توانید از این تگ در یک صفحه ی وب استفاده نکنید. اینجا باید متذکر شد که استفاده از تگ head در صفحات html بسیار بر روی سئو سایت تاثیرگذار است.
آموزش کار با تگ Head در HTML
عنصر head در یک سند HTML بعد از تگ HTML و قبل از تگ body قرار می گیرد. این تگ با کمک دو تگ باز و بسته <head></head> بین دو تگ اصلی <html> و <html/> می‌گیرد. به این عمل, یعنی قرار دادن یک تگ در دل تگ دیگر ، nest می‌گویند.
برای درک بهتر این قضیه به کد ساده زیر توجه کنید.
فراموش نکنید که بسیاری از عناصری که در تگ head ، قرار می گیرند در صفحه وب نمایش داده نمی شوند. اما حاوی اطلاعات مهم برای شکل گیری ساختار صفحات وب هستند.
بنابراین محتوایات بصری وب بین تگ های body قرار می گیرد، نه تگ هد. و تگ هد در بردارنده عناصر مهم برای ربات های گوکل و کد های مربوط به CSS است.
تگ ها و زیر تگ هایی که بین تگ هد قرار می گیرند
| نام تگ | توضیحات |
| title | این تگ برای مشخص کردن عنوان یک صفحه ی وب بوده، و برای ربات های جتسجوگر بسیار مهم است. |
| meta | برای اضافه کردن یکسری اطلاعات اضافی در مورد یک صفحه وب بوده و برای مرورگرها و موتورهای جستجوگر مهم است. |
| script | برای اضافه کردن دستورات جاوا اسکریپت به صفحه ی وب استفاده می شود. |
| style | برای اضافه کردن دستورات سی اس اس خطی به یک صفحه ی وب کاربرد دارد. |
| link | برای فراخوانی فایل های خارجی مثل css در یک صفحه ی وب به کار می رود. |
| base | برای مشخص کردن یک لینک پایه برای تمامی لینک های موجود در یک صفحه ی وب. |
در ادامه مقداری به توضیح تگ های بالا می پردازیم تا با کاربرد تگ head بیشر آشنا شوید . هر چند هریک از این تگ ها در مقالاتی جداگانه بصورت کامل توضیح داده شده اند.
کاربرد تگ head در html
تگ هد با جای دادن تگ های بالا در خود قطعا یکی از مهمترین تگ های HTML برای ربات های جستجوگر و مرورگر ها است.
مثلا موتور جستجوی گوگل با کمک الگوریتم های خود تصمیم می گیرد کدام صفحات به عبارات جستجو شده توسط مخاطب مرتبط تر هستند. وب سایت های که به خوبی توسط اسپایدر ها خوانده شود به احتمال زیاد در نتایج موتور های جستجو رتبه بالایی خواهند داشت.
به همین دلیل استفاده از تگ head و زیر تگ های مربوط به آن مهم است
استفاده از تگ tilte موجود در تگ head
تگ تایتل یکی از تگ های مهم موجود در تگ head است، که تنها یک بار برای هر صفحه وب مورد استفاده قرار می گیرد. لازم به ذکر است که این تگ در صفحه اصلی وب شما برای مخاطبان نمایش داده نمی شود.
کلا هیچ یک از تگ های موجود در تگ هد برای مخاطبان نمایش بصری ندارد.
شما با استفاده از این تگ به مرورگر و ربات موتور جستجوگر می فهمانید عنوان اصلی صفحه وب شما چیست. این کار تاثیر بسزای در ربته دهی و سئو سایت شما خواهید داشت.
برای اطلاعات بیشتر در مورد این تگ، مقاله تگ title در HTML را مطالعه کنید.
در کادر زیر می توانید نحوه استفاده از این تگ را برای یک صفحه ی وب، مشاهده کنید :
استفاده از تگ meta موجود در تگ هد
تگ متا موجود در تگ head به کمک متاداده هایی خود، برای مشخص کردن یکسری اطلاعات مربوط به صفحه وب، برای نمایش به مرورگرها و موتور های جستجوگر استفاده می شود. این تگ نیز مانند تگ title یک تگ تاثیرگذار و مهم در سئو و رتبه گیری صفحات وب است.
این تگ دارای یک سری اتریبیوت و یا اصطلاحا صفت است که هر کدام کاری خاص را انجام می دهند. برای کسب اطلاعات بیشتر در این مورد حتما مقاله تگ meta در HTML را مطالعه کنید
متای charset
اگر شما از فونت فارسی استفاده می کنید، برای جلوگیری از بهم ریختی هنگام نمایش در مرورگرهای می بایست از متای charset استفاده کنید. در واقع این اتریبیوت کار تعریف نوع کاراکترهای مورد استفاده در یک صفحه وب
کدی که می بایست به تگ متای خود اضافه کنید کد روبرو است: meta charset=”UTF-8″
متای description
کار این اتریبیوت، اارئه یک توضیح کوتاه یا شرحی درباره صفحه وب برای موتورهای جستجوگر و مخاطبان است. این توضیحات توسط موتور های جستجوگر هنگام سرچ به مخاطبان نمایش داده می شوند.
کدی که می بایست به تگ متای خود اضافه کنید کد روبرو است: meta name=”description” content=”arya tehran the best”
متای keywords
شما به کمک این متا، کلمات کلیدی مربوط به یک صفحه وب را برای موتورهای جستجوگر تعریف می کنید. این متا هم از متا های مهم در سئو سایت است که می بایست در تگ HEAD قرار بگیرد.
کدی که می بایست به تگ متای خود اضافه کنید کد روبرو است: meta name=”keywords” content=”HTML, CSS, JavaScript, HTMLTags”
متای author
این اتریبیوت مشخص کننده نویسنده صفحه وب برای موتورهای جستجوگر است.
کدی که می بایست به تگ متای خود اضافه کنید کد روبرو است: meta name=”author” content=”reza ghamari”
متای robots
این متا برای ایندکش یا نوایندکس کردن صفحات استفاده می شود. این اتریبیوت به موتورهای جستجوگر ( مثله گوگل ) می فهماند که این صفحه باید ایندکس شود یا خیر.
کدی که می بایست به تگ متای خود اضافه کنید کد روبرو است: meta name=”robots” content=”noindex, follow”
برای اطلاعات بیشتر در این مورد می توانید مقاله ایندکس و نوایندکس چیست را مطالعه فرمایید.
در سند زیر شیوه استفاده از متا تگ در کنار تگ هد نمایش داده شده است.
استفاده از تگ link موجود در عنصر head
همانطور که در فیلم آموزشی موجوددر مقاله CSS چیست توضیح دادیم، با استفاده از تگ link ما می توانیم به راحتی فایل سی اس اس خارجی یا External خود را که بصورت مجزا ایجاد شده است را فراخوانی یا اصطلاحا به صفحه ی وب خود متصل کنیم.
برای اطلاعات بیشتر در مورد این تگ، حتما مقاله تگ link در HTML را مطالعه کنید. در کادر زیر شیوه استفاده از این عنصر را در تگ head مشاهده می کنید
استفاده از تگ style موجود در عنصر هد در html
این تگ عملی شبیه به تگ link دارد. با این تفاوت که تگ لینک فراخوان کننده یک فایل css خارجی است و تگ style ایجاد کننده یک بخش css دهی برای یک صفحه خاص است.
به عبارتی دیگر، زمانی که شما می خواهید فقط برای یک صفحه یکسری css خاص تعریف کنید می توانید از تگ استایل برای سی اس اس نویسی استفاده کنید.
پیشنهاد می کنیم هیچ وقت از این نوع css نویسی استفاده نکنید. چرا که استفاده از تگ link و سی اس اس دهی خارجی بسیار استاندارد تر است.
برای اطلاعات بیشتر در مورد تگ style می توانید مقاله تگ style در html را مطالعه کنید. در ادامه شیوه استفاده از عنصر استایل در تگ هد برای شما نمایش داده شده است.
استفاده از عنصر script موجود در تگ head در html
این تگ وظیفه قرار دادن و به کارگیری دستورات جاوا اسکریپت در html را بر عهده دارد. برای یادگیری و استفاده هرچه بهتر از این تگ، حتما مقاله تگ script در html را مطالعه کنید.
در کادر زیر شیوه استفاده از این عنصر در تگ head برای شما قرار داده شده است.
استفاده از عنصر base موجود در تگ head
این عنصر معمولا خیلی در تگ head مورد استفاده قرار نمی گیرد. با استفاده از این تگ در قسمت Head یک صفحه وب می توان بیس یا پایه اصلی مقصد تمامی لینک های موجود در یک صفحه وب را مشخص کرد. یعنی چه؟
یعنی اگر ما سه لینک زیر را داشته باشیم:
www.aryatehran.com/category/
www.aryatehran.com/category/html/
www.aryatehran.com/category/accounting-articles
مقصد، لینک یا url اصلی یعنی www.aryatehran.com/category/ پایه و بیس اصلی مقصد دو لینک دیگر است. بنابراین می توانیم از آن به عنوان لینک مقصد پایه به شکل زیر استفاده کنیم.
برای کسب اطلاعات بیشتر در مورد این عنصر، حتما مقاله تگ base در html را مطالعه کنید.
کدام مرورگر ها از <head> پشتیبانی می کنند ؟
| نام مررورگر | Chrome | Firefox | Opera | Safari | IE |
| پشتیبانی | بله | بله | بله | بله | بله |
جدول صفات تگ head در HTML
تگ head تنها از صفات عمومی در HTML پشتیبانی می کند و صفت مخصوص به خود را ندارد.
عدم استفاده از تگ head در HTML5
همانطور که در ابتدای مقاله گفته شد، در html5 این امکان فراهم شده که شما از تگ head استفاده نکنید. که به هیچ وجه پیشنهاد نمی شود.
در ادامه به نمایش شیوه کد نویسی بدون استفاده از تگ head در HTML5 خواهیم پرداخت
سوال: اگر از تگ هد می شود که استفاده نکرد و تگ های title و متا را بدون تگ هد می شود به کار برد، پس سئو چی می شود؟
جواب را در قسمت نظرات مطرح کنید.
دستورات CSS مخصوص تگ head
معمولا مرورگرها تگ head را بصورت پیش فرض با دستورات CSS زیر نمایش می دهند.
اگر به یادگیری تخصصی HTML و CSS علاقمند هستید حتما از کلاس آموزش html و css آموزشگاه آریا تهران استفاده کنید. همچنین برای یادگیری طراحی سایت می توانید از خدمات آموزش طراحی سایت رایگان و یا شرکت در دوره طراحی سایت با ما تماس بگیرید.
سوالات متداول در مورد عنصر هد در اچ تی ام ال
تگ head برای سئو مهم است ؟
بله. قطعا از آنجایی که تگ هد نمایش دهنده هد سایت است و می تواند در برگیرنده تگ هایی مثل titel و meta باشد برای سئو مهم است.
تفاوت تگ Head با تگ های Heading چیست؟
تگ هد یا سر وب سایت، یکی از چهار عضو اصلی یک کد ابتدایی html است که خود حاوی تعدادی تگ بوده و معرف عنوان و توضیحات مرتبط به یک صفحه از وب است.
تگ heading یا تیتر، تگ معرفی کنند تیتر های از ۱ تا ۶ است که عنواین مهم یک متن را نشان می دهد و داخل تگ body قرار می گیرد.
اگر از تگ head استفاده نکنیم چه اتفاقی می افتد ؟
اگر از تگ هد در html5 استفاده نکنید هیچ در نمایش اتفاقی نمی افتد. اما استفاده از این تگ در ورژن های پایین تر html ضروری است.
تاثیر استفاده از این تگ برای سئو را فراموش نکنید.
مقاله قبلی ما تحت عنوان تگ Doctype html چیست را که در راستای همین آموزش است بررسی کنید.
