HTML-এ ব্লক-লেভেল এবং ইনলাইন ব্লক এলিমেন্টের পার্থক্য শিখুন।
HTML-এ, সব এলিমেন্টের একটি ডিফল্ট ডিসপ্লে ভ্যালু থাকে যা ইউজার এজেন্ট স্টাইলশীট (UAS) থেকে ইনহেরিট হয়, যা সব ব্রাউজারে বিল্ট-ইন থাকে।
দুটি ডিসপ্লে ভ্যালু অপশন থাকে, ব্লক এবং ইনলাইন:
- CSS-এ ব্লক:
display:block; - CSS-এ ইনলাইন:
display: inline-block;
যেকোনো HTML এলিমেন্টের আচরণ বা স্টাইল ব্রাউজারের ইউজার এজেন্ট স্টাইলশীট (UAS)- থেকে আসে — যা আপনি সহজে ওভাররাইড করতে পারেন। তাই যেকোনো ব্লক-লেভেল এলিমেন্টকে একটি সিম্পল ডিক্লেরেশন দিয়ে ইনলাইন এলিমেন্টে রূপান্তর করা যায়: display: inline-block; — এবং তার বিপরীতটিও।
ব্লক-লেভেল এলিমেন্ট কী?
HTML-এ, একটি ব্লক-লেভেল এলিমেন্ট হলো এমন এলিমেন্ট যা সবসময় নতুন লাইন থেকে শুরু হয় (লাইন ব্রেকের মতো) এবং এর কন্টেইনার (প্যারেন্ট এলিমেন্ট) এর পুরো প্রস্থ নেয়।
তাই যদি এই প্যারাগ্রাফের নিচে একটি <div> এলিমেন্ট যোগ করি, তবে সেটি এর প্যারেন্ট কন্টেইনারের বাম থেকে ডানে পুরো প্রস্থ নেবে।
কোড উদাহরণ:
<div>আমি একটি ব্লক-লেভেল এলিমেন্ট।</div>ফলাফল:
আমি একটি ব্লক-লেভেল এলিমেন্ট।
সেটি পুরো প্রস্থ নিচ্ছে তা দেখতে কঠিন। সহজ করতে একটি বর্ডার যোগ করি:
<div style="border:1px solid #dd4c4f">আমি একটি ব্লক-লেভেল এলিমেন্ট।</div>ফলাফল:
আমি একটি ব্লক-লেভেল এলিমেন্ট।
এখন দেখতে পাচ্ছেন <div> এলিমেন্টটি এর কন্টেইনারের পুরো প্রস্থ নিচ্ছে, যা এই ওয়েবসাইটে একটি <article> এলিমেন্ট।
যে gibi বললাম, ব্লক-লেভেল এলিমেন্ট নতুন লাইন থেকে শুরু হয়, কোড লেভেলে এবং ব্রাউজারে ইউজারের পার্সপেক্টিভ থেকে এটি কীভাবে রেন্ডার হয় সেটি নিচে দেখানো হলো:
<div style="border:1px solid #dd4c4f">আমি একটি ব্লক-লেভেল এলিমেন্ট।</div> <div style="border:1px solid #dd4c4f">আমি আরেকটি ব্লক-লেভেল এলিমেন্ট।</div>কেমন দেখাবে:
আমি একটি ব্লক-লেভেল এলিমেন্ট। আমি আরেকটি ব্লক-লেভেল এলিমেন্ট।
যদি উপরের দুটি <div> এলিমেন্ট ইনলাইন হত, তবে সেগুলো একই লাইন-এ (নেক্সট সেকশনে দেখবেন) পাশে পাশে থাকে। কিন্তু ব্লক-লেভেল এলিমেন্ট হওয়ায় সেগুলো লেআউটে নিজস্ব লাইনে থাকে এবং প্রতিটি প্যারেন্ট কন্টেইনারের পুরো প্রস্থ নেয়।
সব HTML ব্লক-লেভেল এলিমেন্ট
HTML-এ ব্লক-লেভেল এলিমেন্টের সম্পূর্ণ তালিকা:
<address>- যোগাযোগের তথ্য।
<article>- আর্টিকেল কন্টেন্ট।
<aside>- অ্যাসাইড কন্টেন্ট।
<blockquote>- লম্বা ("ব্লক") কোটেশন।
<details>- ডিসক্লোজার উইজেট।
<dialog>- ডায়ালগ বক্স।
<dd>- বর্ণনা তালিকায় একটি টার্ম বর্ণনা করে।
<div>- ডকুমেন্ট ডিভিশন।
<dl>- বর্ণনা তালিকা।
<dt>- বর্ণনা তালিকার টার্ম।
<fieldset>- ফিল্ড সেট লেবেল।
<figcaption>- ফিগার ক্যাপশন।
<figure>- মিডিয়া কন্টেন্ট গ্রুপ করে ক্যাপশন (
<figcaption>) সহ। <footer>- সেকশন বা পেজ ফুটার।
<form>- ইনপুট ফর্ম।
<h1>,<h2>,<h3>,<h4>,<h5>,<h6>- হেডিং লেভেল ১-৬।
<header>- সেকশন বা পেজ হেডার।
<hgroup>- হেডার ইনফরমেশন গ্রুপ করে।
<hr>- হরিজেন্টাল রুল (ডিভাইডিং লাইন)।
<li>- লিস্ট আইটেম।
<main>- মেইন কন্টেন্ট কন্টেইনার।
<nav>- নেভিগেশন লিংক ধারণ করে।
<ol>- অর্ডার্ড লিস্ট।
<p>- প্যারাগ্রাফ।
<pre>- প্রিফরম্যাটেড টেক্সট।
<section>- ওয়েব পেজের সেকশন।
<table>- টেবিল।
<ul>- অনঅর্ডার্ড লিস্ট।
ইনলাইন এলিমেন্ট কী?
HTML-এ, ইনলাইন এলিমেন্টগুলো এমন এলিমেন্ট যা নতুন লাইন থেকে শুরু করে না, এবং শুধু তাদের প্রয়োজনীয় স্পেস নেয় (তাদের কন্টেন্ট প্রস্থ, যেমন টেক্সটের দৈর্ঘ্য)।
কোড উদাহরণ:
<div style="display:inline-block;border:1px solid #dd4c4f;"> আমি একটি ইনলাইন-ব্লক এলিমেন্ট </div>কেমন দেখাবে:
আমি একটি ইনলাইন ব্লক-এলিমেন্ট।
ইনলাইন ব্লক এলিমেন্ট নতুন লাইন থেকে শুরু করে না (লাইন ব্রেক)।
তাই যদি দুটি ইনলাইন ব্লক এলিমেন্ট কোড লেভেলে পাশে পাশে থাকে:
<div style="display:inline-block;border:1px solid #dd4c4f"> আমি একটি ইনলাইন ব্লক এলিমেন্ট। </div> <div style="display:inline-block;border:1px solid #dd4c4f"> আমি আরেকটি ইনলাইন ব্লক এলিমেন্ট। </div>তাহলে সেগুলো ব্রাউজারে এভাবে রেন্ডার হবে:
আমি একটি ইনলাইন ব্লক-এলিমেন্ট। আমি একটি ইনলাইন আরেকটি ব্লক-এলিমেন্ট।
এবং শুধু ইনলাইন ব্লক এবং ব্লক কীভাবে একে অপর থেকে আলাদা সেটি দিয়ে পয়েন্ট স্পষ্ট করতে "সাইড বাই সাইড" তুলনা করি:
আমি একটি ইনলাইন ব্লক-এলিমেন্ট। আমি একটি ব্লক-এলিমেন্ট।
সব HTML ইনলাইন ব্লক এলিমেন্ট
HTML-এ সব ইনলাইন এলিমেন্টের তালিকা:
<a><abbr><acronym><audio>(শুধু তখন দৃশ্যমান কন্ট্রোল থাকলে)<b><bdi><bdo><big><br><button><canvas><cite><code><data><datalist><del><dfn><em><embed><iframe><img><input><ins><kbd><label><map><mark><meter><noscript><object><output><picture><progress><q><ruby><s><samp><script><select><slot><small><span><strong><sub><sup><svg><template><textarea><time><u><tt><var><video><wbr>
ব্লক এবং ইনলাইন-এর মধ্যে আরেকটি মূল পার্থক্য
আপনি শিখেছেন যে ব্লক এবং ইনলাইন এলিমেন্ট পার্থক্য পায়:
- ফুল-প্রস্থ (ব্লক) vs. কন্টেন্ট-প্রস্থ (ইনলাইন)
- নতুন লাইন (ব্লক) vs. একই লাইন (ইনলাইন)।
তবে ব্যবহার কৌশলে আরেকটি পার্থক্য আছে:
- ইনলাইন ব্লক এলিমেন্ট কন্টেইন করতে পারে না ব্লক-লেভেল এলিমেন্ট।
- ব্লক এলিমেন্ট কন্টেইন করতে পারে ইনলাইন ব্লক এলিমেন্ট।
তাই এটি গ্রহণযোগ্য HTML নয়:
<span><p>ইনলাইন ব্লক এলিমেন্টের ভিতরে ব্লক এলিমেন্ট।</p></span>কিন্তু এটি গ্রহণযোগ্য HTML:
<p><span>ব্লক এলিমেন্টের ভিতরে ইনলাইন ব্লক এলিমেন্ট।</span></p>এই স্ট্রাকচারাল কন্টেন্ট মডেল পার্থক্যের পেছনে ধারণা হচ্ছে ব্লক এলিমেন্টগুলো ইনলাইন এলিমেন্টের চেয়ে বড় স্ট্রাকচার বর্ণনা করতে ব্যবহৃত হয়।
মনে রাখবেন, যেকোনো HTML এলিমেন্টের display ভ্যালু আপনার CSS স্টাইলশীটে ওভাররাইড করা যায়, কিন্তু আপনি আজ যা দেখেছেন সেটি হলো ব্লক-লেভেল এবং ইনলাইন-ব্লক এলিমেন্ট ডিফল্টভাবে কীভাবে কাজ করে যদি আপনি সেগুলো নিজে স্টাইল না করেন।
