اهمیت و کاربرد Head در اسناد HTML

عنصر <head> چیست؟

عنصر <head> در یک سند HTML وظیفه ی نگه داری از metadata را دارد و بین <html> و <body> قرار می گیرد. metadata یعنی «داده هایی که در مورد داده های دیگر» هستند! به طور مثال وقتی می گوییم «metadata های سند HTML» یعنی اطلاعاتی درباره ی سند HTML (که خود اطلاعات است).

واضح است که metadata نمایش داده نمی شود و شکل بصری ندارد بلکه مواردی مثل این موارد را شامل می شود:

character set (مواردی مثل UTF-8)
document title (عنوان سند)
styles (استایل های CSS)
محل قرار گیری تگ های link و script
و دیگر اطلاعاتی که راجع به خودِ سند HTML باشد

بیایید تک تک این موارد را بررسی کنیم!

تگ <title>

عنصر <title> عنوان و تیتر کل سند را انتخاب می کند و باید در تمام اسناد HTML وجود داشته باشد تا HTML شما غیر معتبر تلقی نشود.

به عبارت دیگر 3 کار اصلی <title> از این قرار است:

موضوع صفحه ی HTML را در تب مرورگر کاربر نمایش می دهد
اگر صفحه ای به favorites اضافه شود، عنوان آن همان محتوای <title> خواهد بود
تگ <title> همان چیزی است که در موتورهای جست و جو به عنوان لینک سایت شما می آید

به این مثال ساده نگاه کنید:

<!DOCTYPE html>
<html>
<head>
  <title>Page Title</title>
</head>
<body dir = 'rtl'>

<p>محتوای body در صفحه ی مرورگر نمایش داده می شود</p>
<p>محتوای تگ title نیز در تب مرورگر، در favorites و در موتور های جست و جو به نمایش در می آید</p>

</body>
</html>

مشاهده ی خروجی در JSBin

همانطور که می بینید این موضوع بسیار ساده بود.

تگ <style>

تگ <style> استایل های CSS را مشخص می کند.

ما در دوره ی CSS توضیح دادیم که کدهای CSS به سه روش اصلی نوشته می شوند:

به صورت inline (به صورت attribute)
به صورت internal (در قسمت <head> از سند HTML)
به صورت external (در یک فایل جداگانه)

در واقع تگ <style> مورد دوم یا internal است. به مثال زیر توجه کنید:

<!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>

مشاهده ی خروجی در JSBin

استفاده از کدهای CSS به این صورت ایده آل ترین حالت ممکن نیست اما ضربه ی جدی نیز به شما نمی زند. معمولا در یک وب سایت واقعی از آن جا که کدهای CSS بسیار حجیم می شوند مجبور می شوید آن ها را در یک فایل جداگانه (external) بنویسید و سپس با استفاده از link آن ها را به سند HTML متصل کنید. این نوع از نوشتن کدهای CSS معمولا برای مباحث یادگیری و تمرین و یا کدهای CSS خاصی است که برنامه نویس می خواهد در آن قسمت قرار بگیرند.

تگ <link>

از تگ <link> برای آدرس دهی به یک فایل خارجی استفاده می شود که معمولا جاوا اسکریپت و یا CSS است. با این کار فایل های خارجی خود را به سند HTML متصل کرده و می توانیم از کدهای داخلشان استفاده کنیم.

مثال:

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

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

مشاهده ی خروجی در JSBin

همانطور که میبینید از یک فایل CSS خارجی و متعلق به سایت دیگری استفاده کرده ایم.

عنصر <meta>

تگ <meta> کار مشخص کردن اطلاعات خاصی را دارد. به طور مثال اینکه character set استفاده شده در سند چیست؟ یا چه keyword هایی برای این صفحه تعیین شده است؟ author (نویسنده) ی این صفحه کیست؟ و الی آخر ...

مرورگرها به طور عمده از <meta> برای بهتر نمایش دادن محتوا و موتورهای جست و جو برای دریافت keyword ها استفاده می کنند.

- برای تعیین character set از این کد استفاده می کنیم:

<meta charset="UTF-8">

پیشنهاد تمام متخصصین حوزه ی وب این است که اگر هر جایی (چه پایگاه داده، چه اسناد HTML و ...) مجبور به انتخاب نوع encoding یا همان character set شدید، آن را روی UTF-8 بگذارد چرا که بسیار از زبان ها را پشتیبانی می کند. در غیر این صورت ممکن است برخی از کاراکتر های صفحه ی شما نمایش داده نشود. البته این موضوع اگر در پایگاه داده باشد، خسارات سنگین تری بر جای می گذارد؛ مانند اشتباه ذخیره شدن نام و اطلاعات مشتریان!

- برای تعیین description (توضیحات در مورد صفحه ی وب خود) از این قالب استفاده کنید:

<meta name="description" content="site description">

به طور مثال در سایت روکسو این توضیح را ارائه داده ایم:

<meta name="description" content="دستیابی به هزاران مقاله آموزش رایگان برنامه نویسی و آموزش رایگان طراحی گرافیک در وب سایت روکسو. آموزش رایگان فتوشاپ و برنامه نویسی"/>

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

- برای تعیین کلیدواژه ها (keywords) از این قالب استفاده کنید:

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

- همچنین شما می توانید نویسنده ی صفحه یا همان author را به این شکل تعیین کنید:

<meta name="author" content="Amir Zouerami">

نکته: این نوع اطلاعات بیشتر به درد موتور های جست و جو می خورد نه کاربران شما. وب سایت شما بدون این اطلاعات نیز به شکل صحیح کار می کند اما از نظر سئو ضربه خواهد خورد!

- شما حتی می توانید صفحات خود را طوری تنظیم کنید که هر فلان ثانیه (مثلا اینجا 30 ثانیه) refresh شوند:

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

بیایید این موارد را در یک مثال استفاده کنیم:

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

<p dir='rtl'>تمام اطلاعات قسمت body که دیده می شوند در این قسمت قرار خواهند گرفت</p>

</body>
</html>

مشاهده ی خروجی در JSBin

مبحث viewport

HTML5 روشی ارائه کرد تا طراحان وب سایت به viewport دسترسی پیدا کنند. viewport به معنای قسمتی از صفحه ی HTML است که کاربر مشاهده می کند. به طور مثال اگر صفحه طولانی باشد و اسکرول عمودی بخورد، در هر لحظه، آن قسمتی از صفحه که کاربر مشاهده می کند، viewport نام دارد.

مشخص است که viewport در تلفن های همراه (مانند دستگاه های اندرویدی) کوچکتر است بنابراین باید مراقب این نوع کاربران نیز باشیم.

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

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

این کد به مرورگر کاربر می گوید که صفحه را چطور نمایش دهد و چطور با مقایس یک صفحه کار کند.

قسمت width=device-width می گوید عرض صفحه (width) باید با عرض صفحه ی دستگاه کاربر (چه کامپیوتر، په تبلت، چه گوشی و ...) هماهنگ باشد. از طرفی قسمت initial-scale=1.0 می گوید، مقدار بزرگنمایی اولیه ی یک صفحه چقدر باید باشد؛ وقتی به آن عدد 1.0 داده ایم یعنی 1 برابر بزرگنمایی داشته باشد و همانطور که می دانید 1 برابر بزرگنمایی یعنی همان سایز اصلی و بدون بزرگنمایی. اگر مقادیر بیشتری از 1 به آن بدهید، پس از بارگذاری صفحات برای کاربر، صفحه به همان اندازه بزرگنمایی (zoom) خواهد داشت که اصلا کار قشنگی نیست.

بگذارید تفاوت استفاده از این دستور را در صفحات وب به شما نشان دهم!

ابتدا به کد زیر نگاه کنید:

<!DOCTYPE html>
<html>
<body>

<p><b>To understand this example, you should open this page on a phone or a tablet.</b></p>

<img src="https://www.w3schools.com/css/img_chania.jpg" alt="Chania" width="560" height="345">

<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
</p>

</body>
</html>

مشاهده ی خروجی در JSBin

در این کد از width=device-width و ... استفاده نکرده ایم. اگر به خروجی این صفحه در JSBin بروید و صفحه ی مرورگرتان یا قسمت راست JSBin (یعنی قسمت مشاهده ی خروجی) را کوچک تر کنید میبینید که تصویر از کادر خارج می شود!

حالا به این کد نگاه کنید:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style>
img {
    max-width: 100%;
    height: auto;
}
</style>
</head>
<body>
<p><b>To understand this example, you should open this page on a phone or a tablet.</b></p>

<img src="https://www.w3schools.com/css/img_chania.jpg" alt="Chania" width="460" height="345">

<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
</p>

</body>
</html>

مشاهده ی خروجی در JSBin

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

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

اگر در JSBin، صفحه سمت راست را کوچک کنید و یا اندازه ی مرورگر خود را بسیار کوچک کنید، متوجه می شوید که اندازه ی تصویر متناسب با اندازه ی صفحه تغییر می کند و دیگر از کادر خارج نمی شود! دلیل استفاده از این دستور همین موضوع ساده اما بسیار کاربردی است!

تگ <script>

تگ <script> برای اضافه کردن کدهای جاوا اسکریپت است (چه خارجی و چه داخلی).

به طور مثال در کد زیر میخواهیم عبارت Hello JavaScript را نمایش دهیم:

<!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>

مشاهده ی خروجی در JSBin

در دوره ی جاوا اسکریپت ما می توانید بیشتر در رابطه با این مورد مطالعه کنید.

تگ <base>

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

به مثال زیر توجه کنید:

<!DOCTYPE html>
<html>
<head>
  <title>Page Title</title>
  <base href="https://www.roxo.ir/plus/" target="_blank">
</head>
<body>

<p><a href="/react-loops/">تکرار عناصر (حلقه ها) در ری اکت</a></p>

</body>
</html>

مشاهده ی خروجی در JSBin

در کد بالا می بینیم که من به href مربوط به لینک، مقدار react-loops/ را داده ام! این مقدار به خودی خود اشتباه است اما از آنجا که base یا پایه ی URL خود را www.roxo.ir/plus تعریف کرده ام، این Base به مقدار href میچسبد و در نهایت لینک زیر را می سازد:

https://www.roxo.ir/react-loops/

هشدار: در استاندارد HTML5 گفته شده است که شما اجازه دارید تگ های <html> و <body> و <head> را حذف کنید. یعنی کد شما به این شکل باشد:

<!DOCTYPE html>
<title>Page Title</title>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

اما ما به شما پیشنهاد می کنیم تحت هیچ شرایطی چنین کاری را انجام ندهید. پاک کردن تگ های <html> و <body> می تواند DOM یا نرم افزار XML را به طور کامل از کار بیندازد و در مرورگرهای قدیمی مانند IE9 نیز باعث خطاهای فراوان می شود. این مسئله که شما اجازه به پاک کردن برخی از تگ ها دارید، به شرایط و حالت خاصی مربوط است، نه اینکه چون می توانیم باید تمام این تگ ها را در شرایط عادی حذف کنیم.

امیدوارم از این قسمت لذت برده باشید.

دیدگاه‌های شما (1 دیدگاه)

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.

مجتبی

29 فروردین 1398

ببخشید میدونم که جاش اینجا نیست ولی در مورد utf8 تو پایگاه داده سوال دارم. من اونجا utf8 میزنم ولی بازم فارسی ساپورت نمی کنه چیکار کنم؟

امیر زوارمی

31 فروردین 1398

سلام دوست عزیز، برای پشتیبانی کامل از unicode و UTF-8 در پایگاه داده باید encoding رو روی utf8mb4 بزارین. در واقع انواع مختلفی از UTF-8 رو داریم و اگر روی چیزی غیر از utf8mb4 بزارین ممکنه کار نکنه. اطلاعات بیشتر رو میتونین از اینجا بخونین: https://mathiasbynens.be/notes/mysql-utf8mb4