آموزش تگ <head> در html
به نام خداوند علم و دانش. سلام به دوستان گرامی و مخاطبین وب سایت آموزشی کدیونی، وقت همگی بخیر، در این صفحه با مطلب آموزش تگ <head> در html از سری آموزش های HTML در خدمت شما عزیزان هستیم.
فهرست مطالب
در مطلب قبلی با ساختار کلی html آشنا شدید و همانطور که گفته شد تگ <head> شامل اطلاعاتی است که از دید کاربران مخفی می ماند و معمولا این اطلاعات برای مرورگرها و موتور های جستجوگر قابل مشاهده است. در این مطلب قصد داریم عناصر موجود در تگ head را بررسی کنیم.
این تگ با <head> شروع شده و با </head> پایان می یابد.
کد:
<head></head>عناصر درون تگ <head>
به طور کلی تگ های زیر درون تگ head قرار می گیرند:
- تگ <title>
- تگ <meta>
- تگ <link>
- تگ <style>
- تگ <script>
- تگ <noscript>
- تگ <base>
تگ title
همین الان اگر به تب کنونی مرورگر خود نگاه کنید عبارت «آموزش و آشنایی با تگ <head> در html» را می بینید این جمله توسط تگ title در head چاپ شده است و برای نوشتن عنوان از این تگ استفاده می کنیم.
کد:
<title>CodeUni.Ir</title>تگ meta
تگ meta از پرکاربردترین عناصر موجود در head به حساب می آید. به عنوان مثال با این تگ، charset سند را به UTF-8 تغییر می دهیم تا زبان فارسی قابل چاپ شود.
همان طور که می دانید زبان نوشتاری ما فارسی است و در اولین قدم باید charset سند را تنظیم کنیم در غیر این صورت کلمات فارسی در مرورگر به درستی نمایش داده نمی شود.
کد:
<meta charset="UTF-8">از جمله متاتگ های پرکاربرد می توان به موارد زیر اشاره کرد:
متاتگ description که وظیفه نمایش خلاصه ای از مطلب به موتور های جستجوگر را دارد.
کد:
<meta name="description" content="CodeUni.Ir" />متاتگ robots که وظیفه ایندکس شدن یا نشدن صفحه در موتور های جستجوگر را دارد.
کد:
<meta name="robots" content="index, follow" />متاتگ viewport برای تنظیم نمایش سایت متناسب با موبایل (واکنش گرا) کاربرد دارد.
کد:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />همانطور که در مثال های فوق دیدید متاتگ ها اطلاعات و یا تنظیماتی در دل خود دارند که به مرورگر ها و موتور های جستجوگر خیلی کمک می کند.
تگ link
این تگ، همان طور که از اسمش پیداست اشاره به لینکی دارد.
به عنوان مثال می خواهیم آیکونی برای سایت خود انتخاب و در مرورگر نمایش دهیم. با استفاده از تگ link می توان این کار را انجام داد!
کد:
<link rel="shortcut icon" type="image/x-icon" href="icon.ico" />یکی دیگر از کاربرد های مهم تگ link فراخوانی فایل های css است. گاهی کدهای css که برای طراحی و زیبایی سایت کاربرد دارد به قدری حجیم می شوند که بهتر است در یک فایل جدا ذخیره و سپس توسط تگ link فراخوانی شود! این کار هم به طراحی نظم می دهد و هم باعث کش شدن فایل css می شود.
کد:
<link rel="stylesheet" href="style.css" />تگ style
اگر شرایط جوری پیش رفت که حاضر به جداسازی کد های css از html نشدید و دوست دارید کد های css در همان html بماند از تگ style استفاده می کنیم.
کد:
<style>
/* CSS Code */
</style>تگ script
این تگ مربوط به اجرا کد های جاوا اسکریپت می باشد که به دو صورت داخلی و خارجی قابل فراخوانی است.
فراخوانی به صورت داخلی:
کد:
<script>
//JavaScript Code
</script>فراخوانی به صورت خارجی:
کد:
<script src="script.js"></script>نکته: در صورتی که الزامی به قرار دادن کد های جاوا اسکریپت درون تگ head نباشد بهتر است به منظور افزایش سرعت لود سایت، فایل جاوا اسکریپت در انتهای سند html قرار گیرد.
تگ noscript
این تگ زمانی به کار می رود که مرورگر از جاوا اسکریپت پشتیبانی نکند.
<noscript>Text</noscript>تگ base
این تگ آدرس پایه ای برای لینک های صفحه تعیین می کند.
<base href="https://codeuni.ir/">مثال تگ head
کد:
<head>
<meta charset="UTF-8">
<title>CodeUni.Ir</title>
<meta name="description" content="CodeUni.Ir" />
<meta name="robots" content="index, follow" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<link rel="shortcut icon" type="image/x-icon" href="icon.ico" />
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
<style>
/* CSS Code */
</style>
<script>
//JavaScript Code
</script>
<noscript>Text</noscript>
<base href="https://codeuni.ir/">
</head>تنظیمات پیش فرض CSS
تنظیمات پیش فرض CSS تگ head به صورت زیر است:
head {
display: none;
}سازگاری با مرورگرها
تگ head با مرورگرهای زیر سازگار است:
- گوگل کروم
- فایرفاکس
- اج
- اپرا
- سافاری
- گوگل کروم اندروید
- فایرفاکس اندروید
- اپرا اندروید
- سافاری iOS