تگ head در HTML + فیلم آموزشی

01 اسفند 1401

فرشاد نمازی زاده

html

295 بازدید

تگ head در html یکی از تگ های حیاتی و مهم می باشد که قبل از نوشتن بدنه باید نوشته شود. درون تگ هد یکسری از تگ ها مانند تایتل، متاداده و … قرار می گیرد که ماهیت صفحه را برای موتورهای جستجو مشخص می کند. تگ head در html در ظاهر صفحه نمایش داده نمی شود ولی مغز هر صفحه است و ماهیت آن را تعیین می کند. برای آشنایی با این تگ ادامه مطلب را مطالعه نمایید.

⭐ (پیشنهاد می کنم برای یادگیری بهتر، ابتدا ویدیو بالا که قسمتی از دوره رایگان آموزش HTML CSS به زبان ساده است را ببینید سپس ادامه متن را مطالعه نمایید.)⭐

تگ head چیست؟

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

<!doctype html>
<html>

<head> هد سایت </head>

<body> بدنه صفحه </body>

</html>

المانهایی که داخل تگ هد قرار می دهیم عبارتند از:

<title>
<style>
<base>
<link>
<meta>
<script>
<noscript>

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

کاربرد تگ head در html

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

<!doctype html>
<html>

<head>
<meta charset="UTF-8">
<meta name="viewport">
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>websoft3</title>
<link rel="stylesheet" href="style.css">
</head>

<body>

</body>

</html>

تگ های مهم در قسمت هد

تگ <meta>: متا می تواند مقدارهای متفاوتی بگیرد. برخی از این مقدارها عبارتند از:

<meta charset=”UTF-8″>: برای نمایش صحیح حروف فارسی از مقدار UTF-8 استفاده می کنیم. در غیر اینصورت حرف فارسی به هم می ریزد.
<meta name=”viewport”>: این مقدار هم بسیار مهم است و برای رسپانسیو کردن صفحه به کار می رود. یعنی اینکه صفحه ما در موبایل، تبلت و … نیز به درستی نمایش داده شود.
<meta name=”robots” content=” index , follow “>: این تگ به موتورهای جستجو اجازه ایندکس صفحه را می دهد یا می گوید که آن را ایندکس نکن. همچنین اجازه دنبال کردن صفحه را به موتوهای جستجو می دهد.

تگ <title>: تگ تایتل همانطور که از نام آن مشخص است عنوان صفحه را برای موتورهای جستجو مشخص می کند. همچنین این عنوان در مرورگر کاربر نیز نمایش داده می شود. برای آشنایی بیشتر مقاله تگ title در html و ویدیو آن را مشاهده کنید.

تگ <link>: این تگ یک منبع خارجی مانند css را به صفحه متصل کرده و ساختار آن را در صفحه پیاده می کند. برای آشنایی بیشتر مقاله تگ لینک در html و ویدیو آن را مشاهده کنید.

تگ<style>: همانطور که گفتیم با تگ link می توانیم ساختاری را که در فایل css نوشته ایم در صفحه پیاده کنیم. ولی اگر قصد داشته باشیم که استایل ها را در همان صفحه بنویسیم و فایل دیگری را فراخوانی نکنیم می توانیم از تگ باز و بسته <style> در هد استفاده کنیم و استایل ها را در بین آن بنویسیم.

جمع بندی

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

منبع: https://www.w3schools.com/tags/tag_head.asp