تگ head در html چیست؟ 📰 معرفی متا تگ های مهم در تگ هد

شغل:طراحی وب

درآمد:۱۳۰ هزار دلار سالانه

مکان:هر کشوری دوست داری

مسیر: ۷ دوره آموزشی

منتور ۲ :جلسه آنلاین با استاد

منتور ۱ : کافه گپ و گفت

بزن بریم

در مطلب قبل درباره تگ Doctype در html صحبت کردیم. در این مطلب از آموزش html و css می خواهیم به طور جامع به تگ head در html بپردازیم. همانطور که می دانید تگ 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

عنصر head در یک سند HTML بعد از تگ HTML و قبل از تگ body قرار می گیرد. این تگ با کمک دو تگ باز و بسته <head></head> بین دو تگ اصلی <html> و <html/> می‌ گیرد. به این عمل, یعنی قرار دادن یک تگ در دل تگ دیگر، nest می‌ گویند. تگ head در html در بردارنده عناصر مهم برای ربات های گوکل و کد های مربوط به CSS است.

دوره پیشنهادی : یادگیری آموزش grid در css

ساختار تگ head در html

ساختار و نحوه کدنویسی تگ head به صورت زیر می باشد:

<!doctype html>
<html>
<head>
Document head related tags
</head>
<body>
Document body related tags
</body>
</html>

تگ های پراستفاده در قسمت تگ head در html

تگ ها و زیر تگ هایی که بین تگ هد قرار می گیرند شامل موارد زیر می باشد:

توضیحات	نام تگ
برای مشخص کردن عنوان یک صفحه وب بوده، و برای ربات های جتسجوگر بسیار مهم است.	Title
برای اضافه کردن یکسری اطلاعات اضافی در مورد یک صفحه وب بوده و برای مرورگرها و موتورهای جستجوگر مهم است.	Meta
برای اضافه کردن دستورات جاوا اسکریپت به صفحه وب استفاده می شود.	Script
برای اضافه کردن دستورات css خطی به یک صفحه وب کاربرد دارد.	Style
برای فراخوانی فایل های خارجی مثل css در یک صفحه وب به کار می رود.	Link
برای مشخص کردن یک لینک پایه برای تمامی لینک های موجود در یک صفحه وب به کار می رود.	Base

نحوه استفاده از تگ <title> در HTML

یکی از موارد ضروری و مهم برای صفحات وب، قرار دادن عنوان یا همان 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></script>
</body>
</html>

نحوه استفاده از تگ <meta> در 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”

نحوه استفاده از تگ <script> در HTML

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

در مثال زیر از تگ <script> در بخش <body> برای ایجاد دستورات JavaScript درون صفحه وب استفاده شده است.

<!DOCTYPE html>
<html>
<head>    
<title>script tag</title>       
</head>    
<body>    
<h1 id="belearn">belearn</h1>        
<script>        
document.getElementById("belearn").innerHTML = "Hello belearn.ir!";         
</script>        
</body>

در مثال زیر از تگ <script> در تگ head در html برای ایجاد دستورات JavaScript درون صفحه وب استفاده شده است.

<!DOCTYPE html>
<html>
<head>
<title>script tag</title>
<script>
";document.getElementById("belearn").innerHTML = "Hello belearn.ir!
</script>
</head>
<body>
<h1 id="belearn">belearn</h1>
</body>
</html>

نحوه استفاده از تگ <style> در HTML

همان‌ طور که در آموزش html5 و css3 یاد گرفتید، بعد از ایجاد صفحات وب برای رنگ و لعاب دادن به آن‌ ها یا به عبارتی اختصاصی کردن صفحات وب باید از دستورات CSS استفاده کنیم. این دستورات در تگ <style> در تگ head در html قرار می‌ گیرند.

استفاده از کدهای CSS در تگ استایل به عنوان روش جاسازی درون سندی یا Embed Syles معروف است. البته در کد نویسی CSS دو روش دیگر به نام های روش درون خطی یا Inline و همچنین برون سندی یا External وجود دارند. اما پیشنهاد می کنیم هیچ وقت از این نوع css نویسی استفاده نکنید. چرا که استفاده از تگ link و سی اس اس دهی خارجی بسیار استاندارد تر است.

در صفحات وب از دستورات CSS به 2 صورت می‌ توان استفاده کرد:

درون همان کد HTML در قسمت <head> با استفاده از تگ <style> می‌ توان دستورات را اضافه نمود.
فایل جداگانه در Notepad با پسوند css. ایجاد نموده و دستورات را در آن ذخیره نمایید. سپس در کد HTML با دستور <link> که در ادامه توضیح می‌ دهیم، دستورات CSS را اضافه نمایید.

نحوه استفاده از تگ <link> در HTML

هنگامی که دستورات HTML را می‌ نویسید، برای ارتباط برقرار کردن بین یک فایل جداگانه و صفحه دیگر، از تگ <link> استفاده می‌ کنید .با استفاده از تگ link شما می توانید به راحتی فایل سی اس اس خارجی یا External خود را که به صورت مجزا ایجاد شده است را فراخوانی یا اصطلاحا به صفحه وب خود متصل کنید. در کد زیر شیوه استفاده از این عنصر را در تگ head در html را مشاهده می کنید:

<“link rel=”stylesheet” type=”text/css” href=”layout.css>

نحوه استفاده از تگ <base> در HTML

تگ 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></script></body>
</body>
</html>

برای استفاده از این تگ به ۳ نکته زیر توجه کنید:

تگ <base> را به عنوان اولین عنصر در داخل عنصر <head> قرار دهید.
اگر تگ base وجود داشته باشد، باید دارای یک خاصیت href یا یک خاصیت target، یا هر دو باشد.
در یک سند حداکثر از یک تگ base استفاده می شود.

دوره پیشنهادی : یادگیری آموزش flexbox در css

کدام مرورگر ها از تگ head در html پشتیبانی می کنند؟

جدول صفات تگ head در html

تگ head تنها از صفات عمومی در HTML پشتیبانی می کند و صفت مخصوص به خود را ندارد.

عدم استفاده از تگ head در html5

در html5 این امکان فراهم شده که شما از تگ head در html استفاده نکنید و به هیچ وجه استفاده آن پیشنهاد نمی شود.

دستورات CSS مخصوص تگ head

معمولا مرورگرها تگ head را به صورت پیش فرض با دستورات CSS زیر نمایش می دهند:

head
{
display: none;
}
</html>

سخن پایانی

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

برای دریافت پاسخ سوالات خود و بهره مند شدن از تجربه اساتید خبره و دیگر دوستانتان در کمپین آموزشی بی لرن می توانید سوالات خود را در کافه گپ و گفت مطرح نمایید و در سریعترین زمان، پاسخ سوال خود را دریافت نمایید. همچنین می توانید با عضویت در کمپین آموزشی بی لرن، از دوره های آموزشی رایگان و کاربردی در زمینه های مختلف به صورت تخصصی و حرفه ای بهره مند شوید.

اگر از مطالعه این مطلب لذت بردید، می توانید آن را در شبکه های اجتماعی خود به اشتراک بگذارید تا دوستان شما نیز از آن بهره ببرند.