এইচটিএমএল ব্লক ও ইনলাইন টিউটোরিয়াল (বাংলায়)

এইচটিএমএল-এ উপাদানগুলো দুই ধরনের: ব্লক-লেভেল এবং ইনলাইন। এই টিউটোরিয়ালে আমরা শিখব এই দুই ধরনের উপাদানের পার্থক্য এবং তাদের ব্যবহার।

১. ব্লক ও ইনলাইন উপাদান কী?

• ব্লক-লেভেল উপাদান: এগুলো পুরো প্রস্থ (width) নিয়ে নতুন লাইনে শুরু হয়। উদাহরণ: <div>, <p>, <h1>।
• ইনলাইন উপাদান: এগুলো শুধু নিজেদের কন্টেন্টের প্রস্থ নেয় এবং একই লাইনে থাকে। উদাহরণ: <span>, <a>, <img>।

২. ব্লক ও ইনলাইন উপাদানের পার্থক্য

৩. ব্লক ও ইনলাইন উপাদানের উদাহরণ

<div class="block-example">এটি প্রথম ব্লক উপাদান</div>
<div class="block-example">এটি দ্বিতীয় ব্লক উপাদান</div>
        

<span class="inline-example">এটি প্রথম ইনলাইন উপাদান</span>
<span class="inline-example">এটি দ্বিতীয় ইনলাইন উপাদান</span>
        

<div class="block-example">
    এটি একটি <span class="inline-example">ইনলাইন টেক্সট</span> যা একটি ব্লকের মধ্যে আছে।
</div>
        

<style>
    .block-to-inline {
        display: inline;
        background-color: #e6f3ff;
        border: 1px solid #3498db;
        padding: 5px;
    }
    .inline-to-block {
        display: block;
        background-color: #fff3cd;
        border: 1px solid #856404;
        padding: 5px;
        margin: 5px 0;
    }
</style>
<div class="block-to-inline">এটি ব্লক থেকে ইনলাইন</div>
<div class="block-to-inline">এটি আরেকটি ব্লক থেকে ইনলাইন</div>
<span class="inline-to-block">এটি ইনলাইন থেকে ব্লক</span>
<span class="inline-to-block">এটি আরেকটি ইনলাইন থেকে ব্লক</span>
        

৪. ব্লক ও ইনলাইন ব্যবহারের টিপস

• লেআউটের জন্য ব্লক উপাদান (<div>, <section>) ব্যবহার করুন।
• টেক্সট বা ছোট অংশের জন্য ইনলাইন উপাদান (<span>, <a>) ব্যবহার করুন।
• সিএসএস display প্রপার্টি ব্যবহার করে ব্লক বা ইনলাইন আচরণ পরিবর্তন করুন।
• অ্যাক্সেসিবিলিটির জন্য সঠিক ট্যাগ ব্যবহার করুন (যেমন <nav>, <article>)।
• অতিরিক্ত নেস্টিং এড়িয়ে কোড পরিষ্কার রাখুন।