عنصر HTML-Head
عنصر <head> در HTML یک نگهدارنده (container) برای عناصر زیر است: <title>، <style>، <meta>، <link>، <script> و <base>.
عنصر <head> در HTML
عنصر <head> یک نگهدارنده برای فراداده (metadata) است (یعنی داده‌هایی درباره داده‌ها) و بین تگ <html> و تگ <body> قرار می‌گیرد.
فرادادهٔ HTML، داده‌هایی درباره خودِ سند HTML است. فراداده روی صفحه نمایش داده نمی‌شود.
فراداده معمولاً عنوان سند، مجموعه کاراکترها (character set)، استایل‌ها، اسکریپت‌ها و دیگر اطلاعات مِتا (meta information) را تعریف می‌کند.
عنصر <title> در HTML
عنصر <title> عنوان سند را تعریف می‌کند. عنوان باید فقط از نوع متن (text-only) باشد و در نوار عنوان مرورگر یا در تب صفحه نمایش داده می‌شود.
عنصر <title> در اسناد HTML الزامی است!
محتوای عنوان صفحه برای بهینه‌سازی موتور جستجو (SEO) بسیار مهم است! عنوان صفحه توسط الگوریتم‌های موتور جستجو استفاده می‌شود تا ترتیب نمایش صفحات در نتایج جستجو را مشخص کنند.
عنصر <title>:
-
عنوانی را در نوار ابزار مرورگر تعریف می‌کند.
-
عنوانی برای صفحه فراهم می‌کند تا وقتی به علاقه‌مندی‌ها (favorites) اضافه می‌شود، نمایش داده شود.
-
عنوانی برای صفحه در نتایج موتورهای جستجو نمایش می‌دهد.
بنابراین، سعی کنید عنوان را تا حد امکان دقیق و معنادار بسازید!
یک سند سادهٔ HTML:
مثال
<!DOCTYPE html>
<html>
<head>
<title>A Meaningful Page Title</title>
</head>
<body>
The content of the document......
</body>
</html>عنصر <style> در HTML
از عنصر <style> برای تعریف اطلاعات استایل‌دهی برای یک صفحهٔ HTML واحد استفاده می‌شود:
مثال
<style>
body {
background-color: powderblue;
}
h1 {
color: red;
}
p {
color: blue;
}
</style>عنصر <link> در HTML
عنصر <link> رابطهٔ بین سند فعلی و یک منبع خارجی را تعریف می‌کند.
تگ <link> اغلب برای پیوند دادن به شیوه‌نامه‌های خارجی (external style sheets) استفاده می‌شود:
مثال
<link rel="stylesheet" href="mystyle.css">
عنصر <meta> در HTML
عنصر <meta> معمولاً برای مشخص کردن مجموعه کاراکترها، توضیحات صفحه، کلمات کلیدی، نویسنده سند و تنظیمات ویوپورت (viewport) استفاده می‌شود.
فراداده روی صفحه نمایش داده نخواهد شد، اما توسط مرورگرها (برای نحوه نمایش محتوا یا بارگذاری مجدد صفحه)، موتورهای جستجو (برای کلمات کلیدی) و دیگر سرویس‌های وب استفاده می‌شود.
مثال‌ها
تعریف مجموعه کاراکترهای استفاده شده:
<meta charset="UTF-8">تعریف کلمات کلیدی برای موتورهای جستجو:
<meta name="keywords" content="HTML, CSS, JavaScript">
تعریف توضیحاتی برای صفحه وب شما:
<meta name="description" content="Free Web tutorials">
تعریف نویسنده یک صفحه:
<meta name="author" content="John Doe">
بارگذاری مجدد سند هر ۳۰ ثانیه:
<meta http-equiv="refresh" content="30">
تنظیم ویوپورت برای اینکه وب‌سایت شما روی همه دستگاه‌ها خوب به نظر برسد:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
مثالی از تگ‌های <meta>:
مثال
<meta charset="UTF-8" />
<meta name="description" content="Free Web tutorials" />
<meta name="keywords" content="HTML, CSS, JavaScript" />
<meta name="author" content="John Doe" />تنظیم ویوپورت (The Viewport)
ویوپورت، ناحیه قابل مشاهده یک صفحه وب برای کاربر است. این ناحیه بسته به دستگاه تغییر می‌کند؛ روی یک تلفن همراه کوچک‌تر از صفحه نمایش کامپیوتر خواهد بود.
شما باید عنصر <meta> زیر را در تمام صفحات وب خود قرار دهید:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
این دستورالعمل‌هایی به مرورگر می‌دهد که چگونه ابعاد و مقیاس‌بندی صفحه را کنترل کند.
بخش width=device-width عرض صفحه را طوری تنظیم می‌کند که از عرض صفحهٔ دستگاه پیروی کند (که بسته به دستگاه متفاوت خواهد بود).
بخش initial-scale=1.0 سطح بزرگنمایی اولیه (initial zoom level) را هنگام بارگذاری اولیه صفحه توسط مرورگر تنظیم می‌کند.
عنصر <script> در HTML
عنصر <script> برای تعریف کدهای جاوا اسکریپت سمت کاربر (client-side JavaScripts) استفاده می‌شود.
کد جاوا اسکریپت زیر، عبارت "Hello JavaScript!" را در یک عنصر HTML با id="demo" می‌نویسد:
مثال
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Hello JavaScript!";
}
</script>عنصر <base> در HTML
عنصر <base> نشانی اینترنتی پایه (base URL) و/یا هدف (target) را برای تمام URLهای نسبی (relative URLs) در یک صفحه مشخص می‌کند.
تگ <base> باید حتماً یکی از صفات href یا target یا هر دو را داشته باشد.
در یک سند فقط یک عنصر <base> می‌تواند وجود داشته باشد!
مثال
یک URL پیش‌فرض و یک هدف پیش‌فرض برای تمام لینک‌های یک صفحه مشخص کنید:
<head>
<base href="https://www.w3schools.com/" target="_blank">
</head>
<body>
<img src="images/stickman.gif" width="24" height="39" alt="Stickman">
<a href="tags/tag_base.asp">HTML base Tag</a>
</body>خلاصه فصل
-
عنصر
<head>یک نگهدارنده برای فراداده (داده‌هایی درباره داده‌ها) است. -
عنصر
<head>بین تگ<html>و تگ<body>قرار می‌گیرد. -
عنصر
<title>الزامی است و عنوان سند را تعریف می‌کند. -
عنصر
<style>برای تعریف اطلاعات استایل‌دهی برای یک سند واحد استفاده می‌شود. -
تگ
<link>اغلب برای پیوند دادن به شیوه‌نامه‌های خارجی استفاده می‌شود. -
عنصر
<meta>معمولاً برای مشخص کردن مجموعه کاراکترها، توضیحات صفحه، کلمات کلیدی، نویسنده سند و تنظیمات ویوپورت استفاده می‌شود. -
عنصر
<script>برای تعریف کدهای جاوا اسکریپت سمت کاربر استفاده می‌شود. -
عنصر
<base>نشانی اینترنتی پایه و/یا هدف را برای تمام URLهای نسبی در یک صفحه مشخص می‌کند.
عناصر head در HTML