آموزش تگ head در HTML - راهنمای درج عناصر آغازین صفحه در html
تگ head برای درج عناصر آغازین صفحه مانند عنوان صفحه، متا تگ ها، تعریف استایل css، درج فایل ها یا دستورات جاوا اسکریپت، درج فید rss و... استفاده می شود.
تگ head بعد از تگ <html> و قبل از تگ <body> قرار می گیرد.
این عناصر می تواند داخل تگ head قرار گیرد:
<title>: برای تعریف عنوان صفحه
<style>: برای تعریف دستورات css
<base>: برای تعریف URL پیش فرض برای لینک های صفحه
<link>: برای اضافه کردن فایل های خارجی به صفحه
<meta>: برای اضافه کردن اطلاعات در مورد یک صفحه برای مرورگرها و موتورهای جستجو
<script>: برای اضافه کردن دستورات جاوا اسکریپت به صفحه
<noscript>
مثال تگ head در HTML:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>آموزش HTML</title>
</head>
<body>
این متن آموزش HTML است.
</body>
</html>
تگ title
تگ title مهمترین تگ صفحه است و عنوان صفحه را برای مرورگر و موتورهای جستجو مشخص می کند.
مثال: استفاده از تگ title در قسمت Head صفحه
<title>عنوان صفحه</title>
</head>
تگ style
تگ style برای تعریف دستورات css برای تغییر استایل صفحه به کار می رود.
مثال: استفاده از تگ style در HTML
<style>
h1 {color:red;}
p {color:blue;}
</style>
</head>
تگ link
برای اتصال فایل css به صفحه از تگ link استفاده می شود.
مثال: استفاده از تگ link در HTML
<link rel="stylesheet" href="http://rasanehpardaz/allstyle.css">
</head>
تگ script
تگ script برای اضافه کردن دستورات جاوا اسکریپت یا فایل جاوا اسکریپت به صفحه به کار می رود.
مثال: استفاده از دستورات جاوااسکریپت بصورت داخلی
<script>
function MyMessage(){
document.getElementById("Result").innerHTML = "Salam Khobi?";
}
</script>
</head>
مثال: استفاده از دستورات جاوا اسکریپت بصورت فایل خارجی
<script src="http://rasanehpardaz/slideshow.js"></script>
</head>
مثال های تگ head در HTML
مثال 1: استفاده از تگ base برای مشخص کردن URL پیش فرض و یک صفحه مقصد برای لینک های موجود در یک صفحه
<base href="https://www.w3schools.com/" target="_blank">
</head>
مثال 2: استفاده از تگ meta برای نمایش زبان فارسی
<meta charset="UTF-8">
</head>
مثال 3: مشخص و تعریف کردن نام نویسنده مطلب یا صفحه برای موتورهای جستجو
<meta name="author" content="hasan hasani">
</head>
مثال 4: تعریف کلمات کلیدی مرتبط با مطلب یا صفحه برای موتورهای جستجو
<meta name="keywords" content="HTML ,CSS ,JavaScript">
</head>
مثال 5: تعریف شرح کوتاه درباره مطلب یا صفحه برای نمایش در موتورهای جستجو
<meta name="description" content="آموزش طراحی وب">
</head>
مثال 6: تعریف تگ meta برای واکنش گرایی یک صفحه وب در گوشی موبایل، تبلت و...
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
مثال 7: تغییر مسیر صفحه بعد از 5 ثانیه به صفحه دیگر
<meta http-equiv="refresh" content="5 , http://rasanehpardaz.com">
</head>
مثال 8: تعریف رفرش شدن 10 ثانیه یک بار صفحه با تگ meta
<meta http-equiv="refresh" content="10">
</head>
مثال 9: دنبال شدن صفحه توسط ربات های خزنده و ایندکس آن در موتورهای جستجو را مشخص می کند.
<meta name="robots" content=" index , follow ">
</head>
پشتیبانی مرورگرها
تگ <head> در مرورگرهای کروم، فایرفاکس، اپرا، سافاری، اینترنت اکسپلورر و اج پشتیبانی می شود.
| مرورگر | کروم | فایرفاکس | اپرا | سافاری | اینترنت اکسپلورر / اج |
| پشتیبانی | بله | بله | بله | بله | بله |
ویژگی ها
| ویژگی | مقدار | توضیحات |
| profile | URL | آدرس صفحه ای که حاوی قوانین مرتبط با صفحه وب است را تعریف می کند. این قوانین توسط مرورگرها قابل خواندن است تا به وضوح اطلاعات موجود در ویژگی content در تگ <meta> را درک کرد. این ویژگی در HTML5 پشتیبانی نمی شود. |
پشتیبانی از ویژگی ها و رویدادهای عمومی
تگ <head> از ویژگی های عمومی در HTML پشتیبانی می کند.
دستورات CSS پیش فرض
معمولا مرورگرها تگ head را بصورت پیش فرض با دستورات CSS زیر نمایش می دهند.
display: none;
}