ব্লক লেভেল এবং ইনলাইন এলিমেন্তের মুল পার্থক্য হল ব্লক লেভেল এলিমেন্ট গুলো তার ডানপাশের সম্পূর্ন প্রস্থ ধারণ করে আর ইনলাইন এলিমেন্ট শুধুমাত্র তার নির্দিষ্ট প্রয়োজনীয় প্রস্থটুকু ধারণ করে।
<span> একটি ইনলাইন এলিমেন্ট।<div> একটি ব্লক-লেভেল এলিমেন্ট
ব্লক-লেভেল এলিমেন্ট গুলো সাধারণ ভাবে বাম থেকে ডান দিকের সমস্ত স্থান টুকু সংরক্ষণ করে রাখে অর্থাৎ লাইনের সম্পূর্ন প্রস্থ বা width দখল করে নেয়, এই এলিমেন্টকে আপনি লাইনের বা দিকে বা ডান দিকে, যেদিকেই স্থাপন করেন না কেন, সকল ক্ষেত্রেই লাইনের সম্পূর্ন প্রস্থ সংরক্ষন করে। ব্লক-লেভেল এলিমেন্ট গুলো সব সময় একটি নতুন লাইন তৈরি করে।
<div> একটি ব্লক-লেভেল এলিমেন্ট
<div>Hello</div> <div>World</div>
নিচে কত গুলো ব্লক-লেভেল এলিমেন্টের নাম দেখুন।
<address> | <article> | <aside> |
<blockquote> | <canvas> | <dd> |
<div> | <dl> | <dt> |
<fieldset> | <figcaption> | <figure> |
<footer> | <form> | <h1>-<h6> |
<header> | <hr> | <li> |
<main> | <nav> | <noscript> |
<ol> | <output> | <p> |
<pre> | <section> | <table> |
<tfoot> | <ul> | <video> |
ইনলাইন এলিমেন্ট গুলো কেবল মাত্র প্রয়োজন অনুযায়ী প্রস্থ বা width সংরক্ষন ব দখল করে। এই এলিমেন্ট গুলো কোন নতুন লাইন তৈরি করে না।
প্যারাগ্রাফ এলিমেন্টের ভিতরে <span> একটি ইনলাইন এলিমেন্ট।
<span>Hello</span> <span>World</span>
নিচে কত গুলো ইনলাইন এলিমেন্টের নাম দেখুন।
<a> | <abbr> | <acronym> | <b> | <bdo> |
<big> | <br> | <button> | <cite> | <code> |
<dfn> | <em> | <i> | <img> | <input> |
<kbd> | <label> | <map> | <object> | <q> |
<samp> | <script> | <select> | <small> | <span> |
<strong> | <sub> | <sup> | <textarea> | <time> |
<tt> | <var> |
<div> এলিমেন্টটি হল একটি ব্লক-লেভেল এলিমেন্ট, যা যে কোন এইচটিএমএল এলিমেন্ট এমন কি তা এক বা একাধিক <div> এলিমেন্ট ও হতে পারে, এর কন্টেইনার হিসাবে ব্যবহার করা হয়। এইচটিএমএল ডকুমেন্টের নির্দিষ্ট এক বা একাধিক ব্লকে ভিন্ন ভিন্ন স্টাইল বা এলিমেন্ত স্থাপন করার জন্য <div> এলিমেন্ট ব্যবহার করা হয়। এইচটিএমএল ব্লক এলিমেন্টগুলোকে style এট্রিবিউট অথবা class ও id এট্রিবিউট ব্যবহার করে স্টাইল করা হয়।
<div style="background-color:silver;color:black;padding:25px;"> <h2>WebsSchool</h2>
<p> WebsSchool is a free bangla web design tutorial for larning web design. </p> </div>
<span> হল একটি ইনলাইন এলিমেন্ট। এই এলিমেন্টটি সাধারণত কম বা অল্প কিছু লেখাকে বিশেষ ভাবে স্টাইল করার জন্য ব্যবহার করা হয়। বিশেষ ভাবে কেবল <span> এলিমেন্টের জন্য কোন এট্রিবিউট নেই, তবে style, id এবং class এট্রিবিউট ব্যবহার করে স্টাইল কোড প্রয়োগ করা জায়।
<h1>My <span style="color:red">Important</span> Heading</h1>
ট্যাগ | বর্ণনা |
---|---|
<div> | এটি একটি ব্লক-লেভেল এলিমেন্ত যা এইচটিএমএল ডকুমেন্টের মধ্যে কোন সেকশন তৈরি করে। |
<span> | এটি একটি ইনলাইন এলিমেন্ত যা এইচটিএমএল ডকুমেন্টের মধ্যে সেকশন তৈরি করে। |
নোট - এইচটিএমএল ব্লক এবং ইনলাইন এলিমেন্টগুলোকে style এট্রিবিউট, class ও id এট্রিবিউট ব্যবহার করে স্টাইল করা যায়