آموزش HTML صفحه اصلی اینستاگرام ما
عنصر head در HTML

HTML - عنصر Head


عنصر HTML <head> یک نگهدارنده برای عناصر زیر است : <title> ، <style> ، <meta> ، <link> ، <script> و <base> .


عنصر <head>

عنصر <head> یک نگهدارنده برای متا داده ها (اطلاعات مربوط به داده ها) است و بین تگ <html> و تگ <body> قرار گرفته است .

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

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


عنصر <title>

عنصر <title> عنوان سند را مشخص میکند . عنوان باید فقط متن باشد ، و در نوار عنوان مرورگر یا در تب صفحه نمایش داده میشود .

تگ <title> در اسناد HTML لازم است !

محتوای عنوان یک صفحه برای بهینه سازی موتور جستجو (SEO) بسیار مهم است ! عنوان صفحه توسط الگوریتم های موتور جستجو برای تعیین ترتیب هنگام لیست کردن صفحات در نتایج جستجو استفاده میشود .

عنصر <title> :

بنابراین ، تلاش کنید عنوان را تا حد امکان دقیق و معنی دار بسازید !

یک سند ساده HTML :

مثال

<!DOCTYPE html>
<html>
<head>
  <title>یک عنوان صفحه معنی دار </title>
</head>
<body>

محتوای سند ......

</body>
</html>
امتحان کن »

عنصر <style>

عنصر <style> برای مشخص کردن اطلاعات سبک برای یک تک صفحه HTML استفاده میشود :

مثال

<style>
  body {background-color : powerblue;}
  h1 {color : red;}
  p {color : blue;}
</style>
امتحان کن »

عنصر <link>

عنصر <link> رابطه بین سند کنونی و یک منبع خارجی مشخص میکند .

تگ <link> اغلب برای لینک شدن به شیوه نامه های (CSS) خارجی استفاده میشود :

مثال

<link rel="stylesheet" href="mystyle.css">
امتحان کن »

عنصر <meta>

عنصر <meta> معمولا برای مشخص کردن مجموعه کارکتری ، توضیحات صفحه ، کلید واژه ها ، نویسنده سند ، و تنظیمات viewport استفاده میشود .

متا داده ها در صفحه نمایش داده نخواهند شد ، اما توسط مرورگرها (چطور محتوا را نمایش دهد یا صفحه را بارگیری کند) ، توسط موتورهای جستجو (کلیدواژه ها) ، و دیگر سرویس های وب استفاده میشوند .

مثال ها

مشخص کردن مجموعه کارکتری (character set) مورد استفاده :

<meta charset="UTF-8">

مشخص کردن یک توضیح (description) در مورد صفحه وب :

<meta name="description" content="آموزش رایگان HTML">

مشخص کردن کلید واژه ها (keywords) برای موتورهای جستجو :

<meta name="keywords" content="HTML, CSS, XML, JavaScript">

مشخص کردن نویسنده (author) یک صفحه :

<meta name="author" content="ساسان لطفی">

تازه کردن (Refresh) سند در هر 30 ثانیه :

<meta http-equiv="refresh" content="30">

تنظیم viewport برای خوب به نظر آمدن در همه دستگاه ها :

<meta name="viewport" content="width=device-width, initial-scale=1.0">

مثالی از تگ های <meta> :

مثال

<meta charset="UTF-8">
<meta name="description" content="آموزش رایگان HTML">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="ساسان لطفی">
امتحان کن »

تنظیم Viewport

viewport ناحیه قابل مشاهده کاربر در یک صفحه وب است . با دستگاه متفاوت است - در یک گوشی همراه از یک صفحه نمایش کامپیوتر کوچکتر خواهد بود .

شما باید عنصر <meta> زیر را در همه صفحات وب خود بگنجانید :

<meta name="viewport" content="width=device-width, initial-scale=1.0">

این دستور دستورالعمل هایی را در مورد نحوه کنترل ابعاد صفحه و مقیاس بندی به مرورگر میدهد .

بخش width=device-width پهنای صفحه را تنظیم میکند تا از پهنای صفحه نمایش دستگاه (که بسته به دستگاه متفاوت خواهد بود) پیروی کند .

بخش initial-scale=1.0 سطح بزرگنمایی اولیه را هنگامیکه اولین بار صفحه توسط مرورگر بارگذاری میشود تنظیم میکند .

اینجا یک مثال از یک صفحه وب بدون تگ متا viewport و همان صفحه با تگ متا viewport آمده است :

نکته: اگر شما این صفحه را با گوشی یا تبلت باز کنید ، میتوانید روی دو لینک زیر کلیک کنید و تفاوت را ببینید .



عنصر <script>

عنصر <script> برای مشخص کردن جاوا اسکریپت های سمت مشتری مورد استفاده قرار میگیرد .

جاوا اسکریپت زیر متن "سلام جاوا اسکریپت" را داخل یک عنصر HTML با id="demo" مینویسد :

مثال

<script>
function myFunction {
  document.getElementById("demo").innerHTML = "سلام جاوا اسکریپت";
}
</script>
امتحان کن »

عنصر <base>

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

تگ <base> باید یکی از دو صفت href یا target یا هر دو را داشته باشد .

فقط یک تک عنصر <base> در یک سند میتواند وجود داشته باشد!

مثال

یک URL پیشفرض و یک target پیشفرض برای همه لینک ها در یک صفحه مشخص کنید :

<head>
<base href="https://www.w3schools.com/" target="_blank">
</head>


<body>
<img src="images/stickman.gif" width="24" height="39" alt="Stickman">
</body>
امتحان کن »

چکیده فصل


عناصر head در HTML

تگ توضیح
<head> اطلاعات مربوط به سند را مشخص میکند
<title> عنوان یک سند را مشخص میکند
<base> یک آدرس پیشفرض یا یک هدف پیشفرض برای همه لینک های یک صفحه مشخص میکند
<link> رابطه بین یک سند و یک منبع خارجی مشخص میکند
<meta> متا داده های مربوط به یک سند را مشخص میکند
<script> یک اسکریپت سمت مشتری مشخص میکند
<style> اطلاعات سبک برای یک سند مشخص میکند