HTML – The Head Element
عنصر <head> در HTML بخشی مهم از یک سند HTML است. این عنصر شامل اطلاعات متا درباره سند است که به طور مستقیم در صفحه وب نمایش داده نمی‌شود. این اطلاعات می‌تواند شامل عنوان سند، لینک‌های به stylesheetها، اسکریپت‌ها و سایر متادیتا باشد.
▎ساختار عنصر <head>
در اینجا یک ساختار پایه از یک سند HTML که شامل عنصر <head> است، ارائه شده است:
<!DOCTYPE html>
<html lang=“fa”>
<head>
<meta charset=“UTF-8”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
<title>عنوان سند</title>
<link rel=“stylesheet” href=“styles.css”>
<script src=“script.js” defer></script>
<meta name=“description” content=“توضیحی کوتاه درباره وب‌سایت.”>
<meta name=“keywords” content=“HTML, CSS, JavaScript”>
<meta name=“author” content=“نام شما”>
</head>
<body>
<h1>سلام، دنیا!</h1>
</body>
</html>
▎عناصر رایج درون <head>
1. <title>: عنوان سند را مشخص می‌کند که در تب مرورگر نمایش داده می‌شود و توسط موتورهای جستجو استفاده می‌شود.
<title>عنوان صفحه شما</title>
2. <meta>: اطلاعات متا درباره سند HTML را فراهم می‌کند. ویژگی‌های رایج شامل:
• charset: کدگذاری کاراکتر برای سند HTML را مشخص می‌کند.
• name: نام متا دیتا را مشخص می‌کند (مانند “description”، “keywords”، “author”).
• content: مقدار متا دیتا را ارائه می‌دهد.
• viewport: نحوه نمایش صفحه را در مرورگرهای موبایل کنترل می‌کند.
<meta charset=“UTF-8”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
3. <link>: برای لینک کردن منابع خارجی مانند stylesheetها استفاده می‌شود.
<link rel=”stylesheet” href=”styles.css”>
4. <script>: برای گنجاندن فایل‌های JavaScript یا اسکریپت‌های داخلی استفاده می‌شود. ویژگی defer می‌تواند برای بارگذاری اسکریپت‌ها پس از تجزیه HTML استفاده شود.
<script src=“script.js” defer></script>
5. فیوآیکون: همچنین می‌توانید با استفاده از یک تگ <link> به یک فیوآیکون (آیکون کوچک نمایش داده شده در تب‌های مرورگر) لینک کنید.
<link rel=“icon” href=“favicon.ico” type=“image/x-icon”>
▎اهمیت عنصر <head>
• SEO: عناصری مانند <title>، <meta name=”description”> و <meta name=”keywords”> به موتورهای جستجو کمک می‌کنند تا محتوای صفحه شما را درک کنند.
• عملکرد: لینک کردن صحیح CSS و JavaScript می‌تواند زمان بارگذاری صفحه و عملکرد آن را بهبود بخشد.
• دسترس‌پذیری: متادیتای مناسب می‌تواند به فناوری‌های کمکی کمک کند تا محتوای وب شما را به طور مؤثرتر تفسیر کنند.
▎نتیجه‌گیری
عنصر <head> برای تعریف نحوه تعامل صفحه وب شما با مرورگرها و موتورهای جستجو و همچنین برای لینک کردن منابع خارجی ضروری است. درک ساختار و هدف آن برای توسعه وب مؤثر بسیار مهم است.
دیدگاهتان را بنویسید