HTML div:

div মানে Division, একটা অংশ বা ভাগ। এইচটিএমএল পেইজের একটা সেকশন। এইচটিএমএল ইলিম্যান্টকে বিভিন্ন গ্রুপে ভাগ করার জন্য div ট্যাগ ব্যবহার করা হয়। আর বিভিন্ন ভাগে ভাগ করার প্রধান উদ্যেশ্য হচ্ছে ভিন্ন ভিন্ন স্টাইল দেওয়া।

নিচের কোড গুলো দেখুন। ব্রাউজারে দেখতে এখানে ক্লিক করুন। 

<!DOCTYPE html>
<html>
<body>

<p>This is some text.</p>

<div style="background:#ddd; color:green;">
 <h3>This is a heading in a div element</h3>
 <p>This is some text in a div element.</p>
</div>

<div style="background:#ADD23F;">
 <h3>This is another div</h3>
 <h3>some text inside another div</h3>
</div>

</body>
</html>

উপরে দুটি ভিন্ন ভিন্ন div তৈরি করেছি। যার ব্যাকগ্রাউন্ড কালার ভিন্ন এবং টেক্সট কালার ভিন্ন। div গুলোর স্টাইল দেওয়ার জন্য আমরা ইনলাইন স্টাইল ব্যবহার করেছি।

কোড গুলো পরিবর্তন করে দেখতে পারেন।

আমরা চাইলে div এর সাইজ মানে প্রস্থ এবং উচ্চতা বলে দিতে পারি।
এবার নিচের উদাহরনটি দেখুন। এখানে আমরা Internal style sheet করেছি। উদাহরনটি দেখা যাবে এখানে।

<!DOCTYPE html>
<html>
 <head>

  <style>
   div{
   background:#ADD23F;
   width:300px;
   height:100px;
   padding:10px;
   }
  </style>

</head>

 <body>
  <div>
  <h3>This is a heading in a div element</h3>
  <p>This is some text in a div element.</p>
  </div>
 </body>
</html>

আমরা একের অধিক div ট্যাগ ব্যবহার করতে পারি। তা প্রথম উদাহরনেই দেখেছি। এবং এক একটার জন্য এক এক রকমের স্টাইল দিতে পারিঃ
উদাহরনটি দেখা যাবে এখানে।

<!DOCTYPE html>
<html>
 <head>

<style>
 .div1{
 background:#ADD23F;
 width:300px;
 height:100px;
 margin:10px;
 padding:10px;
 }

.div2{
 background:#ddd;
 width:300px;
 height:100px;
 margin:10px;
 padding:10px;
 }
 </style>

</head>

<body>
 <div class="div1">
 <h3>This is a heading in a div element</h3>
 <p>This is some text in a div element.</p>
 </div>

<div class="div2">
 <h3>This is another div</h3>
 <p>This is some text in a this div element.</p>
 </div>
 </body>
</html>

HTML span:

span দিয়ে একটা লাইনের মধ্যের একটা নির্দিষ্ট অংশকে গ্রুপ করার জন্য ব্যবহৃত হয়। নিচের উদারনটি দেখুনঃ

<!DOCTYPE html>
 <html>
  <body>

    <p>This is a <span style="color:red;font-weight:bold">Example of span tag</span>. The span tag is used to group inline-elements in a document. </p>

  </body>
</html>

উপরে উদাহরনে আমরা Example of span tag এ অংশকে অন্যান্য লেখা গুলোকে আলাদা করে দেখার জন্য span ট্যাগ ব্যবহার করে লাল রঙ এবং বোল্ড করে দিয়েছি। নিচের উদাহরনটি দেখুন। আমরা চাইলে span ট্যাগ এর জন্য আলাদা করে স্টাইল লিখতে পারিঃ
উদাহরনটি দেখা যাবে এখানে।

<!DOCTYPE html>
 <html>
<style>
span{
background:#ddd;
color:red;
}

</style>
 </head>

<body>
<p>This is a <span>Example of span tag</span>. The span tag is used to group inline-elements in a document. </p>

</body>
 </html>

একের অধিক sapn ট্যাগ আমরা ব্যবহার করতে পারি। আবার এক একটা span এর জন্য এক এক ধরনের কালার ব্যবহার করতে পারি। নিচের উদাহরনটি দেখুনঃ

<!DOCTYPE html>
 <html>
  <body>

    <p>This is a <span style="color:red;font-weight:bold">Example of span tag</span>. The span tag is used to group <span style="color:blue;">inline-elements</span> in a document. </p>

  </body>
</html>