تک دیک

واژه نامه و مجله آموزشی کامپیوتر و فناوری

المان در اچ تی ام ال HTML
اچ‌تی‌ام‌ال 

المان <head> و بخش head در HTML

به روز شده در امیرحسین شهسواری 0 دیدگاه ،،،،،،،،،،،،،،،،،،،،،،،،،،

المان <head> در HTML یکی از دو فرزند مستقیم المان <html> به شمار می‌رود. محتویات این المان (که بخش head را تشکیل می‌دهد) برخلاف برادر خود یعنی المان <body> داخل صفحه وب نمایش داده نمی‌شود. در واقع این المان شامل اطلاعاتی پیرامون سند است. عنوان صفحه، توصیف صفحه (که در نتایج موتورهای جستجو نمایش داده می‌شود) و انواع متادیتاهای دیگر، استایل های CSS و اسکریپت های JavaScript داخلی و خارجی از جمله مواردی هستند که در این بخش مشخص می‌شود.

به عنوان یک نمونه ساده سند HTML زیر را در نظر بگیرید:

<!DOCTYPE html>
<html>
  <head>
    <title>Simple page</title>
    <meta charset="utf-8">
  </head>
  <body>
    <p>This is a simple paragraph.</p>
  </body>
</html>

همانطور که می‌بینید در این سند، المان <head> به صورت زیر است:

<head>
  <title>Simple page</title>
  <meta charset="utf-8">
</head>

در این مثال ساده تنها دو المان داخل المان <head> قرار گرفته است. با این حال معمولا المان های دیگری هم میان تگ‌های <head> و </head> قرار می‌گیرند. در ادامه به بررسی تعدادی از مهم‌ترین این المان‌ها می‌پردازیم.

عنوان صفحه و المان <title> در بخش head

از المان <title> برای تعیین عنوان صفحه استفاده می‌شود. معمولا این عنوان را می‌توانید روی زبانه یا نوار عنوان مرورگر مشاهده کنید. فراموش نکنید این عنوان با عنوان محتواهای موجود در صفحه (یا هدینگ ها) تفاوت دارد.

<title>Simple page</title>

در مثال فوق Simple page عنوان صفحه خواهد بود.

بیشتر بخوانید: آشنایی با جزئیات عنوان سند و تأثیر آن روی سئو

فراداده ها و المان های <meta>

در HTML برای اضافه کردن متادیتا یا فراداده به سند از المان های <meta> در بخش head استفاده می‌شود. این المان ها از جمله المان‌های خالی اچ‌تی‌ام‌ال هستند. به این معنا که تنها شامل تگ شروع هستند و در آن‌ها خبری از تگ پایان یا محتوای داخلی نیست. در مثال قبل نمونه‌ای از این نوع المان را به صورت زیر مشاهده می‌کنید.

<meta charset="utf-8">

این المان مجموعه کاراکتر یا نویسه (Character set) سند را به UTF-8 تنظیم می‌کند. این مجموعه از کاراکترهای موجود در بسیاری از زبان‌های بشری پشتیبانی می‌کند و درنتیجه امکان نمایش نوشته‌هایی به زبان‌های مختلف را در صفحه وب فراهم می‌کند.

بسیاری از المان های <meta> از دو خصوصیت name و content برای تعیین نوع فراداده و محتوای آن استفاده می‌کنند. اضافه کردن توصیف (یا Description) به صفحه یکی دیگر از کاربردهای رایج تگ ها و المان های متاست که در آن از همین دو خصوصیت استفاده می‌شود. در مثال زیر نمونه‌ای از این المان <meta> را مشاهده می‌کنید.

<meta name="description" content="This is a simple test page.">

افزودن توصیف مناسب به صفحه یکی از موارد مفید در بهینه سازی موتورهای جستجوست. این توصیف معمولا در صفحه نتایج موتورهای جستجو نیز نمایش داده می‌شود و توصیه می‌شود شامل کلمه های کلیدی اصلی و مرتبط با صفحه باشد.

بخش توصیف یا Description برای یک نتیجه در موتور جستجوی گوگل
نمایی از بخش توصیف یا Description برای یک نتیجه در موتور جستجوی گوگل.

تنوع و کاربردهای المان‌های <meta> صرفا به این دو مورد محدود نمی‌شود. از این نوع المان‌ها برای موارد دیگری مانند تعیین نویسنده، ویوپورت صفحه و … نیز استفاده می‌شود.

اضافه کردن CSS و JavaScript

در اغلب وبسایت‌های امروزی از CSS برای تعیین ظاهر صفحات و از JavaScript برای تعیین رفتار و تعاملی کردن صفحه استفاده می‌شود. یکی از روش‌های رایج برای افزودن یا اعمال این موارد به صفحه، ارجاع دادن به فایل های استایل‌شیت CSS و کدهای JavaScript است. از آنجایی که این فایل‌ها از فایل HTML مستقل هستند با عنوان CSS و JavaScript خارجی شناخته می‌شوند.

برای افزودن CSS خارجی از المان <link> مشابه با نمونه زیر در بخش <head> استفاده می‌شود. در این حالت مقدار خصوصیت href مسیر فایل CSS موردنظر را مشخص می‌کند و rel=”stylesheet” هم اعلام می‌کند فایل مقصد مربوط به یک استایل‌شیت است.

<link rel="stylesheet" href="style.css">

برای افزودن JavaScript خارجی نیز از المان <script> مشابه با نمونه زیر استفاده می‌شود. در این المان خصوصیت src مسیر فایل JavaScript موردنظر را مشخص می‌کند. این المان را هم می‌توانید در بخش <head> یا <body> سند قرار دهید.

<script src="script.js"></script>

شما می‌توانید به جای ارجاع به استایل‌شیت خارجی، نحوه نمایش المان ها و ظاهر آن‌ها را مشابه نمونه زیر داخل تگ های <style> و </style> در بخش head مشخص کنید.

<style>
  body {
    background-color: royalblue;
  }
  h1 {
    color: white;
    text-align: center;
  }
</style>

همچنین می‌توانید به جای ارجاع به جاوااسکریپت خارجی، کدهای جاوااسکریپت خود را مشابه نمونه زیر مابین تگ های <script> و </script> قرار دهید.

<script>
  document.getElementById("page").innerHTML = "my content";
</script>

بیشتر بخوانید: آشنایی با روش های اضافه کردن CSS به HTML

بیشتر بخوانید: آشنایی با روش های اضافه کردن کد JavaScript به صفحات HTML

افزودن فاوآیکن داخل المان head

یکی دیگر از کاربردهای مهم المان <link> در بخش head به افزودن فاوآیکن (Favicon) مربوط می‌شود. برای این منظور می‌توانید از المان <link> مشابه با نمونه زیر استفاده کنید. مقدار خصوصیت href در این حالت مسیر فایل فاوآیکن را مشخص می‌کند.

<link rel="icon" type="image/x-icon" href="favicon.ico">

بیشتر بخوانید: آشنایی با جزئیات درج فاوآیکن در HTML

بازگشت به فهرست مجموعه آموزشی HTML

امیرحسین شهسواری

عاشق دنیای رایانه و فناوری به خصوص برنامه نویسی هستم؛ یادگرفتن و البته یاد دادن چیزای جالبی که یاد گرفتم باعث خوشحالیم میشه و از اولویت‌های اصلی زندگیم به حساب میاد. از مدیریت و نوشتن در تک دیک هم واقعا لذت می‌برم :)

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *