در مطلب قبل درباره تگ Doctype در html صحبت کردیم. در این مطلب از آموزش html و css می خواهیم به طور جامع به تگ head در html بپردازیم. همانطور که می دانید تگ head در html، از تگ های کلیدی و بسیار مهم است که در تمام صفحات وب وجود دارد. این تگ همانند یک ظرف برای نگهداری برخی از تگ های مهم و پرکاربرد دیگر مورد استفاده قرار می گیرد. بنابراین لازم است که به طور کامل با این تگ آشنا شوید. تا انتهای مطلب با ما همراه باشید.
تگ head یکی از مهمترین تگ های html و اساسی ترین بخش یک صفحه وب می باشد. تگ head در html را می توان به مغز یک صفحه وب تشبیه کرد، چرا که در این قسمت یکسری اطلاعات مربوط به مرورگرها و موتورهای جستجوگر (برای بحث سئو) قرار می گیرد. تگ head در بالای کدهای html سایت و بعد از بخش اول تگ <html> و قبل از تگ body قرار می گیرد.
عنصر head محفظه ای برای metadata ها است یعنی درون تگ head تگ های دیگری قرار می گیرند که جهت ایجاد توضیحات متادیتا (metadata)، اسکریپت ها (script)، استایل ها (style) و لینک (link) به برخی از فایل های خروجی استفاده می شوند. اطلاعاتی که در تگ head قرار می گیرند، در خروجی نمایش داده نمی شوند. شما اگر بخواهید اطلاعاتی را در خروجی یا مرورگر نمایش دهید باید آن ها را در تگ <body> قرار دهید.
نکته جالب اینجاست که در HTML4.01 استفاده و وجود تگ head در html در یک صفحه وب ضروری است، ولی در HTML5 این امکان وجود دارد که می توانید از این تگ در یک صفحه وب استفاده نکنید.
عنصر head در یک سند HTML بعد از تگ HTML و قبل از تگ body قرار می گیرد. این تگ با کمک دو تگ باز و بسته <head></head> بین دو تگ اصلی <html> و <html/> می گیرد. به این عمل, یعنی قرار دادن یک تگ در دل تگ دیگر، nest می گویند. تگ head در html در بردارنده عناصر مهم برای ربات های گوکل و کد های مربوط به CSS است.
دوره پیشنهادی : یادگیری آموزش grid در css
ساختار و نحوه کدنویسی تگ head به صورت زیر می باشد:
<!doctype html>
<html>
<head>
Document head related tags
</head>
<body>
Document body related tags
</body>
</html>
تگ ها و زیر تگ هایی که بین تگ هد قرار می گیرند شامل موارد زیر می باشد:
توضیحاتنام تگ برای مشخص کردن عنوان یک صفحه وب بوده، و برای ربات های جتسجوگر بسیار مهم است.Title برای اضافه کردن یکسری اطلاعات اضافی در مورد یک صفحه وب بوده و برای مرورگرها و موتورهای جستجوگر مهم است.Meta برای اضافه کردن دستورات جاوا اسکریپت به صفحه وب استفاده می شود. Scriptبرای اضافه کردن دستورات css خطی به یک صفحه وب کاربرد دارد. Style برای فراخوانی فایل های خارجی مثل css در یک صفحه وب به کار می رود. Link برای مشخص کردن یک لینک پایه برای تمامی لینک های موجود در یک صفحه وب به کار می رود.Base
یکی از موارد ضروری و مهم برای صفحات وب، قرار دادن عنوان یا همان title برای آن‌هاست. این عنوان در تگ <title> و در درون تگ head در html قرار می گیرد. مشخص کردن عنوان سند HTML ضروری و الزامی است. این موضوع برای زمانی مهم می شود که شما بخواهید در یک سایت چندین صفحه را باز کنید و بعد آن ها را مطالعه کنید.
حال برای اینکه به یک صفحه خاص مراجعه کنید باید تمامی تب را بررسی کنید تا صفحه مورد نظر خود را پیدا کنید اما در صورتی که در هر صفحه، از تگ title استفاده کنید از عنوان هر صفحه که در تب ها مشخص شده است، موضوع هر صفحه را متوجه خواهید شد. عنوان صفحات وب در تب مرورگرها به صورت زیر نشان داده می شود:
همچنین تگ title برای موتورهای جستجو نیز بسیار مهم هستند. محتوای عنوان صفحه برای بهینه سازی موتورهای جستجو (سئو) بسیار حائز اهمیت است. عنوان صفحه توسط الگوریتم های موتور جستجو برای تعیین ترتیب هنگام فهرست بندی صفحات در نتایج جستجو استفاده می شود. تگ عنوان ممکن است شما را با تگ‌های Heading> h> یا تیترها به اشتباه بیندازد. اما این دو با یکدیگر متفاوت هستند.
تگ های Heading در واقع عنوانی را برای محتوا و متن های موجود در صفحه در تگ <body> مشخص می کنند در حالی که تگ title، برای صفحه وب در تب مرورگر عنوانی را مشخص می کند و در تگ head در html قرار دارد. در مثال زیر می توانید نحوه استفاده از تگ تایتل را برای یک صفحه وب، مشاهده کنید:
<!DOCTYPE html>
<html>
<head>
<title>اینجا عنوان تایتل شما قرار می گیرد.</title>
</head>
<body>
<p>www.belearn.ir</p>
<script src="https://belearn.ir/wp-content/cache/min/1/d617d73899701154e88414869b450261.js" data-minify="1" defer>
</body>
</html>
تگ <meta> عموما برای تعیین Character set، مشخص کردن نویسنده سند (author)، کلمات کلیدی (keywords)، آخرین تغییرات، توضیحاتی در مورد صفحه (page discription)، و تنظیمات viewport و دیگر داده های Meta استفاده می شوند. این تگ دارای یک سری صفت (attribute) است که هر کدام کاری خاص را انجام می دهند.
Metadata ها در صفحه نمایش داده نمی شوند اما داده های meta (متا دیتا) توسط مرورگر ها (جهت نحوه نمایش محتویات یا بار گذاری مجدد صفحه)، موتور های جستجو (جهت تعیین کلمات کلیدی) و دیگر سرویس های وب استفاده می شود. اما توسط مرورگرها (نحوه نمایش محتوا و یا بارگذاری مجدد صفحه)، موتورهای جستجو (کلمات کلیدی) و سایر خدمات وب استفاده می شوند.
این عنصر از تگ head در html نیز مانند تگ title یک تگ تاثیرگذار و مهم در سئو و رتبه گیری صفحات وب است. متا تگ ها انواع مختلفی دارند به طوری که حدود سی متا تگ وجود دارد. متا تگ ها نقش پر رنگی در مسائل مربوط به سئو ایفا می کنند. چندین نمونه از پرکاربردترین و مهمترین متا تگ ها به شرح زیر است:
متای charset
اگر شما از فونت فارسی استفاده می کنید، برای جلوگیری از بهم ریختی هنگام نمایش در مرورگرهای می بایست از متای charset استفاده کنید. در واقع این صفت کار تعریف نوع کاراکترهای مورد استفاده در یک صفحه وب را مشخص می کند.
کدی که می بایست به تگ متای خود اضافه کنید کد روبرو است: meta charset=”UTF-8″
متای description
کار این صفت، ارائه یک توضیح کوتاه یا شرحی درباره صفحه وب برای موتورهای جستجوگر و مخاطبان است. این توضیحات توسط موتور های جستجوگر هنگام سرچ به مخاطبان نمایش داده می شوند.
کدی که می بایست به تگ متای خود اضافه کنید کد روبرو است: meta name=”description” content=”belearn the best”
متای keywords
شما به کمک این متا، کلمات کلیدی مربوط به یک صفحه وب را برای موتورهای جستجوگر تعریف می کنید. این متا هم از متا های مهم در سئو سایت است که می بایست در تگ head در html قرار گیرد.
کدی که می بایست به تگ متای خود اضافه کنید کد روبرو است: meta name=”keywords” content=”HTML, CSS, JavaScript, HTMLTags”
متای author
این صفت مشخص کننده نویسنده صفحه وب برای موتورهای جستجوگر است.
کدی که می بایست به تگ متای خود اضافه کنید کد روبرو است: meta name=”author” content=”negin miri”
متای robots
این متا برای ایندکش یا نوایندکس کردن صفحات استفاده می شود. این صفت به موتورهای جستجوگر (مثل گوگل یا بینگ) می فهماند که این صفحه باید ایندکس شود یا خیر.
کدی که می بایست به تگ متای خود اضافه کنید کد روبرو است: meta name=”robots” content=”noindex, follow”
تگ در تگ head در html برای ایجاد یا لود کردن دستورات زبان جاوا اسکریپت (JavaScript) سمت client به کار می رود. در واقع یعنی تگ یا حاوی دستورات JavaScript است یا به یک فایل خارجی که شامل دستورات JavaScript است، اشاره می کند. دستورات جاوا اسکریپت برای ایجاد تغییرات پویا و بهبود صفحات وب استفاده می شوند. تگ می‌تواند به طور مکرر در قسمت <body> یا <head> مورد استفاده قرار بگیرد.
در مثال زیر از تگ در بخش <body> برای ایجاد دستورات JavaScript درون صفحه وب استفاده شده است.
<!DOCTYPE html>
<html>
<head>
<title>script tag</title>
</head>
<body>
<h1 id="belearn">belearn</h1>
document.getElementById("belearn") = "Hello belearn.ir!";
</body>
در مثال زیر از تگ در تگ head در html برای ایجاد دستورات JavaScript درون صفحه وب استفاده شده است.
<!DOCTYPE html>
<html>
<head>
<title>script tag</title>
";document.getElementById("belearn") = "Hello belearn.ir!
</head>
<body>
<h1 id="belearn">belearn</h1>
</body>
</html>
همان طور که در آموزش html5 و css3 بی لرن یاد گرفتید، بعد از ایجاد صفحات وب برای رنگ و لعاب دادن به آن ها یا به عبارتی اختصاصی کردن صفحات وب باید از دستورات CSS استفاده کنیم. این دستورات در تگ <style> در تگ head در html قرار می گیرند.
استفاده از کدهای CSS در تگ استایل به عنوان روش جاسازی درون سندی یا Embed Syles معروف است. البته در کد نویسی CSS دو روش دیگر به نام های روش درون خطی یا Inline و همچنین برون سندی یا External وجود دارند. اما پیشنهاد می کنیم هیچ وقت از این نوع css نویسی استفاده نکنید. چرا که استفاده از تگ link و سی اس اس دهی خارجی بسیار استاندارد تر است.
در صفحات وب از دستورات CSS به ۲ صورت می توان استفاده کرد:
هنگامی که دستورات HTML را می نویسید، برای ارتباط برقرار کردن بین یک فایل جداگانه و صفحه دیگر، از تگ <link> استفاده می کنید .با استفاده از تگ link شما می توانید به راحتی فایل سی اس اس خارجی یا External خود را که به صورت مجزا ایجاد شده است را فراخوانی یا اصطلاحا به صفحه وب خود متصل کنید. در کد زیر شیوه استفاده از این عنصر را در تگ head در html را مشاهده می کنید:
<“link rel=”stylesheet” type=”text/css” href=”layout.css>
تگ base برای اتصال URL پایه (base URL) به همه URL های وابسته (relative URLs) در صفحه استفاده می شود. با استفاده از عنصر لینک در تگ head در html یک صفحه وب، می توان بیس یا پایه اصلی مقصد تمامی لینک های موجود در یک صفحه وب را مشخص کرد. عنصر base باید دارای یک ویژگی href و یا ویژگی target و یا هر دو باشد. به عنوان مثال اگر شما ۳ لینک زیر را داشته باشید:
www.belearn.ir/category
www.belearn.ir/category/html
www.belearn.ir/category/accounting-articles
مقصد، لینک یا url اصلی یعنی www.belearn.ir/category پایه و بیس اصلی مقصد دو لینک دیگر است. بنابراین می توانید از آن به عنوان لینک مقصد پایه به شکل زیر استفاده کنید.
<!DOCTYPE html>
<html>
<head>
<base href="https://www.belearn.ir/category" target="_blank">
</head>
<body>
<h3>Free Educational WebSite</h3>
<a href="html">آموزش اچ تی ام ال</a> <br><br>
<a href="accounting-articles">آموزش حسابداری</a>
<script src="https://www.belearn.ir/wp-content/cache/min/1/d617d73899701154e88414869b450261.js"data-minify="1" defer></body>
</body>
</html>
برای استفاده از این تگ به ۳ نکته زیر توجه کنید:
دوره پیشنهادی : یادگیری آموزش flexbox در css
تگ head تنها از صفات عمومی در HTML پشتیبانی می کند و صفت مخصوص به خود را ندارد.
در html5 این امکان فراهم شده که شما از تگ head در html استفاده نکنید و به هیچ وجه استفاده آن پیشنهاد نمی شود.
معمولا مرورگرها تگ head را به صورت پیش فرض با دستورات CSS زیر نمایش می دهند:
head
{
display: none;
}
</html>
در این مقاله به طور کامل در مورد تگ head در html، ساختار آن، متاتگ های آن صحبت کرده ایم. با مطالعه این مطلب شما تسلط کامل به مفاهیم تگ <head> دارید و به راحتی می توانید کدنویسی را شروع کنید.
برای دریافت پاسخ سوالات خود و بهره مند شدن از تجربه اساتید خبره و دیگر دوستانتان در کمپین آموزشی بی لرن می توانید سوالات خود را در کافه گپ و گفت مطرح نمایید و در سریعترین زمان، پاسخ سوال خود را دریافت نمایید. همچنین می توانید با عضویت در کمپین آموزشی بی لرن، از دوره های آموزشی رایگان و کاربردی در زمینه های مختلف به صورت تخصصی و حرفه ای بهره مند شوید.
اگر از مطالعه این مطلب لذت بردید، می توانید آن را در شبکه های اجتماعی خود به اشتراک بگذارید تا دوستان شما نیز از آن بهره ببرند.
