تگ body در HTML

تاریخ انتشار: 26 اردیبهشت 1400

تاریخ بروزرسانی: 11 خرداد 1400

تعداد بازدید: 144

تگ body در HTML یکی از مهم ترین تگ ها می باشد ، این تگ بدنه سند ما می باشد و تمامی تگ ها و محتوای وب سایت درون تگ body قرار میگیرند.

مثال

<!DOCTYPE html>
<html dir="rtl">
<head>
<title>عنوان سند</title>
</head>

<body>
<h1>این یک عنوان هست</h1>
<p>این یک پاراگراف هست.</p>
</body>

</html>

تعریف و کاربرد

تگ body در HTML بدنه سند را تعریف می کند.

عنصر body شامل تمام محتوا و عناصر سند مانند : تصاویر ، جداول ، متن ها ، ویدیو ها و… می باشد ( این عنصر بدنه اصلی سند HTML می باشد )

توجه: تنها یک عنصر body در سند HTML وجود دارد ( اجازه استفاده بیشتر از یک بار از تگ body را در هر سند ندارید )

پشتیبانی مرورگر ها

عنصر
`<body>`	بله	بله	بله	بله	بله

خواص عمومی

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

رویداد های عمومی

تگ body از رویداد های عمومی در HTML پشتیبانی میکند.

مثال های بیشتر

در مثال زیر با استفاده از CSS یک تصویر را به عنوان پس زمینه سند در تگ body تنظیم میکنیم:

<!DOCTYPE html>
<html dir="rtl">
<head><style>body {
background-image: url(https://www.bubbleslearn.ir/wp-content/uploads/2020/06/login-background.jpg);
}</style></head>
<body>

<h1>این یک عنوان هست</h1>
<p>در اینجا ما یک تصویر را به عنوان پس زمینه سند تنظیم کرده ایم</p>

</body>
</html>

در مثال زیر با استفاده از CSS رنگ پس زمینه سند در تگ body را تغییر داده ایم:

<!DOCTYPE html>
<html dir="rtl">
<head>
<style>
body {
background-color: aqua;
}
</style>
</head>
<body>

<h1>تغییر رنگ پس زمینه</h1>
<p>این یک پاراگراف آزمایشی هست.</p>

</body>
</html>

در مثال زیر با استفاده از CSS رنگ متن های درون سند را در تگ body تغییر می دهیم:

<!DOCTYPE html>
<html dir="rtl">
<head>
<style>
body {
color: blue;
}
</style>
</head>
<body>

<h1>سلام به همگی !</h1>
<p>این یک متن هست.</p>

</body>
</html>

تنظیمات پیش فرض CSS

اکثر مرورگر ها عنصر body در HTML را با تنظیمات پیش فرض زیر نمایش می دهند:

body {
  display: block;
  margin: 8px;
}

body:focus {
  outline: none;
}