عنصر Head در HTML

عنصر <head> در HTML ظرفی برای عناصر زیر است:

<title> ، <style> ، <meta> ، <link> ، <script> و <base>.

 

عنصر <head> در HTML

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

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

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

 

عنصر <title> در HTML

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

برچسب <title> در اسناد HTML لازم است!

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

عنصر <title>:

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

یک سند HTML ساده:

<!DOCTYPE html>
<html>
<head>
  <title>یک عنوان صفحه معنی دار</title>
</head>
<body>

محتوای سند ......
</body>
</html>
امتحان کنید

 

عنصر <style> در HTML

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

<style>
  body {background-color: powderblue;}
  h1 {color: red;}
  p {color: blue;}
</style>
امتحان کنید

 

عنصر <link> در HTML

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

برچسب <link> اغلب برای پیوند به ورق های سبک خارجی استفاده می شود:

<link rel="stylesheet" href="mystyle.css">
امتحان کنید

 

عنصر <meta> در HTML

عنصر <meta> به طور معمول برای تعیین مجموعه کاراکترها ، توضیحات صفحه ، کلمات کلیدی ، نویسنده سند و تنظیمات نمای نمایش استفاده می شود.

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

چند مثال

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

<meta charset="UTF-8">

 

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

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

 

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

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

 

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

<meta name="Sina" content="Sina Yaghoobi">

 

هر 30 ثانیه سند را تازه می کند:

<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="Sina" content="Sina Yaghoobi">
امتحان کنید

 

تنظیم Viewport

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

شما باید عنصر <meta> زیر را در تمام صفحات وب خود بگنجانید:

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

 

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

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

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

 

عنصر <script> در HTML

از عنصر <script> برای تعریف JavaScript های clinet-side استفاده می شود.

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

<script>
function myFunction() {
  document.getElementById("demo").innerHTML = "سلام جاوا اسکریپت!";
}
</script>
امتحان کنید

 

عنصر <base> در HTML

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

برچسب <base> باید دارای یک ویژگی href یا یک هدف باشد ، یا هر دو.

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

برای همه پیوندهای یک صفحه یک URL پیش فرض و یک هدف پیش فرض مشخص کنید:
<head>
<base href="https://www.maxdev.ir/" target="_blank">
</head>

<body>
<img src="https://maxdev.ir/admin/uploads/stickman.gif" width="24" height="39" alt="Stickman">
<a href="tags/tag_base.asp">HTML base Tag</a>
</body>
امتحان کنید