عناصری از HTML به نام body

html body element tutorial
20 آبان 1403

وقتی به 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.

سوالات متداول

؟

چرا باید از تگ body استفاده کنم؟

؟

آیا می‌توانم به تگ body استایل بدهم؟

؟

آیا تگ‌های دیگری هم شبیه به body داریم؟