100% کامل شده تا

سرصفحه در اچ‌تی‌ام‌ال (HTML - The Head Element)

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
< HTML:Tutorial(تغییرمسیر از عنصر head در html)
پرش به ناوبری پرش به جستجو


عنصر <head> در HTML، یک ظرف برای همه عناصر سرصفحه (head) است: <title>، <style>، <meta>، <link>، <script> و <base>. [۱]


عنصر <head> در HTML

عنصر <head> یک ظرف (Container) برای فراداده است (داده‌هایی در مورد داده‌ها) و بین تگ <html> و تگ <body> قرار دارد.

فراداده HTML در مورد سند HTML است. فراداده نمایش داده نمی‌شود.

فراداده معمولاً عنوان سند، مجموعه کاراکتر، استایل‌ها، اسکریپت‌ها و سایر فرا اطلاعات را مشخص می‌کند.



عنصر <title> در HTML

عنصر <title> عنوان سند را مشخص می‌کند. عنوان باید فقط متنی باشد، و در نوار عنوان مرورگر یا در تب مرورگر نشان داده می‌شود.

عنصر <title> در اسناد HTML مورد نیاز است!

محتویات عنوان صفحه برای بهینه‌سازی موتورهای جستجو (SEO) بسیار مهم است! عنوان صفحه توسط الگوریتم‌های موتور جستجو برای تعیین ترتیب، هنگام فهرست بندی صفحات در نتایج جستجو استفاده می‌شود.

عنصر <title>:

  • عنوان را در تب مرورگر تعریف می‌کند
  • وقتی که صفحه به موارد دلخواه اضافه شود، یک عنوان برای صفحه فراهم می‌کند
  • در موتورهای جستجو برای صفحه یک عنوان نمایش می‌دهد

بنابراین، سعی کنید عنوان را تا حد ممکن دقیق و معنی دار کنید!

یک سند ساده HTML:

مثال

<!DOCTYPE html>
<html>
<head>
  <title>A Meaningful Page Title</title>
</head>
<body>

The content of the document......

</body>
</html>

Responsive demo.svg



عنصر <style> در HTML

عنصر <style> برای تعریف اطلاعات استایل برای یک صفحه HTML واحد به کار می‌رود:

مثال

<style>
  body {background-color: powderblue;}
  h1 {color: red;}
  p {color: blue;}
</style>

مثال

<!DOCTYPE html>
<html>
<head>
  <title>Page Title</title>
  <style>
    body {background-color: powderblue;}
    h1 {color: red;}
    p {color: blue;}
  </style>
</head>  
<body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
  
</body>
</html>
<!DOCTYPE html>
<html>
<head>
  <title>A Meaningful Page Title</title>
</head>
<body>

<p>The content of the body element is displayed in the browser window.</p>
<p>The content of the title element is displayed in the browser tab, in favorites and in search-engine results.</p>

</body>
</html>

Responsive demo.svg





عنصر <link> در HTML

عنصر <link> برای پیوند با برگه‌های استایل خارجی استفاده می‌شود:

عنصر <link> رابطه بین سند فعلی و یک منبع خارجی را تعریف می‌کند.

تگ <link> بیشتر برای پیوند دادن به برگه‌های استایل خارجی استفاده می‌شود:

مثال

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

مثال

<!DOCTYPE html>
<html>
<head>
  <title>Page Title</title>
  <link rel="stylesheet" href="mystyle.css">
</head>
<body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
  
</body>
</html>

Responsive demo.svg


نکته: در مورد CSS می‌توانید همه چیز را در آموزش CSS ما بیاموزید.


عنصر <meta> در HTML

عنصر <meta> برای تعیین اینکه کدام مجموعه کاراکتر استفاده شود، توصیف صفحه، کلمات کلیدی، نویسندهٔ سند و تنظیمات پورت نمایش (viewport) استفاده می‌شود.

فراداده در صفحه نمایش داده نمی‌شود، اما توسط مرورگرها (نحوه نمایش محتوا یا بارگذاری مجدد صفحه)، موتورهای جستجو (کلمات کلیدی) و سایر خدمات وب مورد استفاده قرار می‌گیرد.

مثال‌ها

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

<meta charset="UTF-8">

کلمات کلیدی برای موتورهای جستجو را تعریف می‌کند:

<meta name="keywords" content="HTML, CSS, JavaScript">

صفحه وب شما را توصیف می‌کند:

<meta name="description" content="Free Web tutorials">

نویسنده یک صفحه را مشخص می‌کند:

<meta name="author" content="John Doe">

سند را هر ۳۰ ثانیه تازه‌سازی (Refresh) کنید:

<meta http-equiv="refresh" content="30">

تنظیم نمای نمایش سایت، برای ظاهر مناسب وب‌سایت شما در تمامی دستگاه‌ها:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

مثال از تگ <meta>:

مثال

<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="John Doe">

مثال

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="description" content="Free Web tutorials">
  <meta name="keywords" content="HTML, CSS, JavaScript">
  <meta name="author" content="John Doe">
</head>
<body>

<p>All meta information goes inside the head section.</p>

</body>
</html>

Responsive demo.svg



تنظیم Viewport

Viewport ناحیهٔ قابل مشاهده کاربر در یک صفحه وب است. در دستگاه‌های مختلف متفاوت است و در موبایل‌ها کوچکتر از صفحه نمایش رایانه هاست.

باید عنصر <meta> برای Viewport را در همهٔ صفحات وب خود اضافه کنید:

<meta name="viewport" content="width=device-width, initial-scale=1.0">


این یک‌سری دستورالعمل را در مورد نحوه کنترل ابعاد و مقیاس بندی صفحه به مرورگر می‌دهد.

قسمت width=device-width عرض صفحه را به گونه ای تنظیم می‌کند که متناسب با عرض صفحه نمایش دستگاه باشد (که بسته به نوع دستگاه متفاوت خواهد بود).

بخش initial-scale=1.0، سطح بزرگنمایی اولیه را هنگام بارگذاری صفحه توسط مرورگر تعیین می‌کند.

در اینجا یک مثال از صفحه وب بدون متا تگ viewport meta، و همان صفحه وب با متا تگ viewport وجود دارد:

نکته: اگر این صفحه را با PC باز می‌کنید، کافیست با کلیک بر هر لینک پائین و جابجایی نوار عمودی سمت راست هر مثال، تفاوت را ببینید. برای موبایل، موارد بالا بصورت خودکار انجام می‌شود.
Responsive demo.svg


عنصر <script> در HTML

عنصر <script> برای تعریف جاوااسکریپت سمت کاربر استفاده می‌شود.

این جاوااسکریپت داخل یک عنصر HTML با id="demo" می‌نویسد "Hello JavaScript!":

مثال

<script>
function myFunction() {
  document.getElementById("demo").innerHTML = "Hello JavaScript!";
}
</script>

مثال

<!DOCTYPE html>
<html>
<head>
  <title>Page Title</title>
  <script>
  function myFunction() {
    document.getElementById("demo").innerHTML = "Hello JavaScript!";
  }
  </script>
</head>
<body>

<h1>My Web Page</h1>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>

</body>
</html>

Responsive demo.svg


نکته: برای یادگیری جاوااسکریپت از آموزش JavaScript ما بازدید کنید.


عنصر <base> در HTML

عنصر <base> آدرس‌وب اصلی و/یا هدف را برای همه URLهای نسبی در یک صفحه مشخص می‌کند.

تگ <base> باید دارای یک href یا یک ویژگی target یا هر دو باشد.

نکته: فقط یک عنصر <base> در یک سند وجود دارد!

مثال

یک نشانی اینترنتی پیش‌فرض و یک target پیش‌فرض برای همه پیوندهای یک صفحه مشخص کنید:

<head>
<base href="https://www.w3schools.com/" target="_blank">
</head>

<body>
<img src="images/stickman.gif" width="24" height="39" alt="Stickman">
<a href="tags/tag_base.asp">HTML base Tag</a>
</body>

مثال

<!DOCTYPE html>
<html>
<head>
  <base href="https://www.w3schools.com/" target="_blank">
</head>
<body>

<h1>The base element</h1>

<p><img src="images/stickman.gif" width="24" height="39" alt="Stickman"> - Notice that we have only specified a relative address for the image. Since we have specified a base URL in the head section, the browser will look for the image at "https://www.w3schools.com/images/stickman.gif".</p>

<p><a href="tags/tag_base.asp">HTML base tag</a> - Notice that the link opens in a new window, even if it has no target="_blank" attribute. This is because the target attribute of the base element is set to "_blank".</p>

</body>
</html>

Responsive demo.svg


یک نشانی اینترنتی پیش‌فرض و یک target پیش‌فرض برای همه پیوندهای یک صفحه مشخص کنید:



خلاصهٔ بخش

عنصر <head> محفظه‌ای برای فراداده است (داده‌های مربوط به داده)
عنصر <head> بین تگ <html> و تگ <body> قرار می‌گیرد
عنصر <title> مورد نیاز است و عنوان سند را مشخص می‌کند
عنصر <style> برای تعریف اطلاعات سبک، برای یک سند واحد استفاده می‌شود
تگ <link> بیشتر برای پیوند دادن به برگه‌های استایل خارجی استفاده می‌شود
عنصر <meta> معمولاً برای تعیین مجموعه کاراکترها، توضیحات صفحه، کلمات کلیدی، نویسنده سند، و تنظیمات پورت نمایش استفاده می‌شود
عنصر <script> برای تعریف جاوااسکریپت‌های سمت-کلاینت استفاده می‌شود
عنصر <base> آدرس‌وب اصلی و/یا هدف را برای همه URLهای نسبی در یک صفحه مشخص می‌کند


عناصر head در HTML


منابع آموزشی




به‌روزرسانی شده: ۵ روز پیش