در این بخش از آموزش HTML و طراحی سایت، تگ div را به شما آموزش می‌دهیم.
این تگ از مهم‌ترین و کاربردی‌ترین تگ‌ها در طراحی سایت می‌باشد و با به وجود آمدن تگ div از تگ table در طراحی سایت کمتر استفاده می‌شود. زیرا با استفاده از تگ div می‌توان در بهینه‌سازی سایت موثر بود. این تگ برای تعیین ساختار اصلی صفحه موردنظر استفاده می‌شود.
تگ div را می‌توان در قسمت‌های مختلفی از دستورات خود اضافه کرد. شما می‌توانید ساختاری که در نظر دارید را در تگ div قرار دهید. این تگ در html شامل کاربردهایی می باشد که آن‌ها را توضیح می‌دهیم.
- شما می‌توانید با استفاده از این تگ یک سند html را تقسیم بندی نمایید.
- با استفاده از تگ div می‌توانید به گروهی از تگ‌ها دستورات خود را اعمال کنید.
- به طور کل با استفاده از این کار دستورات خود را به همه‌ی تگ ها اعمال می‌کنید.
تمام عناصری که در برنامه‌نویسی به منظور طراحی سایت استفاده می‌شوند، دارای هدف هستند. برای مثال در زبان برنامه نویسی HTML تگ‌هایی تعریف شده‌اند که هرکدام دارای هدف خاصی هستند. برای مثال تگ <p> برای تعریف پاراگراف‌ها و تگ‌های <h> که از <h1> تا <h6> است و برای تعیین اولویت ها کاربرد دارند. علاوه بر این تگ ها یک تگ نیز با عنوان تگ <div> وجود دارد.
تگ <div> معرف یک دسته‌بندی یا یک بخش در یک html است. این تگ برای گروه‌بندی عناصر بلوک برای شکل‌گیری از طریق CSS در طراحی سایت استفاده می‌شود. در واقع تگ <div> در طراحی سایت کاربرد فراوانی دارد. این تگ تا حد زیادی جایگزین تگ <table> در HTML4 است.
در زیر مثالی از نحوه کاربرد تگ‌های مختلف در داخل تگ <div> در طراحی سایت برای شما کاربران عزیز ارائه کرده ایم.
<div style="color:#0000FF">
<h3>This is a heading</h3>
<p>This is a paragraph.</p>
</div>
مثالی کلی از نحوه نوشتن تگ‌ها در یک صفحه html در طراحی سایت:
<!DOCTYPE html>
<html>
<head>
<title>HTML div Tag</title>
<link rel="stylesheet" href="style2.css">
</head>
<body>
<div id="contentinfo">
<p>Welcome to our website. We provide tutorials on various subjects.</p>
</div>
</body>
</html>
مثال زیر کاربرد تگ div را نشان می‌دهد.
<div style="color:red"></div>