وقتی به HTML نگاه میکنیم، یکی از مهمترین تگها که محتوای اصلی یک صفحه وب را در بر میگیرد، تگ body
است. این تگ هر چیزی را که میخواهیم در مرورگر قابل نمایش باشد، شامل میشود؛ مثل متن، تصاویر، لینکها و ...
تگ body
بعد از تگ head
قرار میگیرد و مستقیماً زیرمجموعه تگ html
است. جالب است بدانید که متا دیتا و تنظیمات مربوط به صفحه در تگ head
قرار میگیرند و محتوای واقعی و قابل مشاهده صفحه، داخل body
جای میگیرد.
یک ویژگی مهم دیگر تگ body
این است که میتوانیم با استفاده از استایلهای CSS روی آن کار کنیم، برای مثال رنگ پیشزمینه، فونتها، استایل لینکها و حتی چینش محتوای صفحه را کنترل کنیم. به همین خاطر است که طراحان وب معمولاً به صورت مستقیم یا غیرمستقیم از این تگ استفاده میکنند.
به طور کلی، هر آنچه که در body
قرار میگیرد، جزء محتوای صفحه محسوب میشود؛ به همین دلیل است که باید بهینه و کاربرپسند طراحی شود. در عین حال، اهمیت رعایت اصول کدنویسی استاندارد در نحوه استفاده از تگ body
بسیار مهم است.
نمونه کد HTML با استفاده از تگ body
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<title>صفحه نمونه</title>
</head>
<body>
<h1>خوش آمدید به صفحه ما!</h1>
<p>این یک نمونه از استفاده از تگ body در HTML است.</p>
<img src="image.jpg" alt="نمونه تصویر">
</body>
</html>
توضیحات کد خط به خط
<!DOCTYPE html>
این خط داکتایپ HTML5 را مشخص میکند.
<html lang="fa">
آغاز تگ HTML و تعیین زبان صفحه به فارسی است.
<head>
آغاز تگ Head که شامل متا دیتا و عنوان صفحه است.
<meta charset="UTF-8">
تنظیم مجموعه کاراکتر صفحه به UTF-8.
<title>صفحه نمونه</title>
عنوان صفحه که در تب مرورگر نمایش داده میشود.
</head>
پایان تگ Head.
<body>
آغاز تگ Body که محتوای صفحه را در بر میگیرد.
<h1>خوش آمدید به صفحه ما!</h1>
عنوان اصلی صفحه.
<p>این یک نمونه از استفاده از تگ body در HTML است.</p>
یک پاراگراف متنی.
<img src="image.jpg" alt="نمونه تصویر">
تصویر با تعیین منبع و متن جایگزین.
</body>
پایان تگ Body.
</html>
پایان تگ HTML.